[PR #24383] [CLOSED] fix(rebrand): repair broken light mode and incomplete font skin #82503

New Issue

GiteaMirror · 2026-05-13T17:01:53-05:00

GiteaMirror commented

2026-05-13 17:01:53 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/24383
Author: @l3aconator
Created: 5/5/2026
Status: ❌ Closed

Base: main ← Head: fix/light-mode-skin

📝 Commits (10+)

a818db3 Enable 4GB Node heap for frontend build
82e8b5a Add /approve PR bot workflow
653eb9f Merge pull request #1 from swept-ai/fix/dockerfile-node-heap-size
1af5ad9 Merge pull request #2 from swept-ai/chore/pr-approve-bot
ed9d688 Add CLAUDE.md to orient agents in this repo
c568e61 Merge branch 'open-webui:main' into main
878fad1 Merge pull request #3 from swept-ai/docs/claude-md
78a83e3 Fix frontend build CI heap and remove unused release workflows
cbbd2e5 Apply prettier formatting to CLAUDE.md
0a7ddab Merge pull request #4 from swept-ai/ci/fix-frontend-build-and-prune-workflows

📊 Changes

52 files changed (+1155 additions, -1091 deletions)

View changed files

📝 .env.example (+15 -1)
➖ .github/workflows/build-release.yml (+0 -61)
➖ .github/workflows/docker-build.yaml (+0 -917)
📝 .github/workflows/format-build-frontend.yaml (+2 -0)
➕ .github/workflows/pr-approve-bot.yml (+76 -0)
➖ .github/workflows/release-pypi.yml (+0 -36)
📝 .gitignore (+6 -1)
➕ CLAUDE.md (+71 -0)
📝 Dockerfile (+1 -1)
📝 docker-compose.yaml (+10 -0)
➕ docs/integrations/vertex-ai.md (+220 -0)
➕ plugins/functions/README.md (+78 -0)
➕ plugins/functions/vertex_chat.py (+268 -0)
➕ scripts/vertex-impersonate.sh (+79 -0)
📝 src/app.css (+10 -4)
📝 src/app.html (+1 -1)
📝 src/lib/components/admin/Evaluations.svelte (+2 -2)
📝 src/lib/components/admin/Settings.svelte (+1 -1)
📝 src/lib/components/admin/Settings/Models/ManageModelsModal.svelte (+2 -2)
📝 src/lib/components/admin/Settings/Models/ModelSettingsModal.svelte (+2 -2)

...and 32 more files

📄 Description

Summary

The Swept rebrand (#5) used \!important (literal backslash before !important) in static/static/custom.css, which is invalid CSS. CSS custom properties stored the value as the literal string "#020617 \!important", so every bg-gray-* and border-color: var(--color-gray-*) lookup expanded to invalid CSS and got dropped — silently breaking light mode.

Reported symptoms:

"Lots of dark borders in light mode" → borders fell back to currentColor (the text color) when their var lookup was invalid.
"Tooltips have white text and no background" → bg-gray-950 resolved to invalid → transparent. Tippy's base color: white was preserved.
"Not everything is Red Hat" → .font-primary (Archivo) and .font-secondary (InstrumentSerif) were never repointed during the rebrand.
Inactive nav tabs unreadable in light mode (text-gray-300 = slate-300 #cbd5e1 on white).

Changes

static/static/custom.css — \!important → !important (15 spots: 12 color vars + 2 font vars + 1 comment). Single-typo fix that unblocks the entire slate palette and font cascade.
src/app.css — make tooltips theme-aware per request. Split the single .tippy-box[data-theme~='dark'] rule into html.dark (gray-950 bg, white text) and html:not(.dark) (white bg, slate-900 text, slate-200 border) variants. Tippy portals into <body>, which inherits html.dark. No JS changes needed (~1,200 tooltip call sites untouched).
src/app.css — repoint .font-primary → Red Hat Text and .font-secondary → Red Hat Display. Verified 930 of 939 leaf text elements on the chat page now resolve to Red Hat Text (rest are mono — code blocks, etc.).
22 component/route files — bulk replace inactive nav/tab text from text-gray-300 dark:text-gray-600 to text-gray-500 dark:text-gray-600 (66 occurrences). Slate-500 (#64748b) is clearly readable on white but still subordinate to active items. Dark mode unchanged.

Verification

Performed live in browser via Playwright against npm run dev + the open-webui Docker container rebound to :8080:

Check	Before	After
`--color-gray-200` resolves	`"#e2e8f0 \!important"` (string garbage)	`#e2e8f0`
Tooltip in light mode	white text, no background	white bg, `rgb(15,23,42)` text, slate-200 border, Red Hat Text
Red Hat coverage on chat page	2 elements	930 elements
Inactive admin nav tabs	`rgb(203,213,225)` (slate-300, illegible on white)	`rgb(100,116,139)` (slate-500, readable)
Active admin nav tab	unchanged	`rgb(51,65,85)` (slate-700, darker than inactive — good hierarchy)
Dark mode	working	unchanged (no regression — verified by toggling)

Toured /auth, /, user menu, Settings modal, /admin/settings/general, /admin/settings/connections, /admin/users in both light and dark.

Test plan

Pull, run npm run dev + start a backend on :8080, open http://127.0.0.1:5173
In Settings → General, confirm theme is light; verify borders are slate-200 (not black) via DevTools
Hover any sidebar icon — tooltip shows white bg + dark text in light mode, dark bg + white text in dark mode
Visit /admin/users — Analytics/Evaluations/Functions/Settings tabs and Groups sidebar item are clearly readable
Toggle dark mode in Settings → Interface — verify nothing regresses
Confirm body text and headings render in Red Hat Text / Red Hat Display

🤖 Generated with Claude Code

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/24383 **Author:** [@l3aconator](https://github.com/l3aconator) **Created:** 5/5/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix/light-mode-skin` --- ### 📝 Commits (10+) - [`a818db3`](https://github.com/open-webui/open-webui/commit/a818db3deef5bc6fbb442d662d5c0b8c30c44c0c) Enable 4GB Node heap for frontend build - [`82e8b5a`](https://github.com/open-webui/open-webui/commit/82e8b5adf7a73deffbe1e497432164b988d34888) Add /approve PR bot workflow - [`653eb9f`](https://github.com/open-webui/open-webui/commit/653eb9fdde51429331dd7e5d7cb4d5eca3fa9c3c) Merge pull request #1 from swept-ai/fix/dockerfile-node-heap-size - [`1af5ad9`](https://github.com/open-webui/open-webui/commit/1af5ad9ab1d4f125e31666c4815a0719fc8c36c8) Merge pull request #2 from swept-ai/chore/pr-approve-bot - [`ed9d688`](https://github.com/open-webui/open-webui/commit/ed9d68834e1d657583f0bf028a38244b7b6ad992) Add CLAUDE.md to orient agents in this repo - [`c568e61`](https://github.com/open-webui/open-webui/commit/c568e6197e95bcb9006d320a60a94a2711e86c66) Merge branch 'open-webui:main' into main - [`878fad1`](https://github.com/open-webui/open-webui/commit/878fad132b5f9b94a0c3f52d6a595662cafde53e) Merge pull request #3 from swept-ai/docs/claude-md - [`78a83e3`](https://github.com/open-webui/open-webui/commit/78a83e3cf475e212275b6553685e150dad39dcdf) Fix frontend build CI heap and remove unused release workflows - [`cbbd2e5`](https://github.com/open-webui/open-webui/commit/cbbd2e57ca3b875471edda2dc8605297df377685) Apply prettier formatting to CLAUDE.md - [`0a7ddab`](https://github.com/open-webui/open-webui/commit/0a7ddabab795014e164cbd51221cb993878c12bf) Merge pull request #4 from swept-ai/ci/fix-frontend-build-and-prune-workflows ### 📊 Changes **52 files changed** (+1155 additions, -1091 deletions) <details> <summary>View changed files</summary> 📝 `.env.example` (+15 -1) ➖ `.github/workflows/build-release.yml` (+0 -61) ➖ `.github/workflows/docker-build.yaml` (+0 -917) 📝 `.github/workflows/format-build-frontend.yaml` (+2 -0) ➕ `.github/workflows/pr-approve-bot.yml` (+76 -0) ➖ `.github/workflows/release-pypi.yml` (+0 -36) 📝 `.gitignore` (+6 -1) ➕ `CLAUDE.md` (+71 -0) 📝 `Dockerfile` (+1 -1) 📝 `docker-compose.yaml` (+10 -0) ➕ `docs/integrations/vertex-ai.md` (+220 -0) ➕ `plugins/functions/README.md` (+78 -0) ➕ `plugins/functions/vertex_chat.py` (+268 -0) ➕ `scripts/vertex-impersonate.sh` (+79 -0) 📝 `src/app.css` (+10 -4) 📝 `src/app.html` (+1 -1) 📝 `src/lib/components/admin/Evaluations.svelte` (+2 -2) 📝 `src/lib/components/admin/Settings.svelte` (+1 -1) 📝 `src/lib/components/admin/Settings/Models/ManageModelsModal.svelte` (+2 -2) 📝 `src/lib/components/admin/Settings/Models/ModelSettingsModal.svelte` (+2 -2) _...and 32 more files_ </details> ### 📄 Description ## Summary The Swept rebrand (#5) used `\!important` (literal backslash before `!important`) in `static/static/custom.css`, which is invalid CSS. CSS custom properties stored the value as the literal string `"#020617 \!important"`, so every `bg-gray-*` and `border-color: var(--color-gray-*)` lookup expanded to invalid CSS and got dropped — silently breaking light mode. **Reported symptoms:** - "Lots of dark borders in light mode" → borders fell back to `currentColor` (the text color) when their var lookup was invalid. - "Tooltips have white text and no background" → `bg-gray-950` resolved to invalid → transparent. Tippy's base `color: white` was preserved. - "Not everything is Red Hat" → `.font-primary` (Archivo) and `.font-secondary` (InstrumentSerif) were never repointed during the rebrand. - Inactive nav tabs unreadable in light mode (`text-gray-300` = slate-300 `#cbd5e1` on white). ## Changes - **`static/static/custom.css`** — `\!important` → `!important` (15 spots: 12 color vars + 2 font vars + 1 comment). Single-typo fix that unblocks the entire slate palette and font cascade. - **`src/app.css`** — make tooltips theme-aware per request. Split the single `.tippy-box[data-theme~='dark']` rule into `html.dark` (gray-950 bg, white text) and `html:not(.dark)` (white bg, slate-900 text, slate-200 border) variants. Tippy portals into `<body>`, which inherits `html.dark`. No JS changes needed (~1,200 tooltip call sites untouched). - **`src/app.css`** — repoint `.font-primary` → Red Hat Text and `.font-secondary` → Red Hat Display. Verified 930 of 939 leaf text elements on the chat page now resolve to Red Hat Text (rest are mono — code blocks, etc.). - **22 component/route files** — bulk replace inactive nav/tab text from `text-gray-300 dark:text-gray-600` to `text-gray-500 dark:text-gray-600` (66 occurrences). Slate-500 (`#64748b`) is clearly readable on white but still subordinate to active items. Dark mode unchanged. ## Verification Performed live in browser via Playwright against `npm run dev` + the `open-webui` Docker container rebound to `:8080`: | Check | Before | After | |---|---|---| | `--color-gray-200` resolves | `"#e2e8f0 \!important"` (string garbage) | `#e2e8f0` | | Tooltip in light mode | white text, no background | white bg, `rgb(15,23,42)` text, slate-200 border, Red Hat Text | | Red Hat coverage on chat page | 2 elements | 930 elements | | Inactive admin nav tabs | `rgb(203,213,225)` (slate-300, illegible on white) | `rgb(100,116,139)` (slate-500, readable) | | Active admin nav tab | unchanged | `rgb(51,65,85)` (slate-700, darker than inactive — good hierarchy) | | Dark mode | working | unchanged (no regression — verified by toggling) | Toured `/auth`, `/`, user menu, Settings modal, `/admin/settings/general`, `/admin/settings/connections`, `/admin/users` in both light and dark. ## Test plan - [ ] Pull, run `npm run dev` + start a backend on `:8080`, open `http://127.0.0.1:5173` - [ ] In Settings → General, confirm theme is light; verify borders are slate-200 (not black) via DevTools - [ ] Hover any sidebar icon — tooltip shows white bg + dark text in light mode, dark bg + white text in dark mode - [ ] Visit `/admin/users` — Analytics/Evaluations/Functions/Settings tabs and Groups sidebar item are clearly readable - [ ] Toggle dark mode in Settings → Interface — verify nothing regresses - [ ] Confirm body text and headings render in Red Hat Text / Red Hat Display 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-05-13 17:01:53 -05:00

GiteaMirror closed this issue

2026-05-13 17:01:56 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#82503