Add lightmode for accessibility #31

Original file line number	Diff line number	Diff line change
		@@ -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;

2 changes: 2 additions & 0 deletions src/layouts/Header.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"
Expand Down

17 changes: 17 additions & 0 deletions src/styles/main.css

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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%);
		}

		/------------------------------------\
Expand Down Expand Up		@@ -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);
Expand Down

Navigation Menu