Dark Mode

Start with Fluid Design System Dark mode

npm (tag) Fluid Licence

Switch to Dark Mode

Update your minimum fluid-design-system package to version 4.

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

Add a data-theme attribute to body tag

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

Browse updated colors, components and classes utilities.

Toggle Dark Mode

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


HTML

  <div class="nj-toggle toggle-theme">
      <label>
        <input type="checkbox">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="nj-toggle__icon-dm mr-1">
          <path d="M8 3.2a.4.4 0 00.4-.4V.4a.4.4 0 10-.8 0v2.4a.4.4 0 00.4.4zm4 1.41l1.7-1.7a.4.4 0 00-.57-.57L11.39 4a.4.4 0 00.57.57zm3.64 3H13.2a.4.4 0 100 .8h2.4a.4.4 0 100-.8zm-4.21 3.79a.42.42 0 01.57 0l1.7 1.7a.4.4 0 01-.57.57L11.39 12a.42.42 0 010-.61zM3.18 7.86a.43.43 0 01-.13.45.38.38 0 01-.25.09H.4a.4.4 0 110-.8h2.4a.41.41 0 01.38.26zM8 12.8a.4.4 0 00-.4.4v2.4a.4.4 0 10.8 0v-2.4a.4.4 0 00-.4-.4zm-4-1.41a.41.41 0 01.5-.05.42.42 0 01.18.3.41.41 0 01-.11.32l-1.7 1.7a.4.4 0 01-.57-.57L3.47 12zM3.48 4l.52.61A.4.4 0 004.61 4l-1.7-1.7a.4.4 0 00-.57.57zM8 4a4 4 0 104 4 4 4 0 00-4-4zm0 7.19A3.2 3.2 0 1111.22 8a3.17 3.17 0 01-.93 2.27A3.22 3.22 0 018 11.2z" fill-rule="evenodd"/>
        </svg>
        <span class="nj-toggle__track"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="nj-toggle__icon-dm ml-1">
          <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>
      </label>
  </div>

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.