Skip to content

Instantly share code, notes, and snippets.

@shreshthmohan

shreshthmohan/index.html

Last active September 21, 2022 00:48
Show Gist options
  • Save shreshthmohan/c206758418d083d0a98f3b1e85d77a8e to your computer and use it in GitHub Desktop.
Save shreshthmohan/c206758418d083d0a98f3b1e85d77a8e to your computer and use it in GitHub Desktop.
Download ZIP
Dark mode support without any CSS or JS. User agent will take care of the colors in each mode.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark light" />
<title>Document</title>
</head>
<body>
<h1>This page supports dark mode without any CSS</h1>
To achieve this, we use the <code>color-scheme</code> meta tag:
<pre>
&#x3C;meta name=&#x22;color-scheme&#x22; content=&#x22;dark light&#x22; /&#x3E;
</pre>
<p>
To see it in action, toggle your operating system's appearance setting
between dark and light mode.
</p>
<ul>
<li>
<a
href="https://support.microsoft.com/en-us/windows/change-colors-in-windows-d26ef4d6-819a-581c-1581-493cfcc005fe"
target="_blank"
rel="noopener noreferrer"
>
Toggle Dark mode on Windows
</a>
</li>
<li>
<a
href="https://support.apple.com/en-in/HT208976"
target="_blank"
rel="noopener noreferrer"
>
Toggle Dark Mode on MacOS
</a>
</li>
<li>
<a
href="https://itsfoss.com/dark-mode-ubuntu"
target="_blank"
rel="noopener noreferrer"
>
Toggle dark mode on Ubuntu
</a>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment