Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#1,552 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
38/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
css
Domain
frontend

Research direction

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.

Written by the indexing model from the issue text.

Description

#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.

Dominant language
PHP
Stars
1.5k
Forks
251
Avg merge
2d 16h
Merged PRs (30d)
10

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from wintercms/winter

All issues in wintercms/winter

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.