Skip to content
MENU

Soracom

Design System

Dark mode

Overview 

By default SDS uses light-mode only, but dark-mode support can be controlled by setting html attributes using javascript.

Note, use the light-mode/dark-mode toggle above right to see how specific colors adjust.

Basic usage 

Displaying Dark/Light mode 

Dark/Light mode can be enabled by setting the appropriate data-theme value on the root html element:

Enable dark-mode
<html data-theme="dark">
...
</html>
Enable light-mode
<html data-theme="light">
...
</html>

// Alternatively you can omit/remove the data-theme attribute
<html>
...
</html>

Examples 

Toggling the current theme 

The following sds component, combined with the example javascript will allow users to toggle the theme or fallback to the current OS theme:

<label class="ds-switch--theme ds-switch--hide-label">
  <input type="checkbox">
  <div>Dark Mode</div>
</label>
<label class="ds-switch--theme ds-switch--hide-label">
  <input type="checkbox">
  <div>Dark Mode</div>
</label>
// Light/Dark mode theme support
let themeToggles = document.querySelectorAll(".ds-switch--theme input")

if (themeToggles.length > 0) {
  // Check if a specific theme is set in localStorage, otherwise use the system setting
  let currentTheme =
    localStorage["sds:theme"] ||
    (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")

  // Set the html data-attribute to match the current theme
  if (currentTheme) {
    document.documentElement.dataset.dsTheme = currentTheme
  }

  for (const toggle of themeToggles) {
    // Set the initial state of the theme-toggle component to match the current theme
    setAllThemeToggles(currentTheme === "dark")

    // Change the current theme when the toggle is clicked
    toggle.addEventListener("click", function () {
      let targetTheme = toggle.checked ? "dark" : "light"

      // Set the theme and save the setting
      document.documentElement.dataset.dsTheme = targetTheme
      localStorage["sds:theme"] = targetTheme
      
      // Update all toggles to be the same
      setAllThemeToggles(toggle.checked)
    })
  }
}

function setAllThemeToggles(state) {
  for (const toggle of themeToggles) {
    toggle.checked = state
  }
}