Skip to content

Add light/dark mode switching#5256

Closed
ekdahl wants to merge 3 commits intofisharebest:mainfrom
ekdahl:bootstrap-dark-mode
Closed

Add light/dark mode switching#5256
ekdahl wants to merge 3 commits intofisharebest:mainfrom
ekdahl:bootstrap-dark-mode

Conversation

@ekdahl
Copy link
Copy Markdown
Contributor

@ekdahl ekdahl commented Nov 15, 2025

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

@ekdahl ekdahl force-pushed the bootstrap-dark-mode branch from e0d517c to d1fce9c Compare November 15, 2025 10:47
@codecov
Copy link
Copy Markdown

codecov Bot commented Nov 15, 2025 •
edited
Loading

Codecov Report

❌ Patch coverage is 0% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 35.39%. Comparing base (d8d4259) to head (ffbbe7e).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
app/Module/ModuleThemeTrait.php 0.00% 2 Missing ⚠️
Additional details and impacted files 
@@             Coverage Diff              @@
##               main    #5256      +/-   ##
============================================
- Coverage     35.39%   35.39%   -0.01%     
- Complexity    11183    11184       +1     
============================================
  Files          1165     1165              
  Lines         48001    48003       +2     
============================================
  Hits          16990    16990              
- Misses        31011    31013       +2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ekdahl ekdahl force-pushed the bootstrap-dark-mode branch from 08daedd to ebc280a Compare November 15, 2025 13:36
@fisharebest
Copy link
Copy Markdown
Owner

fisharebest commented Nov 24, 2025

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.

@fisharebest
Copy link
Copy Markdown
Owner

fisharebest commented Nov 24, 2025

Screenshot 2025-11-24 at 21 46 30

@ekdahl
Copy link
Copy Markdown
Contributor Author

ekdahl commented Nov 26, 2025 •
edited
Loading

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.

@ekdahl
Copy link
Copy Markdown
Contributor Author

ekdahl commented Nov 26, 2025

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.

@ekdahl ekdahl mentioned this pull request Feb 28, 2026
Merged
@fisharebest
Copy link
Copy Markdown
Owner

fisharebest commented Mar 14, 2026

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.

I am open to the idea of converting the minimal theme to a bootstrap theme...

@fisharebest
Copy link
Copy Markdown
Owner

fisharebest commented Mar 15, 2026

I have decided to add a new theme method ->supportsDarkTheme(): bool.

It defaults to false. The minimal theme sets it to true.

When set, light/dark mode is selected, based on the browser/OS settings.

Updated in c0f97f5

@ekdahl ekdahl deleted the bootstrap-dark-mode branch May 2, 2026 10:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Set bootstrap color mode in ModuleThemeInterface

2 participants

@ekdahl @fisharebest