feat: implement color theme switcher

package.json

@@ -17,6 +17,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
+    "react-toggle-dark-mode": "^1.1.1",
     "spinners-react": "^1.0.7"
   },
   "devDependencies": {

src/App.tsx

@@ -1,9 +1,12 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { 
 	getPublicKey, relayInit, Event, 
 	getEventHash, signEvent, Relay, 
 	UnsignedEvent, Filter,
 } from 'nostr-tools';
+import { BsMoonStarsFill } from "react-icons/bs";
+import { FaSun } from "react-icons/fa";
+
 
 import './App.css';
 import CreatePostCard from "./components/createPostCard";
@@ -12,6 +15,7 @@ import AuthCard from "./components/authCard";
 import CreatedAccModal from "./components/createdAccModal";
 import EventLoader from "./components/eventLoader";
 import RelayCtrlCard from "./components/relayCtrlCard";
+import ThemeSwitcher from "./components/themeSwitcher";
 import { RELAYS } from "./utils/constants";
 
 
@@ -81,7 +85,7 @@ function App() {
 
 
   return (
-		<div className="w-screen h-screen dark:bg-[#242424]">
+		<div className="w-screen h-screen bg-white dark:bg-[#242424]">
 			<div className="flex flex-col w-screen">
 				<div className="flex flex-row w-screen h-10">
       		<div className="flex w-full flex-col items-center justify-center">
@@ -96,6 +100,9 @@ function App() {
       		    </sup>
       		  </div>
 					</div>
+					<div className="flex w-1/6 flex-col items-end mr-10">
+						<ThemeSwitcher />
+					</div>
 				</div>
 
 				<div className="flex flex-row h-screen">

src/components/displayEventCard.tsx

@@ -40,7 +40,7 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
   		</div>
   		<div className="px-4 py-5 sm:p-6">
   			<div className="mt-2">
-					<span className="text-lg">{props.event.content}</span>					
+					<span className="text-lg dark:text-gray-200">{props.event.content}</span>					
   			</div>
   		</div>
 		</div>

src/components/relayCtrlCard.tsx

@@ -25,7 +25,7 @@ export default function RelayCtrlCard(props: RelayCtrlCardProps) {
 				className="px-4 py-5 sm:px-6 text-lg hover:dark:bg-green-300/25 hover:!text-xl hover:underline hover:decoration-green-300"
 			>
 				<div className="flex flex-row justify-center">
-					<span className="text-lg font-semibold">Current <span className="text-green-500 dark:text-green-300">Relay</span>: </span>
+					<span className="text-lg font-semibold dark:text-gray-200">Current <span className="text-green-500 dark:text-green-300">Relay</span>: </span>
 					<span className="ml-5 inline-flex items-center gap-x-1.5 rounded-md bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700">
 					  <svg className="h-1.5 w-1.5 fill-green-500" viewBox="0 0 6 6" aria-hidden="true">
 					    <circle cx="3" cy="3" r="3" />

src/components/themeSwitcher.tsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import { DarkModeSwitch } from "react-toggle-dark-mode";
+import useTheme from "../hooks/useTheme";
+
+export default function ThemeSwitcher() {
+    const [colorTheme, setTheme] = useTheme();
+    const [darkSide, setDarkSide] = useState(
+      colorTheme === "light" ? true : false
+    );
+
+    const toggleDarkMode = (checked: boolean) => {
+      setTheme(colorTheme);
+      setDarkSide(checked);
+    };
+
+    return (
+      <>
+        <DarkModeSwitch
+          checked={darkSide}
+          onChange={toggleDarkMode}
+          size={30}
+        />
+      </>
+    );
+}

src/hooks/useTheme.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export default function useThemeSwitcher() {
+	const [theme, setTheme] = useState<string>(localStorage.theme);
+	const colorTheme = theme === "dark" ? "light" : "dark";
+
+	useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove(colorTheme);
+    root.classList.add(theme);
+    localStorage.setItem('theme', theme);	
+	}, [theme, colorTheme]);
+
+	return [colorTheme, setTheme] as const;
+}

src/index.css

@@ -7,6 +7,7 @@
   line-height: 1.5;
   font-weight: 400;
 
+  color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
 

tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",