Loading...
Around Docs
Buy now

Menu

Contents

Buy now

Color modes (themes)

Around supports Light and Dark color modes (aka themes). The user can easily switch between the color modes via theme switcher. Sometimes there is a situation when:

  • You need only one mode either Light or Dark
  • You need the Dark mode to be enabled by default

Let's look closer at these cases and find out how to deal with them.

Only Light mode, remove Dark mode altogether

  1. Ensure that you clear the browser's local storage to remove the theme variable. In the Chrome browser, this can be done through the Application panel:
    Browser local storage
  2. Remove the link to the mode-switching code from the <head> section of your HTML document (refer to the screenshot below).
    Theme switcher code
  3. Remove the theme (color mode) switch markup from the navbar (see the screenshot below).
    Theme switch markup
  4. Remove dark mode styles by setting $enable-dark-mode variable to false inside Around/assets/scss/_variables.scss. Compiled CSS will no longer contains dark mode styles.

Only Dark mode, no Light mode option

  1. Make sure to clear Browser local storage from theme variable. In Chrome browser it can be done via Application panel:
    Browser local storage
  2. Set the data-bs-theme attribute to dark on <html> tag so the webpage loads in dark mode by default.
    Theme attribute
  3. Remove the link to the mode-switching code from the <head> section of your HTML document (refer to the screenshot below).
    Theme switcher code
  4. Remove the theme (color mode) switch markup from the navbar (see the screenshot below).
    Theme mode switch markup

Dark mode by default

  1. Make sure to clear Browser local storage from theme variable. In Chrome browser it can be done via Application panel:
    Browser local storage
  2. Set the data-bs-theme attribute to dark on <html> tag so the webpage loads in dark mode by default.
    Theme attribute
  3. Change the theme (color mode) switch state to checked by default.
    Theme switch checked
  4. Update the code inside js file responsible for handling color mode siwtching Around/assets/js/theme-switcher.js to look like in the screenshot below.
    Theme switcher js code