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

July 9, 2022

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; (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!

<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>