Skip to content

Light theme contrast and collapsed sidebar sizing - #227

Merged
Brandon-Haney merged 2 commits into
StudioNirin:mainfrom
Brandon-Haney:pr/light-theme-sidebar
Oct 6, 2026
Merged

Brandon-Haney merged 2 commits into
StudioNirin:mainfrom
Brandon-Haney:pr/light-theme-sidebar

Conversation

@Brandon-Haney

Copy link
Copy Markdown
Collaborator

Two visual fixes, as separate commits so they can be reviewed one at a time.

1. Readable accent text in the light theme

Plex orange (#e5a00d) and the bright semantic colours are tuned for the dark theme. As text on white the orange measures about 2:1, against 4.5:1 for normal text (3:1 for large text). A few other spots stacked opacity on an already muted grey.

New text tokens in plex-theme.css (--plex-orange-text, --plex-orange-text-lg, --plex-success-text, --plex-info-text) equal the accent colours in dark mode, so the dark theme is unchanged, and resolve to deeper shades in light mode. Text uses them: 15 stylesheet rules plus the inline orange headings, hints, links and labels in the templates (mostly the Settings pages). Icons, fills, borders, bars and buttons keep the accent colours.

Light mode also gets a dark label on the active sidebar item (orange stays on the icon, the tint and a new left accent bar), the muted token for the Recent Activity filter pills, and no stacked opacity on the footer.

Measured on the Dashboard:

Element Before After
Active sidebar item 2.12 15.44
Cache Drive count (large text) 2.24 3.67
Footer version 2.09 5.79
Footer 3.08 5.79
"Plex Connected" badge 3.82 5.50
Recent Activity filter pills 4.00 7.07
"4 restored" run pill 4.46 5.57

Light theme before and after: Dashboard top and Recent Activity

tests/test_light_theme_contrast.py computes the contrast of the new tokens straight from the CSS, checks the dark theme still uses the original colours, and fails if raw orange is used on text again (icons are allowed).

2. Keep the collapsed sidebar the same size as the expanded one

Collapsing the sidebar should only hide the labels, but two things changed size:

  • Icons. Lucide replaces each <i data-lucide> with an <svg> when the page loads, so the sidebar's icon size rules, which only targeted i, never applied. The svg kept the default flex-shrink and was squeezed from 24x24 to 17x24 in the 60px collapsed rail (22x24 for Sign Out and Collapse). The rules now target the svg with flex-shrink: 0. The Collapse icon's flip when collapsed had the same dead selector and now applies.
  • Heights. Collapsed links used more vertical padding and a 3px bottom border (52px vs 45.2px each), and removing the brand text shrank the brand row (60.2px vs 70.6px), so everything below shifted. Collapsed links now keep the expanded padding and border, the active marker is an inset shadow, and the brand text is hidden in place. Every item keeps its position.

tests/test_sidebar_icons.py covers both.

How to test

  1. Switch to light mode: the active sidebar item has a dark label with an orange accent bar, the Cache Drive count is a deeper amber, and the footer is readable.
  2. Open the Settings pages in light mode: section headings and calculated values are a deeper amber rather than bright orange.
  3. Switch back to dark mode: nothing changes there.
  4. Collapse the sidebar: icons stay the same size and nothing moves up or down, only the labels disappear. The Collapse icon flips.

Plex orange (#e5a00d) and the bright semantic colours are tuned for the dark
theme; as text on white the orange measures about 2:1. New text tokens
(--plex-orange-text, --plex-orange-text-lg, --plex-success-text,
--plex-info-text) equal the accents in dark mode and resolve to deeper
shades in light mode. Text rules and inline text styles use them; icons,
fills, borders and bars keep the accent colours.

Light mode also gets a dark label on the active sidebar item (orange stays
on the icon, the tint and a new left accent bar), a muted-token colour for
the activity filter pills, and no stacked opacity on the footer.

Measured on the Dashboard: active nav 2.12 -> 15.44, orange stat value
2.24 -> 3.67 (large text), footer version 2.09 -> 5.79, success badge
3.82 -> 5.50, filter pills 4.00 -> 7.07. Dark mode is unchanged.
Collapsing the sidebar should only hide the labels.

Icons: Lucide replaces each <i data-lucide> with an <svg> at load, so the
sidebar's icon size rules, which only targeted i, never applied. The svg
kept the default flex-shrink and was squeezed from 24x24 to 17x24 in the
60px collapsed rail (22x24 for Sign Out and Collapse). The rules now target
the svg with flex-shrink: 0, and collapsed items drop only their horizontal
padding. The Collapse icon's flip when collapsed, which also only targeted
i, now applies.

Heights: collapsed links used more vertical padding and a 3px bottom border
(52px vs 45.2px each), and removing the brand text shrank the brand row
(60.2px vs 70.6px), so everything below shifted. Collapsed links now keep
the expanded padding and border, the active marker is an inset shadow, and
the brand text is hidden in place. Every item keeps its position.

@StudioNirin StudioNirin left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me. As I say I dont use light themes so if this improves the visuals for people that do then I have no issue with it.

@Brandon-Haney
Brandon-Haney merged commit ef8972e into StudioNirin:main Oct 6, 2026
2 checks passed
@Brandon-Haney
Brandon-Haney deleted the pr/light-theme-sidebar branch October 6, 2026 21:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants