Added Dark Mode Feature to thecodingtrain Website

src/components/ButtonPanel.module.css

@@ -15,7 +15,7 @@
     overflow: hidden;
     margin: 0 var(--spacing-normal) 0 0;
     text-transform: uppercase;
-    color: var(--gray-dark);
+    color: var(--text-color);
   }
 }
 

src/components/ChallengesPanel.module.css

@@ -9,7 +9,7 @@
   flex-wrap: wrap;
   border-left: var(--border-cyan);
   border-bottom: var(--border-cyan);
-  color: var(--gray-dark);
+  color: var(--text-color);
   text-transform: uppercase;
   background-color: var(--cyan-light);
 
@@ -60,7 +60,7 @@
     justify-content: space-between;
     align-items: center;
     margin: 0;
-    color: var(--gray-dark);
+    color: var(--text-color);
   }
 }
 
@@ -92,7 +92,7 @@
   padding: 0 calc(var(--box-padding) / 2);
   border-bottom: var(--border);
   border-color: var(--cyan);
-  color: var(--gray-dark);
+  color: var(--text-color);
   font-weight: normal;
   font-size: var(--maru-normal);
   text-overflow: ellipsis;
@@ -112,7 +112,7 @@
   height: var(--baseline-4x);
   border-bottom: var(--border-cyan);
   border-left: var(--border-cyan);
-  background-color: white;
+  background-color: var(--background-color);
   overflow-x: hidden;
   overflow-y: auto;
 
@@ -122,7 +122,7 @@
 }
 
 .date {
-  color: var(--gray-dark);
+  color: var(--text-color);
   background-color: var(--cyan-light);
   border-bottom: var(--border-cyan);
   border-left: var(--border-cyan);

src/components/CodeExampleList.module.css

@@ -44,6 +44,7 @@
   flex-shrink: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--text-color);
 }
 
 .description {
@@ -52,6 +53,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   padding-right: var(--space);
+  color: var(--text-color);
 }
 
 .icon {
@@ -73,34 +75,37 @@
     text-decoration: underline;
     text-transform: lowercase;
     white-space: nowrap;
-    color: var(--gray-dark);
+    color: var(--text-color);
   }
   & .linkIcon {
     font-family: var(--maru-emoji);
     font-size: var(--maru-emoji-normal);
     text-decoration: none;
-    color: var(--gray-dark);
+    color: var(--text-color);
   }
 }
 
 .p5 {
   height: var(--baseline-1of2);
   width: var(--baseline-1of2);
   & path {
-    fill: var(--gray-dark);
+    fill: var(--text-color);
   }
 }
 
 .node {
   height: var(--baseline-1of2);
   width: var(--baseline-1of2);
+  & path {
+    fill: var(--text-color);
+  }
 }
 
 .processing {
   height: var(--baseline-1of3);
   width: var(--baseline-1of3);
   & path {
-    stroke: var(--gray-dark);
+    stroke: var(--text-color);
   }
 }
 
