From 168095e133665ed70fb1fb6ace5327f517ec69ce Mon Sep 17 00:00:00 2001 From: Gigi Date: Tue, 14 Oct 2025 10:29:11 +0200 Subject: [PATCH] fix(ui): improve Highlights tab readability in light mode - Use semantic text color (--color-text) for tab label in active state - Keep highlight color for icon and bottom border as visual accent - Ensures text is always readable regardless of theme - Fixes contrast issues on /me page Highlights tab --- src/styles/components/me.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/styles/components/me.css b/src/styles/components/me.css index a235be33..1a602a8d 100644 --- a/src/styles/components/me.css +++ b/src/styles/components/me.css @@ -37,12 +37,18 @@ border-bottom-color: var(--color-primary); } -/* Highlights tab uses the user's custom "my highlights" color */ +/* Highlights tab uses the user's custom "my highlights" color for the border */ +/* But uses semantic text color for better readability */ .me-tab[data-tab="highlights"].active { - color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */ + color: var(--color-text); border-bottom-color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */ } +/* Icon gets the highlight color for visual identity */ +.me-tab[data-tab="highlights"].active svg { + color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */ +} + /* Reading List tab uses blue color to match bookmarks icon */ .me-tab[data-tab="reading-list"].active { color: var(--color-primary);