Dark theme

Material Design guidelines: Dark theme Material Components for the web: Dark Theme (planned)

A dark theme displays dark surfaces across the majority of a UI. It’s designed to be a supplemental mode to a default (or light) theme.

Material uses a very simple Dark theme for the moment, based on a filter() CSS effect.

Dark mode is applied in 2 conditions:

If users’s browser is set to Dark mode preference using @media (prefers-color-scheme: dark) media query AND you have rebuilt Material with variable $enable-dark-theme-media-query set to true. $enable-dark-theme-media-query is set to false by default.
data-theme="dark" is added to the opening html tag like this: <html lang="en" data-theme="dark">.

More improvements for the Dark mode will be added in next versions.

Live demo

Toggle Dark mode

<div class="custom-control custom-switch mx-5">
  <input type="checkbox" class="custom-control-input" id="darkSwitch" checked>
  <label class="custom-control-label" for="darkSwitch">Toggle Dark mode</label>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    const Tag = document.documentElement; /* Get <html> tag */
    const Switch = document.getElementById('darkSwitch');
    Tag.dataset.theme = 'dark';
    Switch.addEventListener('click', () => {
      Switch.checked ? Tag.dataset.theme = 'dark' : Tag.dataset.theme = '';
    })
  })
</script>

You can copy this code to implement simplest Dark theme right now.