Silicon Silicon Docs
 Buy now

Theme mode

Silicon features Light and Dark theme modes. The user can easily switch between the modes via theme mode toggle (switch). 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. Get rid of the mode switching code in the <head> section of you HTML document (see the screenshot below).
    Theme mode code
  2. Remove the mode switch markup from the navbar (see the screenshot below).
    Theme mode switch markup
  3. Remove js module responsible for handling mode siwtching:
    1. Optionally delete the file Silicon/assets/js/src/components/theme-mode-switch.js
    2. Remove or comment out the import themeModeSwitch from './components/theme-mode-switch'; from Silicon/assets/js/src/theme.js
  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. Add dark-mode class to <html> tag so the webpage loads in dark mode by default.
    Dark mode class
  2. Get rid of the mode switching code in the <head> section of you HTML document (see the screenshot below).
    Theme mode code
  3. Remove the mode switch markup from the navbar (see the screenshot below).
    Theme mode switch markup
  4. Remove js module responsible for handling mode siwtching:
    1. Optionally delete the file Silicon/assets/js/src/components/theme-mode-switch.js
    2. Remove or comment out the import themeModeSwitch from './components/theme-mode-switch'; from Silicon/assets/js/src/theme.js

Dark mode by default

  1. Make sure to clear Browser local storage from mode variable. In Chrome browser it can be done via Application panel:
    Browser local storage
  2. Add dark-mode class to <html> tag so the webpage loads in dark mode by default.
    Dark mode class
  3. In the <head> section of you HTML document change the Theme mode js code to be identical to the screenshot below.
    Theme mode code
  4. Change the mode switch state to checked by default.
    Theme mode switch checked
  5. Update the code inside js module responsible for handling mode siwtching Silicon/assets/js/src/components/theme-mode-switch.js to look like in the screenshot below. Make sure to compile theme.min.js with these changes. If you use Gulp setup comes with the theme it will be compiled automatically once Silicon/assets/js/src/theme.js is saved.
    Theme mode switch js module
Top