Loading...
AroundDocs
Buy now

Menu

Contents

Buy now

Theme mode

Around 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:

  • 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. Get rid of the mode switching code in the <head> section of you HTML document (see the screenshot below). Or if you use Pug you can simply set isThemeModeSwitch varibale to false. The variable can be found inside Around/src/templates/helpers/config.pug file.
    Theme mode code
  2. Remove the mode switch markup from the navbar (see the screenshot below). Again if you use Pug and set isThemeModeSwitch varibale to false it will be removed automatically on the next compilation.
    Theme mode switch markup
  3. Remove js module responsible for handling mode siwtching:
    1. Optionally delete the file Around/src/js/components/theme-mode-switch.js
    2. Remove or comment out the import themeModeSwitch from './components/theme-mode-switch'; from Around/src/js/theme.js
  4. Remove dark mode styles by setting $enable-dark-mode variable to false inside Around/src/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). Or if you use Pug you can simply set isThemeModeSwitch varibale to false. The variable can be found inside Around/src/templates/helpers/config.pug file.
    Theme mode code
  3. Remove the mode switch markup from the navbar (see the screenshot below). Again if you use Pug and set isThemeModeSwitch varibale to false it will be removed automatically on the next compilation.
    Theme mode switch markup
  4. Remove js module responsible for handling mode siwtching:
    1. Optionally delete the file Around/src/js/components/theme-mode-switch.js
    2. Remove or comment out the import themeModeSwitch from './components/theme-mode-switch'; from Around/src/js/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. If you use Pug you can find this code inside Around/src/templates/partials/head.pug file.
    Theme mode code
  4. Change the mode switch state to checked by default. If you use Pug you'll find the switch code inside Around/src/templates/partials/navbar.pug file.
    Theme mode switch checked
  5. Update the code inside js module responsible for handling mode siwtching Around/src/js/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 Around/src/js/theme.js is saved.
    Theme mode switch js module