Commit 600723c

authored

Merge pull request #31 from GreenMan36/theme-toggle

Add lightmode for accessibility

2 parents b95a0da + 5f7d833 commit 600723cCopy full SHA for 600723c

File tree

+54

-0

lines changed

+54

-0

lines changed

Lines changed: 35 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,35 @@`
	`1`	`+import { useState, useEffect } from "react";`
	`2`	`+`
	`3`	`+const ThemeToggle = () => {`
	`4`	`+ const [theme, setTheme] = useState("dark");`
	`5`	`+`
	`6`	`+ useEffect(() => {`
	`7`	`+ // if the theme isn't set, use the user's system preference`
	`8`	`+ const savedTheme = localStorage.getItem("theme");`
	`9`	`+ if (savedTheme) {`
	`10`	`+ setTheme(savedTheme);`
	`11`	`+ document.documentElement.setAttribute("data-theme", savedTheme);`
	`12`	`+ } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {`
	`13`	`+ setTheme("dark");`
	`14`	`+ document.documentElement.setAttribute("data-theme", "dark");`
	`15`	`+ } else {`
	`16`	`+ setTheme("light");`
	`17`	`+ document.documentElement.setAttribute("data-theme", "light");`
	`18`	`+ }`
	`19`	`+ });`
	`20`	`+`
	`21`	`+ const toggleTheme = () => {`
	`22`	`+ const newTheme = theme === "dark" ? "light" : "dark";`
	`23`	`+ setTheme(newTheme);`
	`24`	`+ localStorage.setItem("theme", newTheme);`
	`25`	`+ document.documentElement.setAttribute("data-theme", newTheme);`
	`26`	`+ };`
	`27`	`+`
	`28`	`+ return (`
	`29`	`+ <button onClick={toggleTheme} className="button" aria-label="Toggle theme">`
	`30`	`+ {theme === "dark" ? "🌞" : "🌚"}`
	`31`	`+ </button>`
	`32`	`+ );`
	`33`	`+};`
	`34`	`+`
	`35`	`+export default ThemeToggle;`

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,13 +2,15 @@ import { GitHubIcon } from "../components/Icons";`
`2`	`2`	`import LinkButton from "../components/LinkButton";`
`3`	`3`	`import Logo from "../components/Logo";`
`4`	`4`	`import SearchInput from "../components/SearchInput";`
	`5`	`+import ThemeToggle from "../components/ThemeToggle";`
`5`	`6`
`6`	`7`	`const Header = () => {`
`7`	`8`	`return (`
`8`	`9`	`<header className="header">`
`9`	`10`	`<Logo />`
`10`	`11`	`<nav className="primary-nav">`
`11`	`12`	`<SearchInput />`
	`13`	`+ <ThemeToggle />`
`12`	`14`	`<LinkButton`
`13`	`15`	`href="https://github.com/dostonnabotov/quicksnip/blob/main/CONTRIBUTING.md"`
`14`	`16`	`target="_blank"`

Lines changed: 17 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,22 @@`
`55`	`55`
`56`	`56`	`--br-md: 0.5rem;`
`57`	`57`	`--br-lg: 0.75rem;`
	`58`	`+`
	`59`	`+ transition:`
	`60`	`+ background-color 0.3s ease,`
	`61`	`+ color 0.3s ease;`
	`62`	`+}`
	`63`	`+`
	`64`	`+/------------------------------------\`
	`65`	`+ #ACCESSIBILITY/THEMING`
	`66`	`+\------------------------------------/`
	`67`	`+[data-theme="light"] {`
	`68`	`+ color-scheme: light;`
	`69`	`+ --clr-neutral-200: hsl(0, 0%, 10%);`
	`70`	`+ --clr-neutral-300: hsl(0, 0%, 30%);`
	`71`	`+ --clr-neutral-500: hsl(0, 0%, 85%);`
	`72`	`+ --clr-neutral-700: hsl(0, 0%, 95%);`
	`73`	`+ --clr-neutral-900: hsl(60, 25%, 98%);`
`58`	`74`	`}`
`59`	`75`
`60`	`76`	`/------------------------------------\`
`@@ -434,6 +450,7 @@ abbr {`
`434`	`450`	`.categories {`
`435`	`451`	`display: grid;`
`436`	`452`	`background-color: var(--bg-secondary);`
	`453`	`+ border: 1px solid var(--border-color);`
`437`	`454`	`padding: 1.25rem;`
`438`	`455`	`padding-bottom: 2rem;`
`439`	`456`	`border-radius: var(--br-lg);`

Comments

(0)