webtrees Add light/dark mode switching

Had a go at implementing #5255, not sure if it's the right way to do it. Resolves #5255

Nov 15 '25 08:11 ekdahl

Codecov Report

:x: Patch coverage is 0% with 2 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 35.00%. Comparing base (489821d) to head (ebc280a).

Files with missing lines	Patch %	Lines
app/Module/ModuleThemeTrait.php	0.00%	2 Missing :warning:

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #5256      +/-   ##
============================================
- Coverage     35.00%   35.00%   -0.01%     
- Complexity    11208    11209       +1     
============================================
  Files          1159     1159              
  Lines         48180    48182       +2     
============================================
  Hits          16865    16865              
- Misses        31315    31317       +2

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

:snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
:package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Nov 15 '25 10:11 codecov[bot]

Disclaimer. I have never used dark mode for more than a few seconds. Only long enough to switch back to light mode :-)

Using code written by my favorite LLM, you can add this code to each page using the custom CSS/JS module.

This automatically inherits the light/dark mode from the browser - which, if set to "automatic", will inherit it from the operating system.

<script>
    // 1️⃣ Grab the media‑query object once
    const darkMq = window.matchMedia('(prefers-color-scheme: dark)');

    // 2️⃣ Helper that applies the proper Bootstrap data attribute
    const applyBsTheme = (isDark) => {
      // Botstrap 5.3 looks at the `data-bs-theme` attribute
      // on the <html> (or any ancestor) element.
      document.documentElement.setAttribute(
        'data-bs-theme',
        isDark ? 'dark' : 'light'
      );
    };

    // 3️⃣ Set the initial theme
    applyBsTheme(darkMq.matches);

    // 4️⃣ Keep it in sync when the user changes the OS/theme
    darkMq.addEventListener('change', e => applyBsTheme(e.matches));
  </script>

I tried it, and IMHO it looks awful. I think the individual themes will need lots of work to be compatible with bootstrap dark mode.

Nov 24 '25 21:11 fisharebest

Screenshot 2025-11-24 at 21 46 30

Nov 24 '25 21:11 fisharebest

I tried it, and IMHO it looks awful. I think the individual themes will need lots of work to be compatible with bootstrap dark mode.

I think you are misunderstanding the purpose of this. The reason for adding this is for theme makers to be able to easily select the "base theme" from bootstrap to base their own theme on. By doing that, lots of variables will already have reasonable colors set for a dark theme and the theme CSS can be made much more compact. Of course it will look bad with all the supplied themes in webtrees, as they are based on the "light" theme in Bootstrap, because that was the only one available until the color mode feature was introduced in Bootstrap 5.3.0.

Nov 26 '25 07:11 ekdahl

It is a bit tempting though to look at making a very plain "bootstrap" theme for webtrees with light and dark setting (or automatic switching) and as little CSS as possible.

Nov 26 '25 07:11 ekdahl