feat: begin working on being able to immplement dark mode and light mode

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 {

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}>

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} />

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;
 }

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>
   );