Dark Mode Website Theme Switcher with CSS and JavaScript Using localStorage instead of Cookies

A dark mode CSS/JS theme switcher to help reduce eyestrain in different lighting conditions, such as changing colors to light text on a dark background at night.

Try it by clicking on the sun and moon ☼ ☾ icons on the top of the page.

Your setting preference is saved with web browsers’ localStorage instead of cookies to help avoid needing “Accept Cookies” popups.

Put data-theme="light" in your <html> tag:
<html data-theme="light" lang="en">
Set theme colors as variables in your linked stylesheet.css (<link rel="stylesheet" href="/ippc/work/templates.css" type="text/css" media="screen" />):
html[data-theme='light'] { --bg: rgba(221,221,221,1); --color-link: #1976d2; --color-text: #111; --textarea-bg: #fafafa; --textarea-text: #111; --code-bg:#fafafa; --code-text: #111; } html[data-theme='dark'] { --bg: rgba(51,51,51,1); --color-link: #81d4fa; --color-text: #eee; --textarea-bg: #252525; --textarea-text: #eee; --code-bg:#252525; --code-text: #fafafa; } body {background-color: var(--bg); color: var(--color-text);} a {color: var(--color-link); text-decoration:none;} textarea {background: var(--textarea-bg); color: var(--textarea-text);} code {background: var(--code-bg); color: var(--code-text);}
Add a toggle link to the HTML (see the top-right of this webpage):
<a id="switch" title="Toggle webpage lights.">☼ ☾</a>
Link to the following theme switcher JavaScript code before the closing </body> tag of the webpage (<script src="/ippc/work/scripts.js"></script> </body>):
// Thank you, Phina Kersly: https://www.section.io/engineering-education/adding-dark-theme-to-your-site/ // Using localStorage to set and remember light or dark mode without cookies // https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage let theme = localStorage.getItem('data-theme'); const lightswitch = document.getElementById("switch"); const changeThemeToDark = () =>{ document.documentElement.setAttribute("data-theme", "dark") localStorage.setItem("data-theme", "dark") console.log("Dark theme set") } const changeThemeToLight = () =>{ document.documentElement.setAttribute("data-theme", "light") localStorage.setItem("data-theme", 'light') console.log("Light theme set") } if(theme === 'dark'){ changeThemeToDark() } lightswitch.addEventListener('click', ()=> { let theme = localStorage.getItem('data-theme'); if (theme ==='dark'){ changeThemeToLight() }else{ changeThemeToDark() } });

Done! See it working by clicking the ☼ ☾ icons on the top-right of the page.

Updated on 2024-02-15