Dark Mode
Ravenbright CSS library offers built-in dark mode features for background-color
, border-color
and color
utility classes.
You can start using the dark mode utility classes with the following syntax:
<!-- Default syntax -->
{dark}-{utility class name}
Using dark mode​
1. with utility classes​
The easiest way to use dark mode is by using utility classes.
<!--This alert component implements dark mode-->
<div class="alert bg-yellow-200 dark-bg-yellow-800">
This is a warning alert
</div>
2. with CSS variables​
You can also utilize dark mode by creating or overriding values inside CSS variables
html[data-theme="dark"] {
--rbrh-background: var(--rbrh-gray-900);
--rbrh-text: var(--rbrh-gray-100);
}
html[data-theme="light"] {
--rbrh-background: var(--rbrh-gray-100);
--rbrh-text: var(--rbrh-gray-900);
}
Use the variables inside CSS class
.badge {
background-color: var(--rbrh-background);
color: var(--rbrh-text);
}
Customizing Dark Mode​
Ravenbright native dark mode utilize the lightest
& darkest
shade from the color palette. Ravenbright color shades also evade the #00000 color to provide better readability & to reduce eye fatigue.
For example, in dark mode, gray-100 become gray-900, and so on. Here are the steps to customize dark mode.
- Open
CSS variable
file in CSS folder - Find this selector
html[data-theme="dark"]
- Change CSS value that you like
/* Dark mode */
html[data-theme="dark"] {
--rbrh-background-300: var(--rbrh-gray-700);
--rbrh-background-200: var(--rbrh-gray-800);
--rbrh-background-100: var(--rbrh-gray-900);
--rbrh-background-50: var(--rbrh-gray-950);
--rbrh-background: var(--rbrh-black);
--rbrh-border-500: var(--rbrh-gray-500);
--rbrh-border-400: var(--rbrh-gray-600);
--rbrh-border-300: var(--rbrh-gray-700);
--rbrh-border-200: var(--rbrh-gray-800);
--rbrh-border-100: var(--rbrh-gray-900);
--rbrh-text: var(--rbrh-green-50);
--rbrh-text-900: var(--rbrh-gray-100);
--rbrh-text-800: var(--rbrh-gray-200);
--rbrh-text-700: var(--rbrh-gray-300);
--rbrh-text-600: var(--rbrh-gray-400);
--rbrh-text-link-hover: var(--rbrh-gray-100);
--rbrh-text-link: var(--rbrh-black);
--rbrh-text-link-heavy: var(--rbrh-green-500);
--rbrh-background-link: var(--rbrh-green-500);
}
Installing dark mode​
Installing dark mode in Ravenbright requires component (e.g. toggle button) and separate vanilla JS code
.
You can use your own JS code to activate dark mode
- Write
data-theme
attribute with a "dark" value inside design token. Filled that selector with CSS variables
Use the same CSS variable properties for both light and dark mode to write more efficient and cleaner code.
/* Dark mode */
html[data-theme="dark"] {
--rbrh-background-300: var(--rbrh-gray-700);
--rbrh-background-200: var(--rbrh-gray-800);
--rbrh-background-100: var(--rbrh-gray-900);
--rbrh-background-50: var(--rbrh-gray-950);
--rbrh-background: var(--rbrh-black);
--rbrh-border-500: var(--rbrh-gray-500);
--rbrh-border-400: var(--rbrh-gray-600);
--rbrh-border-300: var(--rbrh-gray-700);
--rbrh-border-200: var(--rbrh-gray-800);
--rbrh-border-100: var(--rbrh-gray-900);
--rbrh-text: var(--rbrh-green-50);
--rbrh-text-900: var(--rbrh-gray-100);
--rbrh-text-800: var(--rbrh-gray-200);
--rbrh-text-700: var(--rbrh-gray-300);
--rbrh-text-600: var(--rbrh-gray-400);
--rbrh-text-link-hover: var(--rbrh-gray-100);
--rbrh-text-link: var(--rbrh-black);
--rbrh-text-link-heavy: var(--rbrh-green-500);
--rbrh-background-link: var(--rbrh-green-500);
}
- Place your toggle component into your HTML file or use Ravenbright CSS toggle component
<fieldset>
<legend class="visually-hidden">Toggle for dark mode</legend>
<input class="toggle-input visually-hidden"
id="switch"
type="checkbox"
role="switch">
<label for="switch"
class="toggle-switch"
aria-label="toggle switch">
<span class="visually-hidden">Label for the toggle</span>
<span class="toggle-round"></span>
</label>
</fieldset>
/* Toggle - base */
.toggle-round {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
background-color: var(--rbrh-white);
border-radius: 50%;
transition: var(--transition);
box-shadow: 0 4px 20px rgba(162, 159, 159, 0.35);
/ *Moon emoji */
&:before {
content: "\1F31E";
font-size: 1em;
font-weight: bold;
}
}
/* Toggle - states */
.toggle-input:checked + .toggle-switch {
.toggle-round {
border: 1px solid var(--rbrh-gray-100);
box-shadow: var(--rbrh-shadow-sm);
background-color: var(--rbrh-gray-700);
border: 1px solid var(--rbrh-gray-700);
/* Sun emoji */
&::before {
border: none;
content: "\1F31C";
}
}
}
.toggle-switch:hover {
cursor: pointer;
}
.toggle-input:focus + .toggle-round {
box-shadow: var(--rbrh-shadow-focus);
outline: 0;
}
- Write the Javascript code and place the link inside the
head
of your HTML file.
var button = document.getElementById("switch);
var themeInStorage = localStorage.getItem('theme');
if (themeInStorage === 'dark') {
document.documentElement.setAttribute("data-theme", 'dark');
}
document.documentElement.setAttribute("data-theme", 'light');
localStorage.setItem('theme', 'light');
function changeMode(event) {
var existingDataTheme = document.documentElement.getAttribute('data-theme');
if (existingDataTheme === 'light') {
document.documentElement.setAttribute("data-theme", 'dark');
localStorage.setItem('theme', 'dark');
}
else {
document.documentElement.setAttribute("data-theme", 'light');
localStorage.setItem('theme', 'light');
}
};
button.addEventListener('change', changeMode, false);
- Write the CSS variables inside component. For example, we will implement dark mode for card component.
.card {
background-color: var(--rbrh-background-50);
border-color: var(--rbrh-border-100);
color: var(--rbrh-text-800);
}
- That's it! Check out the full demo on the codepen below.