No products in the cart.
Forum Replies Created
Viewing 1 post (of 1 total)
- Posts
-
Just to show you a working example, you can use
prefers-color-schemefor automatic toggling and also create a dark-mode and light-mode classes, for manual toggling.document.getElementById("theme").addEventListener("click", function () { if (window.matchMedia("(prefers-color-scheme: dark)").matches) document.body.classList.toggle("light-mode"); else document.body.classList.toggle("dark-mode"); });@media (prefers-color-scheme: dark) { :root { --color-primary: #0a0a0a; --color-secondary: #339eff; } } @media (prefers-color-scheme: light) { :root { --color-primary: #ffffff; --color-secondary: #ff7e33; } } .light-mode { --color-primary: #ffffff; --color-secondary: #ff7e33; } .dark-mode { --color-primary: #0a0a0a; --color-secondary: #339eff; } body { background-color: var(--color-primary); color: var(--color-secondary); }<!DOCTYPE html> <html lang="pt-BR" xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br"> <head> <meta name="color-scheme" content="dark light" /> <meta name="theme-color" media="(prefers-color-scheme: dark)" /> <meta name="theme-color" media="(prefers-color-scheme: light)" /> </head> <body> This is a test <button id="theme">Change theme</button> </body> </html>You can change it to your needs, but this is according to web.dev. Remember to set the prefers-color-scheme colors, and then change it automatically or by a manual toggle, using the .light-mode and .dark-mode classes.
Viewing 1 post (of 1 total)