:root { --text-for-light: black; --bkg-for-light: lightgray; --text-for-dark: gray; --bkg-for-dark: black; } body { background-color: var(--bkg-for-light); color: var(--text-for-light); font-family: sans-serif; font-weight: 450; } /* Start with native detection */ @media (prefers-color-scheme: dark) { body { color: var(--text-for-dark); background-color: var(--bkg-for-dark); } } /* Apply colors based on toggled class */ .dark-mode { color: var(--text-for-dark); background-color: var(--bkg-for-dark); } .light-mode { color: var(--text-for-light); background-color: var(--bkg-for-light); }
var theme, prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); if (prefersDarkScheme.matches) theme = document.body.classList.contains("light-mode") ? "light" : "dark"; else theme = document.body.classList.contains("dark-mode") ? "dark" : "light"; /* localStorage.setItem("theme", theme); */ function toggle() { var currentTheme = theme; if (currentTheme == "dark") document.body.classList.toggle("light-mode"); else if (currentTheme == "light") document.body.classList.toggle("dark-mode"); }
Hello, hacky world. <button onclick="toggle()">Toggle Light/Dark Mode</button>