Dark Mode

Start with Fluid Design System Dark mode

Switch to dark mode
Toggle Dark Mode
Troubleshooting

Switch to Dark Mode

Update your minimum fluid-design-system package to version 4 (we highly recommend the latest version of Fluid)

npm update @engie-group/fluid-design-system@latest

Add a data-theme attribute to body tag

<body data-theme="dark">
...
</body>

Toggle Dark Mode

Use this version of the toggle component to switch between light and dark mode.

HTML

<form>
  <div class="nj-toggle toggle-theme">
    <label for="toggleDarkMode">
      <input type="checkbox" id="toggleDarkMode" role="switch">
      <span class="nj-toggle__track"></span>
      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="nj-toggle__icon">
        <path
          d="M9.53 16h-.48a8 8 0 01-7.4-8.47A7.94 7.94 0 019.52 0h.94l-.64.6a7.71 7.71 0 00-2.06 8 7.6 7.6 0 006.3 5.23l.87.1-.7.52A7.77 7.77 0 019.53 16zM8.71.74a7.31 7.31 0 00.38 14.54 7.06 7.06 0 004-.94 8.35 8.35 0 01-6-5.55A8.48 8.48 0 018.71.74z"/>
      </svg>
      <span class="nj-sr-only">Dark mode</span>
    </label>
  </div>
</form>

Javascript

document.addEventListener('DOMContentLoaded', () => {
 document.querySelector('.toggle-theme input[type=checkbox]').addEventListener('change', (evt) => {
  document.body.dataset.theme = evt.currentTarget.checked ? 'dark' : 'light';
 });
});

Troubleshooting

If you have any issues while getting set up with Fluid Design System, please create an issue or a request on our library git repository.