Henry-Hiles/website-old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve dark mode switcher buttons

Browse source
This commit is contained in:
Henry Hiles 2023-04-24 11:02:56 -04:00
parent d6e113fa75
commit 22f5f1f971
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/Nav.astro
View file

@ -16,8 +16,12 @@ import styles from "../styles/Nav.module.css"
</li> </li>
<li> <li>
<div id="themeToggle"> <div id="themeToggle">
<div aria-hidden="false"><Icon name="ph:sun-fill" /></div> <button aria-hidden="false" title="Switch to light mode"
<div aria-hidden="true"><Icon name="ph:moon-fill" /></div> ><Icon name="ph:sun-fill" /></button
>
<button aria-hidden="true" title="Switch to dark mode"
><Icon name="ph:moon-fill" /></button
>
</div> </div>
</li> </li>
<li> <li>
@ -39,7 +43,7 @@ import styles from "../styles/Nav.module.css"
const body = document.querySelector("body") const body = document.querySelector("body")
const themeToggle = document.querySelector("#themeToggle") const themeToggle = document.querySelector("#themeToggle")
const icons = document.querySelectorAll("#themeToggle > div") const icons = document.querySelectorAll("#themeToggle > button")
let lightMode = localStorage.getItem("lightMode") === "true" || false let lightMode = localStorage.getItem("lightMode") === "true" || false
const setLightMode = () => { const setLightMode = () => {
localStorage.setItem("lightMode", lightMode) localStorage.setItem("lightMode", lightMode)