Skip to content

Instantly share code, notes, and snippets.

@shreshthmohan

shreshthmohan/index.html

Last active September 21, 2022 01:19
Show Gist options
  • Save shreshthmohan/972275a9b1ad68e2d357a47b4e52c4a4 to your computer and use it in GitHub Desktop.
Save shreshthmohan/972275a9b1ad68e2d357a47b4e52c4a4 to your computer and use it in GitHub Desktop.
Download ZIP
Dark mode support with minimal CSS
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" />
<style>
:root {
color-scheme: dark light;
}
</style>
<title>Document</title>
</head>
<body>
<h1>This page supports dark mode support with minimal CSS</h1>
To achieve this, we use the <code>color-scheme</code> CSS property:
<pre>
:root {
color-scheme: dark light;
}
</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