Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Tokenise the remaining backend colours so dark mode can be a pure variable redefinition

Aperta
  • Qualcosa non va?
#1,552 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
38/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css
Ambito
frontend

Direzione di ricerca

Start with modules/backend/assets/less/layout/fancylayout.less and modules/backend/models/brandsetting/custom.less, then inspect the listed variable files and IconPicker.vue. Run the dark-tokens harness from wn-tailwindui-plugin to verify each core token replacement and confirm the matching darkmode.css and fancy-layout.css overrides can be deleted without changing light mode.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

#1541 routed core's colour literals through --wn-* tokens so that dark mode (and other themes) can redefine a variable instead of overriding every rule that paints something. The TailwindUI dark mode now does that (wintercms/wn-tailwindui-plugin#58): a .dark { --wn-…: … } block replaced 86 per-element declarations.

But some backend colours never became variables, and every dark-mode fix since has had to fall back to per-selector overrides, 31 of them with !important. Each gap below needs a core change so the corresponding plugin override can be deleted and dark mode becomes a pure variable redefinition.

Gaps

  • Brand-derived fancy chrome. The fancy header band, tab bars, active/inactive tabs, their wings, and the breadcrumb bar, segments, arrow tips and separators are all LESS mix()/saturate() expressions on @brand-secondary. They're compiled at build time in modules/backend/assets/less/layout/fancylayout.less, and again at runtime in modules/backend/models/brandsetting/custom.less (lines ~133–240). No var() is involved, so dark mode has to override every selector with !important to beat the runtime brand CSS.
    • Fix: have custom.less emit these as custom properties computed from the brand settings (e.g. --wn-fancy-header-bg, --wn-fancy-tab-bar, --wn-fancy-tab-active, --wn-fancy-tab-inactive, --wn-breadcrumb-bar, --wn-breadcrumb-segment, --wn-breadcrumb-current). Point the fancy-layout and breadcrumb rules at them. This is step 2b of brand-color-variable-architecture.md (on the plugin's wip/darkmode-audit branch).
    • Retires: the tab, wing, breadcrumb and header-band overrides in the plugin's darkmode.css and components/fancy-layout.css.
  • Named-colour literals the hex sweep missed. fancylayout.less uses white for the secondary-content tab wings and titles (lines ~419, 450, 473, 477, 841). The tokenisation only matched hex values, so these stayed literal and draw white edges and lines in dark mode.
    • Fix: sweep core LESS for named colours (white, black, silver, …) and tokenise them like the hex literals.
  • Input-group addon. @input-group-addon-bg: @gray-lighter (form.variables.less:26) is a compile-time literal, so the email/URL field icons stay a light box.
    • Fix: a surface token, if nothing derives from it at compile time.
  • Active and hover rows reuse a text token. @color-list-active and @color-list-hover are var(--wn-text-faint, #ddd) (list.variables.less:15-16). They paint the tree, file list and asset list active/hover row backgrounds (treeview.less, filelist.less, assetlist.less). Redefining --wn-text-faint for dark text turns those rows into grey blocks.
    • Fix: give them their own role tokens (e.g. --wn-surface-row-active, --wn-surface-row-hover).
  • Date and time picker states. @color-datepicker-today-text: @brand-primary and @color-datepicker-selected-bg: @brand-accent (datepicker.variables.less:5-6) are compile-time brand colours. So is the clockpicker header's .text-primary. The clockpicker dial colours (.clockpicker-canvas-bg, -fg, the hand) are literals in datepicker.time.less:271+. In dark mode, today is navy on a dark cell, the selected date is white on green (~2:1), and the selected hour is a pale bubble behind light numerals.
    • Fix: tokens for the selected, today, dial and hand colours.
  • Switch knob. .slide-button (checkbox.less:246) is painted with --wn-surface-hover. The knob should stay light in both modes while hover surfaces go dark, so dark mode currently has to pin the knob back.
    • Fix: give the knob its own token.
  • Icon picker modal. modules/backend/formwidgets/iconpicker/assets/js/src/components/IconPicker.vue hard-codes its panel, tile, search and footer colours in scoped CSS. Scoped CSS is injected after the skin's stylesheet with equal specificity, so dark mode has to anchor its overrides on .aim-modal.aim-open to win.
    • Fix: point the component's colours at the existing surface, text and border tokens.
  • Logos on dark surfaces. .wn-logo / .oc-logo and the empty-editor watermark (*-logo-transparent) hard-code url(../images/logo-dark.svg) in controls/common.less. Dark mode swaps in logo-light.svg with a root-absolute URL, which breaks on subdirectory installs.
    • Fix: a custom property for the logo image (e.g. --wn-logo-image), so a theme can switch it without knowing the install path.

Done when

Each gap is a variable in core, and the matching overrides in wn-tailwindui-plugin's darkmode.css / fancy-layout.css are deleted. That deletion should be verified with the dark-tokens harness, which proves a removal changes nothing and that light mode is untouched.

Lingua principale
PHP
Stelle
1.5k
Fork
251
Merge medio
2g 16h
PR unite (30g)
10

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di wintercms/winter

Tutte le issue di wintercms/winter

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.