Merge pull request #31 from GreenMan36/theme-toggle

Add lightmode for accessibility

Author: technoph1le

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

@@ -55,6 +55,22 @@
 
   --br-md: 0.5rem;
   --br-lg: 0.75rem;
+
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+/*------------------------------------*\
+  #ACCESSIBILITY/THEMING
+\*------------------------------------*/
+[data-theme="light"] {
+  color-scheme: light;
+  --clr-neutral-200: hsl(0, 0%, 10%);
+  --clr-neutral-300: hsl(0, 0%, 30%);
+  --clr-neutral-500: hsl(0, 0%, 85%);
+  --clr-neutral-700: hsl(0, 0%, 95%);
+  --clr-neutral-900: hsl(60, 25%, 98%);
 }
 
 /*------------------------------------*\
@@ -434,6 +450,7 @@ abbr {
 .categories {
   display: grid;
   background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
   padding: 1.25rem;
   padding-bottom: 2rem;
   border-radius: var(--br-lg);