Add dark mode

Author: pokey

cheatsheet/src/components/CheatsheetLegendComponent.tsx

@@ -12,18 +12,20 @@ export default function CheatsheetLegendComponent({
   return (
     <div
       id="legend"
-      className="border border-violet-300 rounded-lg bg-violet-100"
+      className="border border-violet-300 dark:border-violet-500 rounded-lg bg-violet-100 dark:bg-violet-900"
     >
-      <h2 className="text-xl text-center my-1 text-violet-900">Legend</h2>
+      <h2 className="text-xl text-center my-1 text-violet-900 dark:text-violet-100">
+        Legend
+      </h2>
       <table className="w-full">
-        <tr className="text bg-violet-300">
+        <tr className="text bg-violet-300 dark:bg-violet-500">
           <th className="px-1 font-normal">Term</th>
           <th className="px-1 border-l border-violet-400 font-normal">
             Definition
           </th>
         </tr>
         {data.map(({ term, definition, link }) => (
-          <tr className="odd:bg-violet-200">
+          <tr className="odd:bg-violet-200 odd:dark:bg-violet-600 dark:bg-violet-800">
             <td className="px-1">{`<${term}>`}</td>
             <td className="border-l border-violet-400 px-1">
               {link != null ? (

cheatsheet/src/components/CheatsheetListComponent.tsx

@@ -22,18 +22,18 @@ export default function CheatsheetListComponent({
   return (
     <div
       id={section.id}
-      className="border border-stone-300 rounded-lg bg-stone-100"
+      className="border border-stone-300 dark:border-stone-500 rounded-lg bg-stone-100 dark:bg-stone-700"
     >
       <h2 className="text-xl text-center my-1">{section.name}</h2>
       <table className="w-full">
-        <tr className="text bg-stone-300">
+        <tr className="text bg-stone-300 dark:bg-stone-500">
           <th className="px-1 font-normal">Spoken form</th>
           <th className="px-1 border-l border-stone-400 font-normal">
             Meaning
           </th>
         </tr>
         {spokenForms.map(({ item, spokenForm }) => (
-          <tr className="odd:bg-stone-200">
+          <tr className="odd:bg-stone-200 dark:odd:bg-stone-600">
             <td className="px-1">
               <span className="text-stone-400">"</span>
               {spokenForm.spokenForm}

cheatsheet/src/components/CheatsheetNotesComponent.tsx

@@ -5,9 +5,11 @@ export default function CheatsheetNotesComponent(): JSX.Element {
   return (
     <div
       id="notes"
-      className="p-2 border border-violet-300 rounded-lg bg-violet-100"
+      className="p-2 border border-violet-300 dark:border-violet-500 rounded-lg bg-violet-100 dark:bg-violet-900"
     >
-      <h2 className="text-xl text-center mb-1 text-violet-900">Notes</h2>
+      <h2 className="text-xl text-center mb-1 text-violet-900 dark:text-violet-100">
+        Notes
+      </h2>
       <ul>
         <li className="">
           See the{" "}

cheatsheet/src/components/SmartLink.tsx

@@ -14,7 +14,7 @@ type SmartLinkProps = {
  * @returns SmartLink component
  */
 const SmartLink: React.FC<SmartLinkProps> = ({ to, children }) => (
-  <span className="text-cyan-700 hover:text-violet-700">
+  <span className="text-blue-500 hover:text-violet-700 dark:text-cyan-400 hover:dark:text-violet-200">
     {to.startsWith("https://") ? (
       <a href={to} target="_blank" rel="noopener noreferrer">
         {children}

cheatsheet/src/pages/cheatsheet.tsx

@@ -6,17 +6,16 @@ import cheatsheetLegend from "../cheatsheetLegend";
 import Helmet from "react-helmet";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleQuestion } from "@fortawesome/free-solid-svg-icons";
-import { Link } from "gatsby";
 import CheatsheetNotesComponent from "../components/CheatsheetNotesComponent";
 import SmartLink from "../components/SmartLink";
 
 // markup
 const CheatsheetPage = () => {
   return (
-    <main>
+    <main className="dark:text-stone-100">
       <Helmet
         bodyAttributes={{
-          class: "bg-stone-50",
+          class: "bg-stone-50 dark:bg-stone-800",
         }}
       />
       <h1 className="text-2xl md:text-3xl text-center mt-2 mb-1 xl:mt-4">