Dark Mode

Start with Fluid Design System Dark mode

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@rc

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>
      <input type="checkbox">
      <!-- Sun svg -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="nj-toggle__icon">
        <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>
      <!-- Moon svg -->
      <svg 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>
    </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.