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: Show logo on dark mode:

					
Copy to clipboard
<img src="..." class="show-on-light"> 
<img src="..." class="show-on-dark">

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.

					
Copy to clipboard
<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>

Example in the top navigation