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:
- 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
-
Make sure to clear Browser local storage from
theme
variable. In Chrome browser it can be done via Application panel: -
Remove the link to the mode-switching code from the
<head>
section of your HTML document (refer to the screenshot below). -
Remove the theme (color mode) switch markup from the
navbar
(see the screenshot below). - Remove dark mode styles by setting
$enable-dark-mode
variable tofalse
insideSilicon/assets/scss/_variables.scss
. Compiled CSS will no longer contains dark mode styles.
Only Dark mode, no Light mode option
-
Make sure to clear Browser local storage from
theme
variable. In Chrome browser it can be done via Application panel: -
Set the
data-bs-theme
attribute todark
on<html>
tag so the webpage loads in dark mode by default. -
Remove the link to the mode-switching code from the
<head>
section of your HTML document (refer to the screenshot below). -
Remove the theme (color mode) switch markup from the
navbar
(see the screenshot below).
Dark mode by default
-
Make sure to clear Browser local storage from
theme
variable. In Chrome browser it can be done via Application panel: -
Set the
data-bs-theme
attribute todark
on<html>
tag so the webpage loads in dark mode by default. -
Change the theme (color mode) switch state to
checked
by default. -
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.