Light / Dark mode utilities

Show / hide element on dark/light mode

Use this classes to show and element only on light mode or only on dark mode.

Here are the supported classes and an example:

  • .show-on-light - visible only on light mode
  • .show-on-dark - visible only on dark mode
Show logo on light mode: Visma logo Show logo on dark mode: Visma logo

Light / Dark mode switcher

The Mode switch/toggle is used to switch between Standard (light) mode and Dark mode. It should be easily accessible via the user profile dropdown in the top menu. Learn more about the recommendations for switching to dark mode in the UX Guidelines.

Check the code from the right section to add this switcher into your app.

Example in the top navigation

				
<!-- Show/Hide on dark/light mode -->
<img src="..." class="show-on-light"> 
<img src="..." class="show-on-dark">


<!-- Light/Dark mode switcher -->
<label class="switch switch-label light-dark-toggle" for="option">
    <b class="light">Light mode</b>
    <input id="option" type="checkbox" name="option">
    <span class="togglemark">
       <b class="details"></b>
    </span>
    <b class="dark">Dark mode</b>
</label>