Repository navigation
Light theme contrast and collapsed sidebar sizing - #227
Merged
Brandon-Haney merged 2 commits intoOct 6, 2026
Merged
Conversation
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
approved these changes
Oct 6, 2026
StudioNirin
left a comment
Owner
There was a problem hiding this comment.
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.
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.
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:
tests/test_light_theme_contrast.pycomputes 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:
<i data-lucide>with an<svg>when the page loads, so the sidebar's icon size rules, which only targetedi, never applied. The svg kept the defaultflex-shrinkand was squeezed from 24x24 to 17x24 in the 60px collapsed rail (22x24 for Sign Out and Collapse). The rules now target the svg withflex-shrink: 0. The Collapse icon's flip when collapsed had the same dead selector and now applies.tests/test_sidebar_icons.pycovers both.How to test