@@ -123,7 +128,7 @@
 @media (--reduced) {
   .red .example,
   .cyan .example {
-    background-color: white;
+    background-color: var(--background-color);
   }
 
   .description {

src/components/CreditList.module.css

@@ -8,7 +8,7 @@
   align-items: center;
   padding-left: var(--box-padding);
   border-left: var(--border);
-  color: var(--gray-dark);
+  color: var(--text-color);
 
   &:first-child {
     margin-top: -2px;
@@ -57,7 +57,7 @@
 @media (--reduced) {
   .red .credit,
   .cyan .credit {
-    background-color: white;
+    background-color: var(--background-color);
   }
 }
 

src/components/Footer.js

@@ -6,13 +6,16 @@ import cn from 'classnames';
 import * as css from './Footer.module.css';
 
 import Logo from '../images/logo.svg';
-import Github from '../images/github.svg';
-import Twitch from '../images/twitch.svg';
-import Nebula from '../images/nebula.svg';
-import Twitter from '../images/twitter.svg';
-import Discord from '../images/discord.svg';
-import Youtube from '../images/youtube.svg';
-import Instagram from '../images/instagram.svg';
+
+import {
+  FaGithub,
+  FaTwitch,
+  FaTwitter,
+  FaDiscord,
+  FaYoutube,
+  FaInstagram
+} from 'react-icons/fa6';
+import { IoStarSharp } from 'react-icons/io5';
 
 import { cols } from '../styles/styles.module.css';
 
@@ -83,28 +86,28 @@ const Footer = () => {
             <a
               href="https://www.youtube.com/c/TheCodingTrain/"
               aria-label="Youtube">
-              <Youtube width={30} />
+              <FaYoutube size={30} />
               <span>Youtube</span>
             </a>
           </li>
           <li>
             <a
               href="https://www.twitch.tv/codingtrainchoochoo"
               aria-label="Twitch">
-              <Twitch width={30} />
+              <FaTwitch size={30} />
               <span>Twitch</span>
             </a>
           </li>
 
           <li>
             <a href="https://nebula.tv/codingtrain" aria-label="Nebula">
-              <Nebula width={30} />
+              <IoStarSharp size={30} style={{ transform: 'scaleY(-1)' }} />
               <span>Nebula</span>
             </a>
           </li>
           <li>
             <a href="https://twitter.com/thecodingtrain" aria-label="Twitter">
-              <Twitter width={30} />
+              <FaTwitter size={30} />
               <span>Twitter</span>
             </a>
           </li>
@@ -113,19 +116,19 @@ const Footer = () => {
             <a
               href="https://www.instagram.com/the.coding.train/"
               aria-label="Instagram">
-              <Instagram width={30} />
+              <FaInstagram size={30} />
               <span>Instagram</span>
             </a>
           </li>
           <li>
             <a href="https://thecodingtrain.com/discord" aria-label="Discord">
-              <Discord width={30} />
+              <FaDiscord size={30} />
               <span>Discord</span>
             </a>
           </li>
           <li>
             <a href="https://github.com/CodingTrain" aria-label="GitHub">
-              <Github width={30} />
+              <FaGithub size={30} />
               <span>GitHub</span>
             </a>
           </li>

src/components/Footer.module.css

@@ -1,12 +1,12 @@
 .root {
-  color: var(--gray-dark);
   background-color: var(--gray-light);
+  color: var(--text-color);
   flex-wrap: wrap;
 
   & a {
     padding-left: 0;
     text-decoration: none;
-    color: var(--gray-dark);
+    color: var(--text-color);
   }
 }
 

src/components/GuideCard.js

@@ -1,26 +1,19 @@
 import React, { memo } from 'react';
 import { Link } from 'gatsby';
-import cn from 'classnames';
 
 import ButtonPanel from './ButtonPanel';
 import Image from './Image';
 
 import * as css from './GuideCard.module.css';
 
-const GuideCard = ({
-  title,
-  slug,
-  meta,
-  icon = '📒',
-  description,
-  image,
-  variant
-}) => {
+const GuideCard = ({ title, slug, meta, icon = '📒', description, image }) => {
+  // TODO refactor this to use a single ButtonPanel instance?
+
   return (
-    <article className={cn(css.root, css[variant])}>
+    <article className={css.root}>
       <div className={css.top}>
         <div className={css.icon}>{icon}</div>
-        <h2>
+        <h2 className={css.title}>
           <Link to={slug}>{title}</Link>
         </h2>
       </div>
@@ -32,7 +25,7 @@ const GuideCard = ({
             text={meta}
             buttonLink={slug}
             buttonText="Read"
-            variant={variant}
+            variant="purple"
             rainbow
           />
         </div>
@@ -45,7 +38,7 @@ const GuideCard = ({
             text={meta}
             buttonLink={slug}
             buttonText="Read"
-            variant={variant}
+            variant="purple"
             rainbow
           />
         </div>

src/components/GuideCard.module.css

@@ -5,43 +5,17 @@
   display: flex;
   flex-direction: column;
 
-  --color: var(--gray-dark);
+  --color: var(--purple);
+  --border: var(--border-purple);
 
   @media (--medium) {
     width: 100%;
     flex-basis: 100%;
   }
 }
 
-/* variants */
-.root.purple {
-  --color: var(--purple);
-  --border: var(--border-purple);
-  --background-color: var(--purple-light);
-}
-
-.root.red {
-  --color: var(--red);
-  --border: var(--border-red);
-  --background-color: var(--red-light);
-}
-
-.root.orange {
-  --color: var(--orange);
-  --border: var(--border-orange);
-  --background-color: var(--orange-light);
-}
-
-.root.cyan {
-  --color: var(--cyan);
-  --border: var(--border-cyan);
-  --background-color: var(--cyan-light);
-}
-
-.icon {
-  border-right: var(--border);
-  border-bottom: var(--border);
-  border-left: var(--border);
+.title {
+  color: var(--text-color);
 }
 
 .top {
@@ -60,6 +34,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  border-right: var(--border);
+  border-bottom: var(--border);
+  border-left: var(--border);
 }
 
 .top h2 {
@@ -96,7 +74,8 @@
   text-overflow: ellipsis;
   border-bottom: var(--border);
   border-left: var(--border);
-  background-color: white;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 .left .meta {

src/components/Head.js

@@ -93,6 +93,15 @@ const Head = ({ title, description, image }) => {
         content={description ?? defaultDescription}
       />
       <meta property="twitter:image" content={`${siteUrl}${metaImage}`} />
+
+      {/* Theme toggle bootstrap */}
+      <script>{`
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+      `}</script>
     </Helmet>
   );
 };

src/components/HomepageScene.module.css

@@ -37,6 +37,7 @@
   margin: 0;
   max-width: 600px;
   padding: 0 var(--box-padding);
+  color: var(--text-color);
 }
 
 .train {