mirror of
https://gitcode.com/JianFeeeee/ModelRouter.git
synced 2026-10-03 15:44:05 +00:00
feat(webui): Mono theme — pure white in light mode, pure black in dark mode
Adds a fourth accent alongside sakura/ocean/violet. Unlike those it is not just a different hue: the coloured themes are glass surfaces (translucent cards with backdrop-filter) floating over an animated gradient-mesh background, so setting --card:#ffffff there still renders as a tinted grey. Mono therefore also switches off the translucency and hides the blobs, so #ffffff is actually #ffffff and #000000 is actually #000000, with greys carrying the hierarchy that hue carries elsewhere. A side effect worth having: no backdrop-filter and no animated blobs makes it the cheapest theme to render, which helps on weak GPUs and over remote desktops. Both light and dark variable blocks are defined, so the existing light/dark toggle drives it with no extra wiring: light -> white, dark -> black. Also fixes a latent theme bug found while checking contrast on black: the active chart's grid baseline assigned the literal string "var(--line)" to ctx.strokeStyle. Canvas 2D does not resolve CSS custom properties, so that was an invalid colour the browser ignored, leaving the previous fillStyle (black) — an invisible baseline on every dark theme. Colours used on a canvas now go through a cssVar() helper. Tests: TestUIThemeMatrix asserts every accent defines BOTH a light and a dark block plus a picker button (a half-defined theme shows up as unreadable text, not as an error); TestUIMonoThemeIsFlat pins the opaque surfaces and disabled blobs; TestUICanvasColorsResolveVars fails if any ctx.strokeStyle/fillStyle is handed a raw var(). Unrelated packaging fix in the same commit: dist:linux only built deb+AppImage while build.linux.target listed rpm too, so `make gui-dist` silently skipped the rpm that release builds are expected to produce. Makefile/README wording updated to match.
This commit is contained in:
@ -249,3 +249,101 @@ func TestUIRecordsPagingWiring(t *testing.T) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TestUIThemeMatrix pins the theme system: every accent must define both a light
|
||||
// and a dark variable block, so switching light/dark can never leave a theme
|
||||
// half-defined (which shows up as unreadable text rather than as an error).
|
||||
func TestUIThemeMatrix(t *testing.T) {
|
||||
src := uiSource(t)
|
||||
|
||||
accents := []string{"sakura", "ocean", "violet", "mono"}
|
||||
for _, a := range accents {
|
||||
light := fmt.Sprintf(`html[data-accent=%q]{`, a)
|
||||
dark := fmt.Sprintf(`html[data-theme="dark"][data-accent=%q]{`, a)
|
||||
if !strings.Contains(src, light) {
|
||||
t.Errorf("accent %q has no light-mode variable block (%s)", a, light)
|
||||
}
|
||||
// sakura is the default palette: its light values live in :root, and the
|
||||
// generic dark block covers it.
|
||||
if a != "sakura" && !strings.Contains(src, dark) {
|
||||
t.Errorf("accent %q has no dark-mode variable block (%s)", a, dark)
|
||||
}
|
||||
if !strings.Contains(src, fmt.Sprintf(`data-accent="%s" title=`, a)) {
|
||||
t.Errorf("accent %q has no picker button", a)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TestUIMonoThemeIsFlat asserts the mono theme really is pure white / pure black:
|
||||
// the surfaces must be opaque and the glass/blob decoration must be switched off,
|
||||
// otherwise "#ffffff" renders as a grey translucent card over a gradient mesh.
|
||||
func TestUIMonoThemeIsFlat(t *testing.T) {
|
||||
src := uiSource(t)
|
||||
|
||||
lightBlock, ok := cssBlock(src, `html[data-accent="mono"]{`)
|
||||
if !ok {
|
||||
t.Fatal("mono light block not found")
|
||||
}
|
||||
for _, want := range []string{"--bg-s1:#ffffff", "--card:#ffffff", "--glass:0px"} {
|
||||
if !strings.Contains(lightBlock, want) {
|
||||
t.Errorf("mono light theme must set %s, got:\n%s", want, lightBlock)
|
||||
}
|
||||
}
|
||||
if !strings.Contains(lightBlock, "--blob1:transparent") {
|
||||
t.Error("mono light theme must disable the gradient blobs")
|
||||
}
|
||||
|
||||
darkBlock, ok := cssBlock(src, `html[data-theme="dark"][data-accent="mono"]{`)
|
||||
if !ok {
|
||||
t.Fatal("mono dark block not found")
|
||||
}
|
||||
for _, want := range []string{"--bg-s1:#000000", "--glass:0px"} {
|
||||
if !strings.Contains(darkBlock, want) {
|
||||
t.Errorf("mono dark theme must set %s, got:\n%s", want, darkBlock)
|
||||
}
|
||||
}
|
||||
if !strings.Contains(darkBlock, "--blob1:transparent") {
|
||||
t.Error("mono dark theme must disable the gradient blobs")
|
||||
}
|
||||
|
||||
// the flat-surface overrides must exist, or backdrop-filter turns #fff grey
|
||||
for _, want := range []string{
|
||||
`html[data-accent="mono"] #bgfx .blob{display:none}`,
|
||||
`backdrop-filter:none`,
|
||||
} {
|
||||
if !strings.Contains(src, want) {
|
||||
t.Errorf("mono theme needs the flat-surface override %q", want)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TestUICanvasColorsResolveVars guards a class of silent theme bug: Canvas 2D
|
||||
// does not understand CSS var(), so assigning "var(--x)" to strokeStyle is a
|
||||
// no-op that leaves the previous colour (often black) in place — invisible on a
|
||||
// dark background. Theme-driven canvas colours must go through cssVar().
|
||||
func TestUICanvasColorsResolveVars(t *testing.T) {
|
||||
src := uiSource(t)
|
||||
if !strings.Contains(src, "function cssVar(") {
|
||||
t.Fatal("cssVar() helper missing: canvas colours cannot resolve CSS variables without it")
|
||||
}
|
||||
for _, prop := range []string{"strokeStyle", "fillStyle"} {
|
||||
bad := fmt.Sprintf(`ctx.%s = "var(--`, prop)
|
||||
if strings.Contains(src, bad) {
|
||||
t.Errorf("ctx.%s assigned a raw CSS var(): Canvas ignores it silently, use cssVar()", prop)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// cssBlock returns the text of the CSS rule starting at selector, up to its
|
||||
// closing brace.
|
||||
func cssBlock(src, selector string) (string, bool) {
|
||||
i := strings.Index(src, selector)
|
||||
if i < 0 {
|
||||
return "", false
|
||||
}
|
||||
j := strings.Index(src[i:], "}")
|
||||
if j < 0 {
|
||||
return "", false
|
||||
}
|
||||
return src[i : i+j+1], true
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user