[rittmeier]

The Colibris home page currently stays light even when Etherpad opens pads in dark mode. This change makes the home page follow the browser’s color scheme when enableDarkMode is enabled. It updates without reloading, and a light-mode preference saved in a pad on the same origin takes precedence. The dark palette is based on the existing Colibris pad colors.

If you consider this a new feature under the contribution guidelines, please let me know. I can add a separate opt-in setting that defaults to off.

Testing

• Manually verified in Microsoft Edge on Windows that the open home page switches between light and dark in both directions without reloading. Turning off dark mode in a pad kept the home page light while Windows remained in dark mode.
• Both Playwright scenarios passed on the final changes in Chromium and Firefox in Podman (4 passed).

UI changes

• This PR changes the UI, and I clicked through it myself in a browser and I'm happy with the UI/UX.

[qodo-code-review]

ⓘ Qodo reviews are paused because the subscription is no longer active. Ask your workspace admin to reactivate the subscription to resume reviews. Manage billing

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Make the Colibris homepage follow dark mode preferences

✨ Enhancement 🧪 Tests 🕐 10-20 Minutes

AI Description

• Theme the Colibris homepage from the browser color scheme when dark mode is enabled.
• Honor a saved pad light-mode preference, including changes from another tab, without reloading.
• Add Playwright coverage for live scheme changes and the saved preference.

Diagram

graph TD
  Settings["Dark mode setting"] --> Template["Homepage template"] --> Root["Root attribute"] --> Palette["Colibris dark CSS"] --> Home["Homepage UI"]
  Storage[("Pad preference")] --> Template
  Scheme["Browser color scheme"] --> Palette

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Share palette tokens with the Colibris pad

• ➕ Keeps homepage and pad colors synchronized as the palette evolves.
• ➖ Requires broader changes to existing pad styling for a homepage-specific feature.

Recommendation: Keep the PR's localized CSS and small pre-paint preference check: they respect the existing setting and stored pad override without changing pad theming. Shared palette tokens are worth considering if both palettes begin to change together.

Files changed (3) +159 / -3

Enhancement (2) +136 / -3

index.cssAdd a dark palette for Colibris homepage elements +107/-0

Add a dark palette for Colibris homepage elements

• Adds media- and attribute-gated colors for the page, cards, controls, dialog, error messages, and focus indicators. Uses colors drawn from the Colibris pad palette while retaining light styling when the conditions do not match.

src/static/skins/colibris/index.css

index.htmlGate homepage auto-dark mode and honor the pad preference +29/-3

Gate homepage auto-dark mode and honor the pad preference

• Emits the root attribute and an early preference check only when enableDarkMode is on. Rechecks the saved preference on pageshow and storage events, and moves error colors from inline styles so the dark palette can override them.

src/templates/index.html

Tests (1) +23 / -0

homepage_dark_mode.spec.tsTest live scheme switching and the saved light override +23/-0

Test live scheme switching and the saved light override

• Adds Playwright scenarios that check both directions of browser color-scheme switching without reloading and verify that a stored light-mode preference keeps the homepage light.

src/tests/frontend-new/specs/homepage_dark_mode.spec.ts

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can open the rule or relationship behind a finding in one click

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