Search code examples
htmlcssdarkmode

light/dark mode in html, without CSS (only html)

it there a way to make the HTML elements be in dark mode

if the user has activated in his system "dark mode"
and if the user is like to use standard colors, to be "light mode"

all this automatically when the user opens the website. without any buttons.

and I want that if the user changes the theme color preference from the setting, it will automatically switch to the correct one directly without refreshing the page.

the black and white color of text, I want that don't use any CSS

so not using CSS. in this project I am using only HTML.

<!-- here is example of tags to color automatically for the answer -->
<h1>
<span>hello world<span>
<input>

if there a way to do this with one line or 2 maximum.

maybe adding a library with no configuration needed, but I don't find it

Solution

  • add this CSS property color-scheme: light dark; to the <html> css selector (is only one line of css)

    OR if you need only html you can use this <meta> tag

    <meta 
  name    = "color-scheme" 
  content = "light dark"
/>

    https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

    watch this youtube video for more details: https://youtu.be/n3lcjY4Mm00

    it does all the things you listed before!

    enter image description here enter image description here

    <html>

<head>
  <meta name="color-scheme" content="light dark">
</head>

<body>
  <h1>hello world</h1>
  <span>hello world</span>
  <input type="text" placeholder="hello world">
</body>

</html>