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

Question

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

Laaouatni Anas · Accepted Answer · 2022-09-16T08:14:58.417

13

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!

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

edited Sep 16 '22 at 08:14

answered Jul 09 '22 at 15:27

Laaouatni Anas

4,199
2
7
26

thank you, but I need only html – stackdeveloper Jul 09 '22 at 15:29
1

ok, you can use the meta tag instead – Laaouatni Anas Jul 09 '22 at 15:30
Despite not answering the question, your approach would be even more helpful with a specific example (where to add the property in which exact way), please add a code example. – Ingo Steinke Jul 09 '22 at 15:30
1

@LaaouatniAnas bro, worked with the meta tag, amazing! is really one line of code!!!!!! thank you – stackdeveloper Jul 09 '22 at 15:35
@IngoSteinke edited, added a code snippet below – Laaouatni Anas Jul 09 '22 at 15:38

Shreyansi Hathi · Answer 2 · 2022-09-19T10:43:15.603

0

You can add meta tag in your section if you want to use only HTML. You can use it like this:

    <head><meta name="color-scheme" content="light dark"></head>
<body>
  <h1>
<span>hello world<span>
<input>
</body>

Hope this helps you.

edited Sep 19 '22 at 10:43

answered Sep 19 '22 at 10:37

Shreyansi Hathi

1
3

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

2 Answers2

Linked