Add light/dark mode toggle.

Light and dark mode can now be toggled with a new button. New
colors were also added to the site's theme to be more pearlike.

package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.5",
@@ -34,4 +35,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.0.0"
   }
-}
+}

src/App.tsx

@@ -5,6 +5,8 @@ import View from './components/view'
 import FileSystemNode from './system/filetree';
 
 import './styles/view.css';
+import ThemeToggle from './components/themeToggle';
+
 
 const App: React.FC = () => {
   const tabDirs = ['main', 'projects', 'links'];
@@ -21,9 +23,9 @@ const App: React.FC = () => {
    *          it should be chosen off some other criteria (name === "main"?)
    */
   const [pwd, setPwd] = useState<FileSystemNode>(rootFS.getChildren()[0]);
-
   return (
     <>
+      <ThemeToggle/>
       <TabList
         tabLabels={tabDirs}
         tabThumbnails={tabThumbnails}

src/components/tab.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import '../styles/tab.css';
 
-
 interface TabProps {
     label: string;
     isSelected: boolean;
@@ -19,4 +18,4 @@ const Tab: React.FC<TabProps> = ({ label, thumbnail, isSelected, onClick }) => {
     );
 };
 
-export default Tab;
+export default Tab;

src/components/themeToggle.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { FaSun, FaMoon } from "react-icons/fa";
+
+import '../styles/view.css';
+
+
+const ThemeToggle: React.FC = () => {
+  const [theme, setTheme] = useState("dark");
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+    document.documentElement.setAttribute("data-theme", theme);
+  }
+  return (
+    <>
+      <button onClick={toggleTheme} style={{fontSize: '1.2rem', position: "absolute", top: "1rem", right: "1rem"}}> 
+      {theme === 'dark' ? <FaSun/>:<FaMoon/>}
+      </button>
+    </>
+  );
+};
+
+export default ThemeToggle;

src/styles/index.css

@@ -1,10 +1,15 @@
 :root {
-  color-scheme: light dark;
   color: #F3F3F3;
-  background-color: #4f4f4f;
+
+  --fgColor: #291F0B;
+  --bgColor: #CCFCCB;
+  --componentColor: #7ABE7E;
+  --darkComponentColor: #5A9E5E;
 
   overflow: hidden;
 
+  background-color: var(--bgColor);
+
   font-family: 'JetBrainsMono';
   line-height: 1.5;
   font-weight: 400;
@@ -18,6 +23,13 @@
 
 }
 
+[data-theme="dark"] {
+  --fgColor: #F1FFFA;
+  --bgColor: #B3EFB2;
+  --componentColor: #365239;
+  --darkComponentColor: #162219;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -49,9 +61,10 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
+  background-color: var(--componentColor);
+  color: var(--fgColor);
 }
 
 button:hover {
@@ -63,18 +76,3 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-
-  a:hover {
-    color: #747bff;
-  }
-
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/styles/tab.css

@@ -2,7 +2,9 @@
     display: inline-flex;
     overflow: hidden;
 
-    background-color: #393939;
+    color: var(--fgColor);
+    background-color: var(--componentColor);
+
     padding: 0.5rem;
     padding-left: 1rem;
     width: 18rem;
@@ -14,21 +16,17 @@
 }
 
 .tab:hover {
-    background-color: #292929;
+    background-color: var(--componentColor);
 }
 
 .tab:active {
-    background-color: #161616;
+    background-color: var(--componentColor);
 }
 
 .tab.selected {
-    background-color: #161616;
+    background-color: var(--componentColor);
 }
 
-/* .tab.selected:hover {
-    background-color: #202020;
-} */
-
 .tabList {
     display: flex;
     position: fixed;
@@ -47,4 +45,4 @@
 
     width: 0.75rem;
     height: 0.75rem;
-}
+}

src/styles/view.css

@@ -5,11 +5,12 @@
     height: 95vh;
     width: 100vw;
 
+    background-color: var(--componentColor);
+
     box-sizing: border-box;
     border-radius: 0.25rem;
 
     font-weight: 600;
-    background-color: #161616;
 
     white-space: pre;
 
@@ -28,6 +29,8 @@
     padding: 1vw;
 
     border-radius: 0.25rem;
+
+    color: var(--fgColor);
 }
 
 .window.terminal {
@@ -40,7 +43,7 @@
 .window.page {
     right: 1vw;
     width: 40vw;
-    border: 1px solid blue;
+    background-color: var(--darkComponentColor);
 }
 
 .terminalInput {