Commit f24171b

committed

Initial implementation light/darkmode

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

1 parent 448df1a commit f24171bCopy full SHA for f24171b

File tree

+55

-0

lines changed

+55

-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: 18 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,11 @@`
`19`	`19`	`--clr-neutral-500: #3c3c3c;`
`20`	`20`	`--clr-neutral-700: #2a2a2a;`
`21`	`21`	`--clr-neutral-900: #1c1c1c;`
	`22`	`+ --clr-neutral-200-light: #1c1c1c;`
	`23`	`+ --clr-neutral-300-light: #2a2a2a;`
	`24`	`+ --clr-neutral-500-light: #b3b3b3;`
	`25`	`+ --clr-neutral-700-light: #e0e0e0;`
	`26`	`+ --clr-neutral-900-light: #ffffff;`
`22`	`27`
`23`	`28`	`--clr-accent: #00b4b8;`
`24`	`29`
`@@ -55,6 +60,19 @@`
`55`	`60`
`56`	`61`	`--br-md: 0.5rem;`
`57`	`62`	`--br-lg: 0.75rem;`
	`63`	`+`
	`64`	`+ transition:`
	`65`	`+ background-color 0.3s ease,`
	`66`	`+ color 0.3s ease;`
	`67`	`+}`
	`68`	`+`
	`69`	`+[data-theme="light"] {`
	`70`	`+ --bg-primary: var(--clr-neutral-900-light);`
	`71`	`+ --bg-secondary: var(--clr-neutral-700-light);`
	`72`	`+ --text-primary: var(--clr-neutral-200-light);`
	`73`	`+ --text-secondary: var(--clr-neutral-300-light);`
	`74`	`+ --text-dark: var(--clr-neutral-900-light);`
	`75`	`+ --border-color: var(--clr-neutral-500-light);`
`58`	`76`	`}`
`59`	`77`
`60`	`78`	`/------------------------------------\`

Comments

(0)