BearBoard - light and dark theme

Probably the most important nice-to-have feature of any application.

TL;DR

This is actually the first time I "developed" a light/dark theme feature.

Thanks to the daisyUI component library it was not as difficult as I initially expected.

Added theme widget that changes data-theme attribute on <html> element between light and dark mode.

One of the reasons I chose daisyUI was because of the wide range of preset themes and the ease of the setup. I am not a fan of setting up colors and design by myself. Whenever possible, use things provided by geniuses who created the library.

I went for 2 themes that have similar primary color (main color)

light theme: bumblebee
dark theme: halloween

To setup application theme:

set tailwind.config.js to load only necessary themes.


module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['bumblebee', 'halloween'],
  },
};

and set the data-theme property on the html element to either one of them as the initial theme.

<!-- index.html -->
<html lang="en" data-theme="bumblebee">

Switching themes is only about changing that data-theme attribute on html element.

Theme widget code below. Swap component with icons comes from daisyUI - swap component

import { Component, createEffect, createSignal, onMount } from 'solid-js';

export enum Theme {
  LIGHT = 'bumblebee',
  DARK = 'halloween',
}

export const ThemeWidget: Component = () => {
  let htmlRef: HTMLElement | null = null;

  const [theme, setTheme] = createSignal(Theme.LIGHT);

  onMount(() => {
    htmlRef = document.querySelector('html');
  });

  createEffect(() => {
    if (htmlRef) {
      htmlRef.dataset.theme = theme();
    }
  });

  const toggleTheme = () => {
    setTheme(theme() === Theme.LIGHT ? Theme.DARK : Theme.LIGHT);
  };

  return (
    <div class='absolute top-4 right-6'>
      <label
        class={`swap swap-rotate ${theme() === Theme.DARK && 'swap-active'}`}
        onClick={toggleTheme}
      >
        {/* sun icon */}
        <svg>{...}</svg>

        {/* moon icon */}
        <svg>{...}</svg>
      </label>
    </div>
  );
};

Make the theme show different colors

When I started working on the application, I didn't really use theme-specific colors but fixed tailwind color classes instead. For example, initially, when switching between themes, the main background color was still the same shade of gray.

I had the page background color set to bg-gray-100. So obviously, changing between dark/light themes would always keep the background gray. And I should have used one of the theme-specific colors defined in daisyUI instead. In this case one of bg-base colors like bg-base-200 because they change depending on the selected theme.

daisyUI theme docs

The latest changes are available below

Github link

Royserg