Dark mode#2859
Conversation
- Update bootstrap to ^5.3, remove popper.js dependency
- Restructure SCSS imports for BS5 (add variables-dark, maps, root,
containers, helpers, utilities/api; remove print, custom-forms)
- Replace all theme-color() calls with direct $variable references
- Rename data attributes: data-toggle→data-bs-toggle,
data-dismiss→data-bs-dismiss, data-target→data-bs-target,
data-parent→data-bs-parent
- Rename CSS classes: ml-/mr-→ms-/me-, pl-/pr-→ps-/pe-,
float-left/right→float-start/end, text-left/right→text-start/end,
badge-{color}→text-bg-{color}, no-gutters→g-0,
font-weight-*→fw-*, text-monospace→font-monospace,
close→btn-close, custom-select→form-select
- Remove × spans from btn-close buttons (BS5 uses CSS)
- Rewrite Bootstrap JS API: tooltips, alerts, modals use native
BS5 API instead of jQuery plugin methods
- Align bootstrap-custom.scss imports with BS5 structure (remove input-group, move utilities before root per BS5 order) - Replace removed alert-variant mixin and theme-color-level() in layout.scss with simple color inheritance - Rename $table-cell-padding to $table-cell-padding-y in allocations - Fix @extend .pl-3 to .ps-3, remove redundant .gap-3 definition
- Add data-bs-theme attribute to <html> with early inline script to prevent flash of unstyled content - Theme toggle button in navbar cycles: light → dark → auto (system) using sun/moon/monitor feather icons - Preference persisted to localStorage, auto mode follows OS prefers-color-scheme and reacts to OS changes - Dark mode SCSS overrides for Tabbycat-specific colors (tables, sidebar, drag-and-drop, navbar, popovers, outline buttons)
Makes the toggle accessible on all pages including admin views.
|
Have any screenshots of the allocation screens and tooltips? From the present screenshots, I think padding needs to be worked on for the forms, and some minor colour adjustments. |
|
Yeah, padding is wrong for sure, I'm debugging it currently I'll add mode screenshots later In general, how do you like it? BS5 removed many BS4 classes, so I think at least for now I will generate shims to revert original look, and we potentially could update templates on later versions Also, how about new checkboxes? Personally, I like the new look more |
- Add .btn-block, .card-deck, .card-columns shims in BS4-compat block - Force white text on .btn-success/.btn-warning/.btn-info (BS5 picks black via color-contrast; flip back to BS4 white). In dark mode the lightened backgrounds need black text instead, so override there too. - Provide CSS-var fallbacks on .list-group-item so orphan items (inside .card without .list-group parent) render with BS4 padding/border/color - Strip card-edge borders on list-group-item children of .card to match BS4 list-group-flush-style separation - Tint BS5.3 focus ring with the primary brand color
Replace #fff/$white/#000/$alt-bg references with var(--bs-body-bg) and var(--bs-body-color) so allocation, drag-and-drop, table, and nav surfaces follow the active theme. Switch bg-white utility usage in DragAndDropDebate and item-submit to bs5 bg-body. Drop the now-unused $alt-bg and $navbar-light-bg variables and remove redundant dark-mode overrides that the source files now handle directly.
The main issue was with Right now, from what I see, light theme is almost identical to prior version, minimal font and sizes differences can be spotted, but they are rather overall BS5 style changes and I would look at them as improvement, rather than a reason to hardcode "original" tabbycat look. Overall, the theme switching is now responsive and much nicer to look at night than light version :) P.S. The look on some screens can seem zoomed out, but that's just hi res monitor I was using |
|
Hey @tienne-B! Any updates? |
2 participants
Hey!
Closes #2794.
This is a huge feature and in current state the PR is not ready, as many things should be reviewed due to BS5 breaking changes in style.
What was done
sedreplacements), removed poppler.js from dep, now internal in BS5, removed jQuery for BS4 and wired native BS5 JavaScript API.What should be done
Any help and reviews would be appreciated, more pages to be reviewed and improved.
