Dark Mode in a single CSS theme file

Basic Setup

  • A single, fully themed, 2 color mode, Bootstrap CSS
  • Filtered internally by stylesheet media filters
  • Does not require and additional JavaScript, or jQuery

Replace the bootstrap stylesheet with the following code:

<!-- Inform the browser that this page supports both dark
  and light color schemes, and the page author prefers light. -->
<meta name="color-scheme" content="light dark">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-dark.css">

This is all you need to enable dark mode with Bootstrap.

If you need to notify other components that the color-scheme has changed you can use this .

Advanced Features

You may also want to be notified when the browser changes the color scheme. For example you may want to toggle a `dark` class in the `<html>` with this code:

<script>
  $(document).ready(function(){
    // dark mode update and listner
    function updateDarkColorScheme() {
      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
        $("html").removeClass('light').addClass("dark");
      } else {
        $("html").addClass('light').removeClass("dark");
      }
    }
    // Update on first load.
    updateDarkColorScheme();
    // and every time it changes
    if (window.matchMedia) window.matchMedia("(prefers-color-scheme: dark)").addListener( updateDarkColorScheme );
  });
</script>

You really don't need the additional code. This is only usefull if you have other dependancies that have not been coded to support dark mode.

Read the README.md for more on this proof of concept.

(You are viewing this page in {browser not supported} no-preference light dark mode. Read about the helper classes in the README.md.)