Skip to main content

Using dark theme

The @digigov/css supports two themes: the light theme, which is the default one, and the dark theme, which you can install separately if you need it. Each theme defines a set of colours which will be used in our CSS for typography and styled components.

Usage​

To use a theme, simply add a light or dark class to your html tag. If you don't use a class at all, @digigov/css will use the default theme.

<html class="dark">
  <head></head>
  <body></body>
</html>

Installation​

Install the official Digigov dark or light theme in your Node.js powered apps with the npm package.

NPM​

npm install @digigov/theme-govgr-dark

Yarn​

yarn add @digigov/theme-govgr-dark

Theme example​

Here's a very basic example of our themes. You can switch between the dark and light theme by clicking the button below.

Open this example in a new tab

Changing the default theme​

By default, the provided theme is light, but it also makes use of the prefers-color-scheme CSS media feature to enable the mode that the system is currently using.

You can change the default theme from tailwind.config.js:

module.exports = {
  // ...
  defaultTheme: 'light',
}

Switching the theme​

Apps that support toggle theming most of the times need a way to switch between these themes. If you want to switch themes on the fly without the need to rebuild your application, you can use an interactive element like a button to switch between themes.

Most of the time these kind of switches belong to the Header, the Footer, or even both of them. It is also important to use a clear and concise text for this button that also portays their state. For example, a message like "Switch to dark theme" provides more information about both the current and the resulting state of user action, instead of using a more generic text for both states like “Toggle theme“.

Last but not least, you should make sure this interactive element is fully accessible for users that use screen readers or other accessibility tools.