Now, you know how to use setters and getters to apply colors to your html blocks or components. But how can we leverage the power of Swatch to apply themes at the application level ?

How are themes represented in Swatch ?

In Swatch, a theme is an ensemble of CSS variables.

There are two themes provided by default : light and dark.

You have maybe already seen here the complete list of colors available in vanilla Swatch. Some of these colors are a bit special in the sense that they can be themed.

Here is a table of all the themable colors, as well as their light (L) and dark (D) default.

Main variable (L/D)	Light variant (L/D)	Dark variant (L/D)	Contrast color (L/D)
--background	--light-background	--dark-background	--on-background
--heading	--light-heading	--dark-heading	--on-heading
--subtitle	--light-subtitle	--dark-subtitle	--on-subtitle
--metadata	--light-metadata	--dark-metadata	--on-metadata
--link	--light-link	--dark-link	--on-link

Example of applying a site-wide theme

Themes can be manually triggered using the class api ui-{themeName}, that is to say ui-light and ui-dark. Said in another way : .ui-{themeName} sets ALL of the themable variables.

The following example should give you a better idea of the theme api.

Live Editor

function AppWithDarkThemeToggle() { const [darkThemeEnabled, setDarkThemeEnabled] = useState(false) const toggleDarkTheme = () => setDarkThemeEnabled(!darkThemeEnabled) return ( <div className={`${darkThemeEnabled ? 'ui-dark' : 'ui-light'} y-background b-y`} style={{ padding:'1em' }}> <button onClick={ toggleDarkTheme }>Click me to enable { darkThemeEnabled ? 'dark ':'light ' }theme !</button> <h1 className='x-heading c-x'>Some news article</h1> <p className='x-subtitle c-x' style={{ fontSize:'2em' }}>A detailed reason for you to read the article </p> <p className='x-metadata c-x'>Published on August 10</p> <p className='x-paragraph c-x'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla ligula vel mollis ultrices. Proin sodales faucibus sodales. Ut libero nisi, venenatis in neque interdum, ullamcorper scelerisque erat. Phasellus non lectus nisl. Quisque vel laoreet libero. Cras mi ante, efficitur a tincidunt ac, cursus at metus. Morbi porttitor magna non ipsum porttitor, vitae scelerisque arcu ullamcorper. Aenean non sapien vel leo aliquam dictum in in metus. In et elit mauris. Pellentesque ac pharetra erat. </p> <div className='y-red b-y'>This div has a red background. This doesnt change with the theme.</div> </div> ) }

function AppWithDarkThemeToggle() {
  
  const [darkThemeEnabled, setDarkThemeEnabled] = useState(false)
  const toggleDarkTheme = () => setDarkThemeEnabled(!darkThemeEnabled)
  return (
    <div className={`${darkThemeEnabled ? 'ui-dark' : 'ui-light'} y-background b-y`} style={{ padding:'1em' }}>
    <button onClick={ toggleDarkTheme }>Click me to enable { darkThemeEnabled ? 'dark ':'light ' }theme !</button>
      <h1 className='x-heading c-x'>Some news article</h1>
      <p className='x-subtitle c-x' style={{ fontSize:'2em' }}>A detailed reason for you to read the article </p>
      <p className='x-metadata c-x'>Published on August 10</p>
      <p className='x-paragraph c-x'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla ligula vel mollis ultrices. Proin sodales faucibus sodales. Ut libero nisi, venenatis in neque interdum, ullamcorper scelerisque erat. Phasellus non lectus nisl. Quisque vel laoreet libero. Cras mi ante, efficitur a tincidunt ac, cursus at metus. Morbi porttitor magna non ipsum porttitor, vitae scelerisque arcu ullamcorper. Aenean non sapien vel leo aliquam dictum in in metus. In et elit mauris. Pellentesque ac pharetra erat. </p>
      <div className='y-red b-y'>This div has a red background. This doesnt change with the theme.</div>
    </div>
  ) 
}

Result

Some news article

A detailed reason for you to read the article

Published on August 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla ligula vel mollis ultrices. Proin sodales faucibus sodales. Ut libero nisi, venenatis in neque interdum, ullamcorper scelerisque erat. Phasellus non lectus nisl. Quisque vel laoreet libero. Cras mi ante, efficitur a tincidunt ac, cursus at metus. Morbi porttitor magna non ipsum porttitor, vitae scelerisque arcu ullamcorper. Aenean non sapien vel leo aliquam dictum in in metus. In et elit mauris. Pellentesque ac pharetra erat.

This div has a red background. This doesnt change with the theme.

Of course, you can also apply other colors than theme variables to your content. In this case, if you apply a theme, these elements will keep their color, like the red block.

note

As you can see, triggering the dark theme is completely effortless, provided you have set the right variables to your content.

tip

Light theme provided as a default in :root. This means, the light theme is applied by default when you get any of the themable variables.