[docs]: Fix link style in dark mode

docs/src/css/custom.css

@@ -11,7 +11,7 @@
 
 :root {
   --ifm-color-primary: #4d72fa;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
+  --ifm-color-primary-dark: rgb(33, 175, 144);  
   --ifm-color-primary-darker: rgb(31, 165, 136);
   --ifm-color-primary-darkest: rgb(26, 136, 112);
   --ifm-color-primary-light: rgb(70, 203, 174);
@@ -66,7 +66,6 @@
 
 [data-theme='dark'] .theme-doc-markdown a:not(.home-page a) {
   color: white;
-
 }
 
 
@@ -116,6 +115,10 @@
   color: #1B1F24;
 }
 
+[data-theme='dark'] .pagination-nav__label {
+  color: white;
+}
+
 .pagination-nav__link--prev .pagination-nav__sublabel::before {
   content: '« ';
 }
@@ -412,7 +415,10 @@ img {
   padding: 2px 4px;
 }
 
-
+[data-theme='dark'] .alert.alert--info a {
+  color: #1b1f24 !important;
+  text-decoration: underline !important;
+}
 
 /* Warning Alert box */
 
@@ -431,6 +437,10 @@ img {
   padding: 2px 4px;
 }
 
+[data-theme='dark'] .alert.alert--warning a {
+  color: #000000 !important;
+  text-decoration: underline !important;
+}
 
 /* Tip Alert box */
 
@@ -449,6 +459,10 @@ img {
   padding: 2px 4px;
 }
 
+[data-theme='dark'] .alert.alert--success a {
+  color: #1b1f24 !important;
+  text-decoration: underline !important;
+}
 
 /* Danger Alert box */
 
@@ -467,6 +481,10 @@ img {
   padding: 2px 4px;
 }
 
+[data-theme='dark'] .alert.alert--danger a {
+  color: #1b1f24 !important;
+  text-decoration: underline !important;
+}
 
 
 .admonition-heading .menu {
@@ -499,11 +517,11 @@ img {
 
 .navbar-signin,
 .navbar-signin:hover {
-  padding: 6px 9px !important;  
+  padding: 6px 9px !important;
 }
 
 .navbar-signin:hover,
-.navbar-website:hover{
+.navbar-website:hover {
   background-color: #F0F1F2;
 }
 
@@ -909,7 +927,11 @@ button[title="Switch between dark and light mode (currently light mode)"] svg,
 .breadcrumbs__item .breadcrumbs__link {
   padding-right: 4px;
   padding-left: 4px;
-  color: #2D343B;
+  color: #1B1F24;
+}
+
+[data-theme='dark'] .breadcrumbs__item .breadcrumbs__link {
+  color: white;
 }
 
 .breadcrumbs__item:first-child .breadcrumbs__link {
@@ -941,6 +963,6 @@ button[title="Switch between dark and light mode (currently light mode)"] svg,
   color: #4368E3;
 }
 
-.footer{
+.footer {
   padding: 0px 70px !important;
-}
+}

docs/src/theme/Footer/index.js

@@ -25,28 +25,37 @@ function Footer() {
                 <ThemedImage
                   alt={logo.alt}
                   sources={{ light: logo.src, dark: logo.srcDark || logo.src }}
-                  style={{ width: '160px', height: 'auto', boxShadow: 'none', borderRadius: '0'  }}
+                  style={{ width: '160px', height: 'auto', boxShadow: 'none', borderRadius: '0' }}
                 />
                 <p className="footer__tagline" style={{ marginTop: '0.5rem' }}>AI-powered apps, built with AI</p>
                 <div className="footer__socials" style={{ marginTop: '1rem', display: 'flex', gap: '1rem' }}>
                   <a href="https://github.com/ToolJet" target="_blank" rel="noopener noreferrer">
-                    <img 
-                      src="/img/github-icon.svg"
-                      alt="GitHub" 
+                    <ThemedImage
+                      sources={{
+                        light: '/img/github-icon.svg',
+                        dark: '/img/github-icon-white.svg'
+                      }}
+                      alt="GitHub"
                       style={{ width: '24px', height: '24px', objectFit: 'contain', boxShadow: 'none', borderRadius: '0' }}
                     />
                   </a>
                   <a href="https://tooljet.ai/slack" target="_blank" rel="noopener noreferrer">
-                    <img
-                      src="/img/slack-icon.svg"
+                    <ThemedImage
+                      sources={{
+                        light: '/img/slack-icon.svg',
+                        dark: '/img/slack-icon.svg'
+                      }}
                       alt="Slack"
                       style={{ width: '24px', height: '24px', objectFit: 'contain', boxShadow: 'none', borderRadius: '0' }}
                     />
                   </a>
                   <a href="https://x.com/ToolJet" target="_blank" rel="noopener noreferrer">
-                    <img 
-                      src="/img/x-icon.svg" 
-                      alt="X" 
+                    <ThemedImage
+                      sources={{
+                        light: '/img/x-icon.svg',
+                        dark: '/img/x-icon-white.svg'
+                      }}
+                      alt="X"
                       style={{ width: '24px', height: '24px', objectFit: 'contain', boxShadow: 'none', borderRadius: '0' }}
                     />
                   </a>
@@ -76,9 +85,9 @@ function Footer() {
             )}
           </div>
           <div className="footer__policies" style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-            <Link to="https://www.tooljet.ai/privacy" style={{color: '#606770'}}>Privacy policy</Link>
+            <Link to="https://www.tooljet.ai/privacy" style={{ color: '#606770' }}>Privacy policy</Link>
             <span></span><span></span><span></span>
-            <Link to="https://www.tooljet.ai/terms" style={{color: '#606770'}}>Terms of Service</Link>
+            <Link to="https://www.tooljet.ai/terms" style={{ color: '#606770' }}>Terms of Service</Link>
           </div>
         </div>
       </div>