From 8eb224e0180c90c0af5ae0dd8b2991825b083eb1 Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Thu, 20 Apr 2023 22:39:47 -0500
Subject: [PATCH] feat: begin working on being able to immplement dark mode and
 light mode

---
 src/app/components/CodeSnippet.module.css |  1 +
 src/app/components/Main.tsx               |  8 ++++-
 src/app/components/NavBar.tsx             | 10 ++++--
 src/app/components/Section.module.css     |  2 +-
 src/app/components/SideBar.tsx            | 28 +++++++++++----
 src/app/global-error.tsx                  | 27 ---------------
 src/app/layout.tsx                        | 12 ++++++-
 src/app/theme.tsx                         | 42 +++++++++++++++++++++++
 8 files changed, 91 insertions(+), 39 deletions(-)
 delete mode 100644 src/app/global-error.tsx
 create mode 100644 src/app/theme.tsx

diff --git a/src/app/components/CodeSnippet.module.css b/src/app/components/CodeSnippet.module.css
index 257ba6e..4b6b06d 100644
--- a/src/app/components/CodeSnippet.module.css
+++ b/src/app/components/CodeSnippet.module.css
@@ -14,6 +14,7 @@
   border-top-right-radius: 10px;
   border-top-left-radius: 10px;
   font-size: 1rem;
+  color: white;
 }
 
 .snippetContent>pre {
diff --git a/src/app/components/Main.tsx b/src/app/components/Main.tsx
index e5749fa..6f97a05 100644
--- a/src/app/components/Main.tsx
+++ b/src/app/components/Main.tsx
@@ -1,4 +1,7 @@
+'use client';
+
 import { Fragment } from 'react';
+import { themes, useThemeContext } from '../theme';
 import { DocSection } from '../types/types';
 import styles from './Main.module.css';
 import Section from './Section';
@@ -8,8 +11,11 @@ export default function Main({
 }: {
   versionSections: DocSection[];
 }) {
+  const { theme } = useThemeContext();
+  const themeStyles = themes[theme];
+
   return (
-    <main className={styles.container}>
+    <main style={themeStyles} className={styles.container}>
       {versionSections.map(section => (
         <Fragment key={section.title}>
           <Section key={section.title}>
diff --git a/src/app/components/NavBar.tsx b/src/app/components/NavBar.tsx
index 48ea0da..6dec8a9 100644
--- a/src/app/components/NavBar.tsx
+++ b/src/app/components/NavBar.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import Link from 'next/link.js';
+import Link from 'next/link';
 import { Fragment, useState } from 'react';
-import { Doc, DocsStructure } from '../types/types.js';
+import { themes, useThemeContext } from '../theme';
+import { Doc, DocsStructure } from '../types/types';
 import styles from './NavBar.module.css';
 
 function VersionsDropdown({
@@ -153,6 +154,9 @@ export default function NavBar({
 }: {
   version: DocsStructure;
 }) {
+  const { theme } = useThemeContext();
+  const themeStyles = themes[theme];
+
   const [isNavOpen, setIsNavOpen] =
     useState<boolean>(false);
 
@@ -161,7 +165,7 @@ export default function NavBar({
   };
 
   return (
-    <nav className={styles.nav}>
+    <nav style={themeStyles} className={styles.nav}>
       <ul className={styles.navListLeft}>
         <li className={styles.sectionDropdown}>
           <SectionDropdown version={version} />
diff --git a/src/app/components/Section.module.css b/src/app/components/Section.module.css
index 8b7972d..e7a9be6 100644
--- a/src/app/components/Section.module.css
+++ b/src/app/components/Section.module.css
@@ -31,10 +31,10 @@
 
 .container>article>p {
   margin-top: 20px;
-  color: #c1c9d2;
 }
 
 .container>article code {
+  color: white;
   background-color: #0b3766;
   border-radius: 5px;
 }
diff --git a/src/app/components/SideBar.tsx b/src/app/components/SideBar.tsx
index 47a8eb2..a98d27c 100644
--- a/src/app/components/SideBar.tsx
+++ b/src/app/components/SideBar.tsx
@@ -2,6 +2,7 @@
 
 import Link from 'next/link.js';
 import { useState } from 'react';
+import { useThemeContext } from '../theme';
 import { Doc, DocsStructure } from '../types/types.js';
 import styles from './SideBar.module.css';
 
@@ -92,14 +93,29 @@ export default function SideBar({
 }: {
   version: DocsStructure;
 }) {
+  const { theme, setTheme } = useThemeContext();
+
   return (
     <div className={styles.container}>
-      <Link href="/" className={styles.link}>
-        <h1 className={styles.title}>
-          <span className={styles.onspring}>Onspring</span>{' '}
-          <span className={styles.api}>API</span>
-        </h1>
-      </Link>
+      <div>
+        <Link href="/" className={styles.link}>
+          <h1 className={styles.title}>
+            <span className={styles.onspring}>
+              Onspring
+            </span>{' '}
+            <span className={styles.api}>API</span>
+          </h1>
+        </Link>
+        <label className="switch">
+          <input
+            onChange={() =>
+              setTheme(theme === 'light' ? 'dark' : 'light')
+            }
+            type="checkbox"
+          />
+          <span className="slider round"></span>
+        </label>
+      </div>
       <ListTree docs={version.docs} />
     </div>
   );
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
deleted file mode 100644
index 5960927..0000000
--- a/src/app/global-error.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-
-import styles from './error.module.css';
-
-export default function GlobalError({
-  error,
-  reset,
-}: {
-  error: Error;
-  reset: () => void;
-}) {
-  return (
-    <html lang="en">
-      <body>
-        <div className={styles.container}>
-          <h2>Something went wrong!</h2>
-          <a
-            className={styles.navLink}
-            onClick={() => reset()}
-          >
-            Try again
-          </a>
-        </div>
-      </body>
-    </html>
-  );
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c1807c6..ce8c4f1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import './globals.css';
+import { ThemeContextProvider } from './theme';
 
 export const metadata = {
   title: 'Onspring API Docs',
@@ -12,6 +13,11 @@ export const metadata = {
       },
     ],
   },
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+  },
 };
 
 export default function RootLayout({
@@ -21,7 +27,11 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <ThemeContextProvider>
+          {children}
+        </ThemeContextProvider>
+      </body>
     </html>
   );
 }
diff --git a/src/app/theme.tsx b/src/app/theme.tsx
new file mode 100644
index 0000000..df299ce
--- /dev/null
+++ b/src/app/theme.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useState,
+} from 'react';
+
+const ThemeContext = createContext({});
+
+const darkTheme = {
+  color: 'white',
+  backgroundColor: '#05254a',
+};
+
+const lightTheme = {
+  color: 'black',
+  backgroundColor: 'white',
+};
+
+export const themes = {
+  dark: darkTheme,
+  light: lightTheme,
+} as { [key: string]: { [key: string]: string } };
+
+export const ThemeContextProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useThemeContext: any = () =>
+  useContext(ThemeContext);