block by shreshthmohan c206758418d083d0a98f3b1e85d77a8e

Dark mode support without any CSS or JS. User agent will take care of the colors in each mode.

Full Screen

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>