dark-mode workshop

This workshop is front-end developers. You will learn how to enable dark mode on websites using https://gramener.com/gramex-ui/.

Pre-requisites: Some experience with Bootstrap (and HTML, CSS, JS).

Render a basic template

STEP 1: Log into Codepen and Create a new pen titled Dark mode workshop

STEP 2: Add this HTML:

<!-- Include Bootstrap 5.3+ and Bootstrap icons -->
<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- Copy this dropdown anywhere in your page, e.g. inside a navbar -->
    <div
      class="position-relative"
      role="group"
      aria-label="Toggle dark mode"
      title="Toggle Dark Mode"
    >
      <button
        class="dark-theme-toggle btn btn-primary dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown"
        aria-expanded="false"
        aria-label="Toggle theme (auto)"
      >
        <i class="bi bi-circle-half"></i>
        <span class="d-lg-none ms-2">Toggle theme</span>
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li>
          <button class="dropdown-item" data-bs-theme-value="light">
            <i class="me-2 bi bi-sun-fill"></i> Light
          </button>
        </li>
        <li>
          <button class="dropdown-item" data-bs-theme-value="dark">
            <i class="me-2 bi bi-moon-stars-fill"></i> Dark
          </button>
        </li>
        <li>
          <button class="dropdown-item" data-bs-theme-value="auto">
            <i class="me-2 bi bi-circle-half"></i> Auto
          </button>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- This uses the .dark-theme-toggle class and the data-bs-theme-value= attribute to change color theme -->
<script
  src="https://cdn.jsdelivr.net/npm/@gramex/[email protected]/dist/dark-theme.js"
  type="module"
></script>

This renders a dark mode dropdown:

• "Light" sets the theme to light mode
• "Dark" sets the theme to dark mode
• "Auto" sets the theme to dark or light based on the system / browser preference

How it works

dark-theme.js adds a click handler to [data-bs-theme-value] elements that:

1. Changes the theme to the data-bs-theme-value=... value (light, dark, or auto)
2. Saves this preference in localStorage so that it persists across page loads
3. Removes the .active class from all [data-bs-theme-value] elements except the clicked one, making it appear active

See the source code.

Exercise

In your CodePen:

1. Copy the default Bootstrap navbar from https://getbootstrap.com/docs/5.3/components/navbar/
2. Add the dark mode dropdown to the navbar. It should appear on the right, just before the search
3. Make sure there is a small space after the dropdown and before the search

Your output should look like this:

Submit your code

1. Create an issue titled Exercise submission. Add a link to your CodePen and submit the issue.

Verification

To mark a submission as correct:

1. Check if the pen looks like the screenshot in the exercise. (Note the position and spacing of the dropdown)
2. Check if the dropdown works and changes the theme