Skip to main content

Dark mode

WebJET Elements already contains a prepared dark theme in the dark.css file. If you load both light.css and dark.css together, the dark mode is activated only by toggling the appropriate selector on the document or container.

Supported selectors​

The built-in dark motif responds to these selectors:

  • .dark
  • .wje-theme-dark
  • [data-theme="dark"]

The light motif is used in parallel:

  • .light
  • .wje-theme-light
  • [data-theme="light"]

Basic wiring​

<link rel="stylesheet" href="/wje-elementy/styles.css" />
<link rel="stylesheet" href="/wje-elementy/light.css" />
<link rel="stylesheet" href="/wje-elementy/dark.css" />

You can then switch the theme via data-theme, for example:

document.documentElement.dataset.theme = 'dark';
// or:
document.documentElement.dataset.theme = 'light';

Switching according to system preference​

To respect the user's system settings, use prefers-color-scheme:

const media = window.matchMedia('(prefers-color-scheme: dark)');

const applyTheme = () => {
  document.documentElement.dataset.theme = media.matches ? 'dark' : 'light';
};

applyTheme();
media.addEventListener('change', applyTheme);

Modification of system UI​

In dark mode, it is also worth setting color-scheme so that, for example, form elements or scrollbars are rendered correctly:

<meta name="color-scheme" content="light dark" />

Or directly via CSS:

html {
  color-scheme: light dark;
}

Custom dark theme override​

If the built-in dark theme isn't enough for you, add custom overrides over its tokens:

[data-theme='dark'] {
  --wje-background: #0b1220;
  --wje-color: #e5e7eb;
  --wje-border-color: #334155;

  --wje-card-background: #111827;
  --wje-card-color: #f8fafc;
}

This way, you maintain compatibility with your components while fine-tuning the look as needed.

Recommendations​

  • Always load both light.css and dark.css if you plan to switch themes on the fly.
  • Do your own customizations via CSS tokens, not via deep rewrites of internal component selectors.
  • Test text contrast, hover/focus states and form elements in both modes.

Content