Color modes

Color modes#

Bootstrap 5.3 has introduced color modes. This chapter is a guide for how to implement color modes in Plone 6.

Added in version Plone: 6.0.6

Preferred color modes#

You will need to add some JavaScript functionality to set the Bootstrap theme to the user's preferred color scheme. Add the JavaScript file to the browser/static folder of your Plone 6 project. Register it in the browser/profiles/default/registry of your Plone 6 project. See Registering JavaScript and CSS for more information.

(() => {
    'use strict'

    // Set Bootstrap Theme to the preferred color scheme
    const setPreferredTheme = () => {
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.setAttribute('data-bs-theme', 'dark')
        } else {
            document.documentElement.setAttribute('data-bs-theme', 'light')
        }
    }

    window.addEventListener('DOMContentLoaded', () => {
        setPreferredTheme()
    })
})()

Toggle button#

To switch color themes, corresponding elements with data-bs-theme-value attributes must be added to the DOM. Default Bootstrap 5.3 color themes include light, dark, and auto. If you want to add a theme toggler to your site, you can use the following example.

<div class="btn-group btn-group-sm">
  <button class="btn btn-secondary" data-bs-theme-value="light">
    Light
  </button>
  <button class="btn btn-secondary" data-bs-theme-value="dark">
    Dark
  </button>
</div>

Register the toggle button#

You will need to add some JavaScript functionality to the toggler. The following code snippet is based on the Bootstrap 5.3 documentation.

Add the JavaScript file to the browser/static folder of your Plone 6 project. Register it in the browser/profiles/default/registry of your Plone 6 project. See Registering JavaScript and CSS for more information.

(() => {
    'use strict'

    const storedTheme = localStorage.getItem('theme')

    const getPreferredTheme = () => {
      if (storedTheme) {
        return storedTheme
      }
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    }

    const setTheme = function (theme) {
      if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.setAttribute('data-bs-theme', 'dark')
      } else {
        document.documentElement.setAttribute('data-bs-theme', theme)
      }
    }

    const showActiveTheme = theme => {
      const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)

      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
        element.classList.remove('active')
      })
      btnToActive.classList.add('active')
    }

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
      if (storedTheme !== 'light' || storedTheme !== 'dark') {
        setTheme(getPreferredTheme())
      }
    })

    window.addEventListener('DOMContentLoaded', () => {
      setTheme(getPreferredTheme())
      showActiveTheme(getPreferredTheme())

      document.querySelectorAll('[data-bs-theme-value]')
        .forEach(toggle => {
          toggle.addEventListener('click', () => {
            const theme = toggle.getAttribute('data-bs-theme-value')
            localStorage.setItem('theme', theme)
            setTheme(theme)
            showActiveTheme(theme)
          })
        })
    })
})()

Customize single elements#

Elements can be assigned a static theme using the data-bs-theme attribute. When set to a value, the element will be rendered in the given theme, overriding the global theme. See the following example.

<form data-bs-theme='light'>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
Contents