Repository navigation
Conversation
…rk themes A palette button next to the theme switch (sidebar and mobile drawer) opens seven swatches: the panel's own blue (default), red, pink, orange, yellow, green and purple. The color becomes Ant Design's colorPrimary, so buttons, links, the active menu item, tabs and switches follow it; the choice is kept per browser like the theme. Each color has a shade per mode: on light, white text on it stays at 4.5:1 or more; on dark and ultra-dark it is readable on the cards, and orange, yellow and green buttons get dark text where white would not be. The command palette and the Jalali date picker read the color instead of a fixed blue. Default keeps today's look.
A switch under the accent colors turns it on, per browser. The page gets a soft glow in the accent color, and cards, the sidebar, the drawer and dialogs become frosted glass (translucent surface + backdrop blur). Popups stay nearly opaque so menus and pickers keep reading over busy pages, and fixed table columns and sticky headers stay solid so scrolled rows never show through them. The main button gets an accent gradient. Works on light, dark and ultra-dark; off keeps today's look.
…lassy glow A healthy CPU/RAM/swap/disk tile drew its sparkline in a fixed blue; it now uses the accent color (warning and critical keep yellow and red). The glassy glow is sized to the viewport, so it covers most of the page on big screens too.
…dark accents On a short phone screen the drawer's flex column squeezed the search box to a sliver once the page list outgrew the screen. The page list now scrolls on its own and the header, search box and log-out row keep their size. Dark themes use Smart Caddy's brighter accent tones (more readable on the dark cards), with dark button text where white would not read, and a softer glassy glow.
In the drawer the palette button sits near the middle, so a popover aligned to its right edge ran past the left edge of a phone screen and hid the first swatch. The drawer's popover opens centred under the button, and the swatches wrap on screens too narrow for seven in a row.
The drawer always opened at min(82vw, 320px), wider than its items need on a phone. It now takes the width of its widest row (the header with the brand and its actions, about 265px), capped at the old size so a long translation still wraps inside it.
Contributor
|
Verdict: Fits with gaps. This adds a per-browser accent colour (seven swatches) and an optional frosted-glass skin to the panel. Both are reached from a new palette button beside the theme switch, and with the defaults (blue, glass off) the panel's Ant Design theme is the same as today. There is one regression, and it hits every operator, whether or not they ever open the picker: the command palette (Ctrl + K) appears to lose the highlight on the row that the arrow keys select, and its search icon is no longer blue. That happens because the palette's new colour rules point at theme variables that never reach the palette. This rests on reading the code and Ant Design's source; nothing was rendered. Two days before this PR opened, the maintainer closed #6827, a broader theme-customisation PR (presets, accent colour, appearance drawer), saying they would rather keep one consistent panel theme. This PR is a narrower take on the same idea, so whether it fits is the maintainer's call. I found no other open or merged work that overlaps it. No blocking issues — 0 HIGH / 1 MEDIUM / 1 LOW open (2 new), 0 pre-existing Reviewed head: 7ad962c Evidence. Feature questions:
Design.
Findings MEDIUM — the command palette's active-row highlight and icon colours resolve to nothing, on every theme and every accent, including the default.
LOW — the feature ships with no test, against the
Coverage
|
The palette is plain divs under a ConfigProvider, which adds no DOM, so the --ant-* variables it was switched to never reached it: the arrow-key row lost its highlight and the search icon its colour, on every theme. --xui-accent is now always set on :root (not only with the glass style on) and the palette reads it; the glass glow's third gradient drew a fixed blue and now uses it too.
Contributor
Author
|
Fixed in 50848b3: the palette is plain divs under a DOM-less ConfigProvider, so |
6 of 21 tasks
This branch has not been deployed
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
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
Adds an accent color picker (7 colors) and an optional "Glassy style" to the panel. Both work with the light, dark and ultra-dark themes and are saved per browser, the same way the theme is. With the defaults the panel looks exactly as it does today.
Why
Admins who run several panels want to tell them apart at a glance, and some want a softer look. Today the only appearance choice is light/dark/ultra-dark with a fixed blue.
What changes
colorPrimary, so buttons, links, the active menu item, tabs and switches follow it.Type of change
Areas affected
How was this tested?
npm run typecheck,npm run lint,npm run format:check,npm run buildand the unit tests pass (1422 tests).make genleavessrc/generatedunchanged.Screenshots / recordings
Accent picker (sidebar, light theme):
Glassy style, dark + green:
Glassy style, light + pink:
Glassy style, ultra-dark + orange (Inbounds):
Breaking changes
None. The defaults (blue accent, Glassy style off) keep today's look. Both choices live in
localStorageonly.Checklist
go build ./...and the test suite pass locally.npm run lint,npm run typecheck, andnpm run buildpass.