Skip to content

mobile: add a theme setting: light, dark, or follow the system - #3136

Merged
xirvik merged 1 commit into
Novik:masterfrom
xombiemp:mobile-dark-theme
Jul 25, 2026
Merged

mobile: add a theme setting: light, dark, or follow the system#3136
xirvik merged 1 commit into
Novik:masterfrom
xombiemp:mobile-dark-theme

Conversation

@xombiemp

Copy link
Copy Markdown
Collaborator

Summary

  • Adds a plugin.theme option ('light', 'dark' or 'system') plus a live theme selector on the settings page, working like the existing accent selector: not persisted, a reload reverts to the configured option. 'system' follows the device's light/dark preference live via prefers-color-scheme.
  • Everything themes off Bootstrap's data-bs-theme: the core's Bootstrap 5 assets flip their own components, and the hardcoded light colors in mobile.css move to the corresponding Bootstrap CSS variables.
  • The near-black accent would be invisible on the dark theme's near-black background, so there it resolves to its counterpart, near-white — it was always really "maximum-contrast neutral", and its dropdown label becomes "Contrast" to match. On the near-white fills, the progress-bar stripes, progress labels and selected-filter text flip dark to stay legible.
  • Progress-bar labels also get a bolder weight (500 → 700) in all themes for readability over the bar.

Test plan

  • Settings → Theme: switch between Light / Dark / System and confirm every page (list, details, add, filter, settings, directory picker) follows
  • With theme 'system', flip the device's dark mode and confirm the UI follows without a reload
  • Dark theme + Contrast accent: buttons, tab highlights, selected filter rows, progress bars (stripes and labels) all stay legible
  • Light theme unchanged with the default config

Made with Cursor

plugin.theme picks the color scheme, with a live try-before-you-buy
selector on the settings page like the accent one; 'system' tracks the
device's preference live. Everything themes off Bootstrap's
data-bs-theme, with the hardcoded light colors in mobile.css moved to
the corresponding CSS variables.

The near-black accent would vanish on the dark theme's near-black
background, so there it resolves to its counterpart, near-white
(it's relabeled "Contrast" to match), with the progress-bar stripes,
progress labels and selected-filter text flipping dark to stay
legible on the near-white fills. Progress labels also gain a bolder
weight across all themes.
@xirvik
xirvik merged commit cca176d into Novik:master Jul 25, 2026
5 checks passed
@xirvik xirvik mentioned this pull request Jul 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants