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

Example
HTML

Show logo on light mode:

Show logo on dark mode:

development/documentation/docs/dark-light-mode-helper-classes/examples/show-hide.html

<span class="show-on-light" style="margin-right: 10px;">Show logo on light mode:</span> <img src="../../assets/img/visma-logo.svg" alt="Visma logo" class="show-on-light">
<span class="show-on-dark" style="margin-right: 10px;">Show logo on dark mode:</span> <img src="../../assets/img/visma-logo-dark.svg" alt="Visma logo" 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.

The .light-dark-toggle class renders the refreshed flat switch with a sun glyph on the thumb. Check the code from the right section to add this switcher into your app.

Example
HTML

Light mode Dark mode

development/documentation/docs/dark-light-mode-helper-classes/examples/light-dark-mode-switch.html

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

development/documentation/docs/dark-light-mode-helper-classes/examples/standard-dark-mode-switch-in-nav.html

<header class="navbar navbar-default docs-navbar-static" id="nc4navTopMain1-1" role="navigation">
	<div class="navbar-header">
		<div class="navbar-brand">
			<a href="#!" role="button" aria-label="Visma Project Name">Visma Project Name</a>
		</div>
	</div>
	<nav class="collapse navbar-collapse" id="nc4navCollapseMain1-1" aria-label="Menu">
		<ul class="nav navbar-nav nav-tabs first-level" id="nc4navFlMenu1-1" role="menubar" aria-label="Menu"> </ul>
		<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
			<li class="dropdown user-dropdown">
				<a href="#!" class="dropdown-toggle button-context" title="(Alt+K)" data-toggle="dropdown" aria-expanded="false" role="button" aria-label="Information area">
					Christian McBale Jr.
					<span class="spirisicon spirisicon-user"></span>
					<small class="selectedContext">Cool Company name AB</small>
					<span class="caret"></span>
				</a>
				<ul class="dropdown-menu company-selection" id="vudNavDarkNavDdMenu">
					<li class="form-group">
						<label for="vudNavDarkNavDdCompany">Company</label>
						<div class="dropdown">
							<button type="button" id="vudNavDarkNavDdCompany" class="dropdown-toggle dropdown-field" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Company
							</button>
							<ul class="dropdown-menu" role="menu" aria-labelledby="vudNavDarkNavDdCompany">
								<li class="dropdown-item" role="none"><a href="#!" role="menuitem">Company</a></li>
								<li class="dropdown-item" role="none"><a href="#!" role="menuitem">Another company</a></li>
							</ul>
						</div>
					</li>
					<li class="divider"></li>
					<li class="form-group">
						<label for="vudNavDarkNavDdLanguage">Language</label>
						<div class="dropdown">
							<button type="button" id="vudNavDarkNavDdLanguage" class="dropdown-toggle dropdown-field has-value" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span aria-hidden="true" class="spirisicon spirisicon-flags spirisicon-sweden"></span> Swedish
							</button>
							<ul class="dropdown-menu" role="menu" aria-labelledby="vudNavDarkNavDdLanguage">
								<li class="dropdown-item" role="none"><a href="#!" role="menuitem"><span aria-hidden="true" class="spirisicon spirisicon-flags spirisicon-sweden"></span> Swedish</a></li>
								<li class="dropdown-item" role="none"><a href="#!" role="menuitem"><span aria-hidden="true" class="spirisicon spirisicon-flags spirisicon-english"></span> English</a></li>
							</ul>
						</div>
					</li>
					<li class="divider"></li>
					<li class="dropdown-item">
						<a href="#!">List item</a>
					</li>
					<li class="divider"></li>
					<li class="dropdown-item">
						<a href="#!" class="d-flex align-items-center">
							<span aria-hidden="true" class="spirisicon spirisicon-digital-invoices-documents"></span> List item
							<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-chevron-right ms-auto"></span>
						</a>
					</li>
					<li class="divider"></li>
					<li>
						<label class="switch light-dark-toggle" for="vudNavDarkNavDdMode">
							<span class="light">Light mode</span>
							<input id="vudNavDarkNavDdMode" type="checkbox" name="vudNavDarkNavDdMode">
							<span class="togglemark">
								<b class="details"></b>
							</span>
							<span class="dark">Dark mode</span>
						</label>
					</li>
					<li class="divider divider-strong"></li>
					<li class="text-center">
						<button class="btn btn-secondary" type="button">
							<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-logout"></span>
							Sign out
						</button>
					</li>
				</ul>
			</li>
		</ul>
	</nav>
</header>

Legacy animated switch

The .light-dark-toggle-legacy class preserves the previous animated sky / sun / clouds / stars switch. The inner markup is identical to .light-dark-toggle, so switching back is a single class change.

Example
HTML

Light mode Dark mode

development/documentation/docs/dark-light-mode-helper-classes/examples/light-dark-mode-switch-legacy.html

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