Skip to main content
Themes

Quartz supports theming from the ground up. Dark and Light themes are provided by default.

In Figma​

All Quartz libraries ship in two versions: one for the light theme and the other for the dark theme.

You can start with either by enabling it in the Libraries Figma popup:

The Libraries Figma dialog window showing the result of enabling the Quartz Open Core library.

Then, go back to the Libraries window and use the Swap library button to replace one with the other:

The 'Swap library' button in the lower-right corner of the Figma 'Libraries' window.
The 'Swap library' button in the lower-right corner of the Figma 'Libraries' window.

Your entire file will update in seconds.

In code​

Quartz can be customized through pure CSS. A theme is a stylesheet that provides design tokens and apply custom styles to components.

All themes are scoped to classes using the qds-theme-{name} convention, where {name} is the lowercase name of the theme. All brands provides the qds-theme-light and qds-theme-dark classes for the default themes.

Installing themes​

To get started, set up the themes you want to use.

Swapping themes​

To activate a theme, apply its qds-theme-{name} class to the <html> element. This example imports and activates the official dark theme at once:

<html class="qds-theme-dark">
  <head>
    <link rel="stylesheet" href="/quartzds/tokens/core/dist/theme/dark.css" />
  </head>

  <body>
    <!-- ... -->
  </body>
</html>

To help you swapping themes dynamically, the Core library provides the setTheme() function, which will add or replace a qds-theme- prefixed class on the <html> element:

import { setTheme } from '@quartzds/core'

setTheme('dark')

If for some reason, you must apply the theme class on an element other than the <html> tag, the setTheme() function accepts a second parameter to indicate on which element the class must be toggled:

import { setTheme } from '@quartzds/core'

setTheme('dark', '#main-content')

This parameter can be a CSS selector string or a reference to an Element.

Detecting the user's color scheme preference​

Quartz doesn't try to auto-detect the user's theme preference because it would break things for the apps that support only one mode.

When installing multiple themes, use the prefers-color-scheme CSS media feature to selectively import the theme and initialize it:

<link
  rel="stylesheet"
  media="(prefers-color-scheme:light)"
  href="/quartzds/tokens/core/dist/theme/light.css"
  onload="document.documentElement.classList.add('qds-theme-light');"
/>
<link
  rel="stylesheet"
  media="(prefers-color-scheme:dark)"
  href="/quartzds/tokens/core/dist/theme/dark.css"
  onload="document.documentElement.classList.add('qds-theme-dark');"
/>

In JavaScript, you can use the window.matchMedia() function to watch for changes and apply the matching theme. See this Stack Overflow thread for examples.

Last updated on