Feat 212 dark mode - #336
Open
theultimatewasteofspace wants to merge 31 commits into
Open
Conversation
added 30 commits
August 3, 2026 14:02
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements Issue [#212] — light/dark theme for CARE, with the toggle in the avatar dropdown and the choice saved per user.
Bootstrap 5.3 already ships dark mode; setting
data-bs-themeon<html>switches every stock component. CARE wasn't using it because ~210 places hardcoded Bootstrap's own hex values instead of referencing its variables. Most of this PR is replacing those, each keeping the original value as a fallback so light mode is unchanged.A handful of the changed lines are incidental fixes where a hardcoded value turned out to be broken rather than just un-themed (a four-digit hex, a CSS variable that was never defined, a border with no colour or width set).
What's included
Theme switching
data-bs-themeset on<html>app.theme.modeinuser_settingvia the existingappSettingSetevent — no backend changeslocalStoragecache (care.theme) →prefers-color-scheme→ lightinitTheme()inApp.vuerather thanTopbar.vue, since the topbar doesn't render on login/register/wizard routesapplyThemeextracted toassets/utils.js;isDarkModederived from the storeColour migration
var(--bs-*, fallback)bg-light→bg-body-tertiary,navbar-lightremoved)global.cssoverrides for classes with a fixed colour baked in:btn-light,btn-dark,btn-outline-dark,btn-outline-secondary,text-darkcolor-schemetied todata-bs-themeso browser-drawn controls (scrollbars, date pickers) follow CARE rather than the OSAccent colour
--care-accent/--care-on-accent; Bootstrap sets button and form-control colours per component, so buttons, pagination, switches and checkboxes each need their own ruleThird-party components
ql-*) — surfaces, toolbar, dropdowns; its icons are SVG so they needstroke/fillbootstrap-vue-3toasts — close button only (see limitations)PDF viewer
localStorage(care.pdfDark)brightness(0.93)so they don't glare against the dark UImultiplytoscreenblending in dark mode@media printdisables inversion becase printing a dark page wastes ink and reads badlyArchitectural decisions
#fffondarkblue— converting the text would break light mode), and semantic colours where the value carries meaning (Assessment button states, danger reds, success greens, annotation highlights).mix-blend-mode: multiply, which works like a marker pen on white paper and produces almost nothing over a dark page. Adjusting the fill colours had no effect;screendoes.Known limitations
bootstrap-vue-3hardcodes their colours with!important. Only the close button needed fixing, since Bootstrap inverts it to white on a light background.prefers-color-scheme. Brave suppresses it as anti-tracking, so CARE defaults to light there until the user chooses. Verified working in Safari..text-darkoverride wasn't verified against abg-warningbadge — no templates existed to render one. If a badge ever looks unreadable, that rule is the cause.Out of scope
user_stories.rst— drafted, but not inserted into the file yet.Testing
Manual, both themes: dashboard, navigation, tables and modals, annotator and PDF viewer, Quill editor, settings, and the logged-out login page. Confirmed the
user_settingrow is written and the choice survives a hard reload, including withlocalStoragecleared so the theme has to come from the backend. Printing checked and dark mode reverts to light automatically, but the PDF inversion carried through and had to be disabled explicitly.Closes (#212)