Fix dark mode visibility for Sessionize widget tabs#199
Merged
Conversation
Add CSS rules to ensure Sessionize schedule tab navigation links are visible in dark mode. The widget's inline styles were causing inactive tabs to appear nearly invisible (dark text on dark background). Changes: - Apply --text-color to inactive Sessionize tab links in dark mode - Apply white color to active tab links for better contrast - Include :link and :visited pseudo-classes for comprehensive coverage - Add hover/focus states for consistent interaction feedback Fixes #198
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
1 participant
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.
Summary
Fixes #198 by adding CSS overrides for the Sessionize schedule widget to ensure tab navigation links are visible in dark mode.
Problem
The Sessionize widget (used for the conference schedule) uses inline styles that don't adapt to dark mode. This caused inactive day selection tabs to appear nearly invisible when dark mode is enabled, as they had dark text (
rgba(17, 17, 17, 0.6)) on a dark background.Solution
Added CSS rules in
pythonie/core/static/css/style.cssto override Sessionize widget styles in dark mode:--text-colorvariable (light gray:#bdbcb2) for readability#fff) for maximum contrast against the widget's teal background--link-hover-colorfor consistent interaction feedback:linkand:visitedpseudo-classes to ensure styles apply in all link statesAll rules use
!importantto override the widget's inline styles.Testing
Tested on https://python.ie/pycon-2025/schedule/ by injecting the CSS and verifying:
Screenshots
The Saturday/Sunday tab navigation is now clearly visible in dark mode.