Color modes (themes)

Silicon features 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:

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

Only Light mode, remove Dark mode altogether

  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. 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 Silicon/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.
    Dark mode class
  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 Silicon/assets/js/theme-switcher.js to look like in the screenshot below.
    Theme switcher js code
Top