changingTheme - Dark Mode support (#11)

* changingTheme * cleanup
MicroEdgeCerts · Jun 12, 2024 · a0c7686 · a0c7686
1 parent b73c04f
commit a0c7686
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -155,7 +155,7 @@ const config: Config = {
             },
             {
               label: 'GitHub',
-              href: 'https://github.com/facebook/docusaurus',
+              href: 'https://github.com/MicroEdgeCerts',
             },
           ],
         },

diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
@@ -9,3 +9,4 @@
   height: 150px;
   margin: 25px;
 }
+
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -6,7 +6,8 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
+  --ifm-color-primary: #7cc2e7;
+  --ifm-heading-color: #7cc2e7;
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
   --ifm-color-primary-darkest: #205d3b;
@@ -19,7 +20,8 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary: #81c4ff;
+  --ifm-heading-color: #88ceff;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
   --ifm-color-primary-darkest: #1a8870;

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -12,6 +12,9 @@
   background-size: cover;
   background-position: center center;
 }
+.subtitle {
+  color: var(--ifm-heading-color);
+}
 
 @media screen and (max-width: 996px) {
   .heroBanner {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -15,7 +15,7 @@ function HomepageHeader() {
         <Heading as="h1" className="hero__title">
           {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">
+        <p className={`${styles.subtitle} hero__subtitle`}>
           <Translate id="home.subtitle" description="the hero subtitle">
             This header will be translated
           </Translate>
@@ -29,8 +29,8 @@ export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      title={`${siteConfig.title}`}
+      description="Open Badge for Learners.">
       <HomepageHeader />
       <main>
         <HomepageFeatures />
-Original file line number
+Diff line change
@@ Expand Up / @@ -155,7 +155,7 @@ const config: Config = { @@
                 },
                 {
                   label: 'GitHub',
-                  href: 'https://github.com/facebook/docusaurus',
+                  href: 'https://github.com/MicroEdgeCerts',
                 },
               ],
             },
@@ Expand Down @@