feat: fixing dark mode, and some other style issues

src/components/ActionCard/styles.module.css

@@ -1,9 +1,10 @@
 .actionCard {
-  background-color: #1a202c; /* darkBlue */
-  color: white;
+  background-color: var(--ifm-background-surface-color);
+  color: var(--ifm-color-content);
   border-radius: 24px;
   width: 100%;
   padding: 64px 32px;
+  border: 1px solid var(--ifm-color-emphasis-200);
 }
 
 .actionCardBody {
@@ -26,7 +27,7 @@
   font-size: 30px;
   line-height: 44px;
   font-weight: normal;
-  color: white;
+  color: var(--ifm-color-content);
 }
 
 .actionCardDescription {
@@ -34,7 +35,7 @@
   font-size: 16px;
   line-height: 25px;
   font-weight: normal;
-  color: #a0aec0; /* text.400 */
+  color: var(--ifm-color-content-secondary);
 }
 
 .actionCardButtonContainer {
@@ -44,13 +45,20 @@
 .actionCardButton {
   display: inline-block;
   padding: 0.5rem 1rem;
-  background-color: #3182ce; /* primary */
-  color: white;
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-color-white);
   text-decoration: none;
   border-radius: 0.25rem;
   font-size: 1rem;
   line-height: 1.5;
   text-align: center;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.actionCardButton:hover {
+  background-color: var(--ifm-color-primary-darker);
+  color: var(--ifm-color-white);
+  text-decoration: none;
 }
 
 @media (min-width: 768px) {
@@ -94,3 +102,7 @@
     width: 1110px;
   }
 }
+
+[data-theme='dark'] .actionCard {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}

src/css/custom.css

@@ -15,18 +15,32 @@
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  --ifm-background-color: #ffffff;
+  --ifm-background-surface-color: #f2f2f2;
+  --ifm-color-content: #1c1e21;
+  --ifm-color-content-secondary: #606770;
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #4D82BC;
+  --ifm-color-primary-dark: #3B71AB;
+  --ifm-color-primary-darker: #2E609A;
+  --ifm-color-primary-darkest: #214F89;
+  --ifm-color-primary-light: #6193CD;
+  --ifm-color-primary-lighter: #75A4DE;
+  --ifm-color-primary-lightest: #89B5EF;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+
+  --ifm-background-color: #1c1e21;
+  --ifm-background-surface-color: #242526;
+  --ifm-color-content: #e3e3e3;
+  --ifm-color-content-secondary: #a4a6a8;
+
+  --ifm-navbar-background-color: var(--ifm-background-surface-color);
+  --ifm-dropdown-background-color: var(--ifm-background-surface-color);
+  --ifm-card-background-color: var(--ifm-background-surface-color);
+  --ifm-toc-border-color: var(--ifm-color-emphasis-200);
 }
 
 [data-theme='light'] img[src$='#gh-dark-mode-only'],
@@ -61,3 +75,21 @@
 .footer__copyright {
   text-align: center;
 }
+
+/* Additional dark mode overrides */
+[data-theme='dark'] {
+  /* Ensure text is readable in dark mode */
+  color: var(--ifm-color-content);
+}
+
+[data-theme='dark'] .navbar {
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+}
+
+[data-theme='dark'] .table-of-contents {
+  border-left-color: var(--ifm-toc-border-color);
+}
+
+[data-theme='dark'] .footer {
+  background-color: var(--ifm-background-surface-color);
+}

src/pages/index.module.css

@@ -53,6 +53,15 @@
   height: 48px;
 }
 
+/* Dark mode styles for all primary buttons */
+[data-theme='dark'] :global(.button--primary) {
+  color: white;
+}
+
+[data-theme='dark'] :global(.button--primary svg) {
+  color: white;
+}
+
 .buttons :global(.button svg) {
   width: 20px;
   height: 20px;
@@ -61,7 +70,8 @@
 
 .introduction {
   padding: 4rem 0;
-  background: white;
+  background: var(--ifm-background-color);
+  color: var(--ifm-color-content);
 }
 
 .introduction h2 {
@@ -69,13 +79,13 @@
   font-weight: 600;
   text-align: center;
   margin-bottom: 2rem;
-  color: #243F5F;
+  color: var(--ifm-color-primary);
 }
 
 .introduction p {
   font-size: 1.1rem;
   line-height: 1.7;
-  color: #333;
+  color: var(--ifm-color-content);
   max-width: 1000px;
   margin: 0 auto;
 }
@@ -91,14 +101,16 @@
   text-align: center;
   max-width: 1000px;
   margin: 0 auto;
+  color: var(--ifm-color-content);
 }
 
 .introduction :global(.markdown p) {
   text-align: center;
+  color: var(--ifm-color-content);
 }
 
 .introduction :global(.markdown strong) {
-  color: #243F5F;
+  color: var(--ifm-color-primary);
 }
 
 .introduction :global(.markdown table) {
@@ -122,10 +134,15 @@ img {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   padding: 2rem;
-  background: white;
+  background: var(--ifm-background-surface-color);
+  color: var(--ifm-color-content);
   margin: 2rem auto;
 }
 
+[data-theme='dark'] .container {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
 @media screen and (max-width: 768px) {
   .introduction h2 {
     font-size: 2rem;
@@ -146,4 +163,5 @@ img {
 :global(.markdown) {
   font-size: 1.1rem;
   line-height: 1.7;
+  color: var(--ifm-color-content);
 }

src/pages/use-cases.mdx

@@ -1,10 +1,11 @@
-
 ---
+title: Use cases
 hide_table_of_contents: true
 ---
+
 import styles from './index.module.css';
 import Link from '@docusaurus/Link';
-import ProjectsList from "../components/ProjectList";
+import ProjectsList from '../components/ProjectList';
 
 # Use cases
 
@@ -29,7 +30,7 @@ You can use TLSNotary for:
 ## Projects using TLSNotary
 
 <section className={styles.introduction}>
-    <div className="container">
-        <ProjectsList />
-    </div>
+  <div className="container">
+    <ProjectsList />
+  </div>
 </section>