Dark Mode

Ravenbright CSS library offers built-in dark mode features for background-color, border-color and color utility classes.

Try the demo Read all dark mode 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.

1. Open CSS variable file in CSS folder
2. Find this selector html[data-theme="dark"]
3. 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

info

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

1. Write data-theme attribute with a "dark" value inside design token. Filled that selector with CSS variables

tip

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);
}

2. 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;
}

3. 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);

4. 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);
}

5. That's it! Check out the full demo on the codepen below.

Try the demo