Skip to main content
🏠Dark ModeVersion: 2.0.0-beta.7

Dark Mode

Quantum provides a built in dark theme which can be loaded and dynamically enabled in the browser. The @qtm/tokens package contains the tokens-dark.css to use.

Usage​

# with npm
npm install @qtm/tokens

# with yarn
yarn add @qtm/tokens
@import '@qtm/tokens/dist/tokens-dark.css';

Otherwise include it in your HTML file:

<link rel="stylesheet" href="./node_modules/@qtm/tokens/dist/tokens-dark.css" />

The dark mode can be enabled by adding the .dark class.

<!-- Dark mode not enabled -->
<html>
  <body>
    <!-- Will be primary filled button with light mode colors -->
    <button class="qtm-button qtm-filled qtm-primary">Light button</button>
    <!-- ... -->
  </body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
  <body>
    <!-- Will be primary filled button with dark mode colors -->
    <button class="qtm-button qtm-filled qtm-primary">Dark button</button>
    <!-- ... -->
  </body>
</html>

You can also set the dark mode for a specific section or a component.

<html>
  <body>
    <!-- Will be primary filled button with dark mode colors -->
    <button class="qtm-button qtm-filled qtm-primary dark">Dark button</button>
    <!-- ... -->
  </body>
</html>

How to bind the dark mode with the system preferences ?​

On page load dark mode can be set with the user system preferences using the media caracteristic (prefers-color-scheme: dark).

// On page load dark mode can be set with the user system preferences
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.remove('dark');
}