<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8" /> <title>dark mode</title> </head> <body> </body> </html>
@media (prefers-color-scheme: dark) { html { background-color: #273547; } }
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; const isLight = window.matchMedia('(prefers-color-scheme: light)').matches; console.log(`Is Dark: ${isDark} , Is Light: ${isLight} , Please change the mode`) window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { let theme = event.matches ? "dark" : "light"; console.log(`You changed the mode: ${theme}`) });