Initial implementation light/darkmode

Respects browser preference, uses local storage for settings saving. Some elements aren't colored correctly or look ugly.

Author: GreenMan36

src/components/ThemeToggle.tsx

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState("dark");
+
+  useEffect(() => {
+    // if the theme isn't set, use the user's system preference
+    const savedTheme = localStorage.getItem("theme");
+    if (savedTheme) {
+      setTheme(savedTheme);
+      document.documentElement.setAttribute("data-theme", savedTheme);
+    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      setTheme("dark");
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      setTheme("light");
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  });
+
+  const toggleTheme = () => {
+    const newTheme = theme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+    localStorage.setItem("theme", newTheme);
+    document.documentElement.setAttribute("data-theme", newTheme);
+  };
+
+  return (
+    <button onClick={toggleTheme} className="button" aria-label="Toggle theme">
+      {theme === "dark" ? "🌞" : "🌚"}
+    </button>
+  );
+};
+
+export default ThemeToggle;

src/layouts/Header.tsx

@@ -2,13 +2,15 @@ import { GitHubIcon } from "../components/Icons";
 import LinkButton from "../components/LinkButton";
 import Logo from "../components/Logo";
 import SearchInput from "../components/SearchInput";
+import ThemeToggle from "../components/ThemeToggle";
 
 const Header = () => {
   return (
     <header className="header">
       <Logo />
       <nav className="primary-nav">
         <SearchInput />
+        <ThemeToggle />
         <LinkButton
           href="https://github.com/dostonnabotov/quicksnip/blob/main/CONTRIBUTING.md"
           target="_blank"

src/styles/main.css

@@ -19,6 +19,11 @@
   --clr-neutral-500: #3c3c3c;
   --clr-neutral-700: #2a2a2a;
   --clr-neutral-900: #1c1c1c;
+  --clr-neutral-200-light: #1c1c1c;
+  --clr-neutral-300-light: #2a2a2a;
+  --clr-neutral-500-light: #b3b3b3;
+  --clr-neutral-700-light: #e0e0e0;
+  --clr-neutral-900-light: #ffffff;
 
   --clr-accent: #00b4b8;
 
@@ -55,6 +60,19 @@
 
   --br-md: 0.5rem;
   --br-lg: 0.75rem;
+
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+[data-theme="light"] {
+  --bg-primary: var(--clr-neutral-900-light);
+  --bg-secondary: var(--clr-neutral-700-light);
+  --text-primary: var(--clr-neutral-200-light);
+  --text-secondary: var(--clr-neutral-300-light);
+  --text-dark: var(--clr-neutral-900-light);
+  --border-color: var(--clr-neutral-500-light);
 }
 
 /*------------------------------------*\