The theme switcher button was hidden above the viewport on desktop because
.has-tooltip's position: relative was overriding the button's position: fixed
due to CSS cascade order (_tooltips.css loaded after _themes.css).
Fixed by adding !important to .color-theme-switcher position: fixed rule.
Changes:
- static/css/01-foundation/_themes.css: Add !important to position: fixed
to override .has-tooltip position: relative cascade
Testing:
- Added comprehensive tooltip tests for all buttons (desktop & mobile)
- Verified theme switcher visible on desktop at correct position
- Verified all tooltips working on hover (desktop only, hidden on mobile touch)
- Verified button positioning in mobile bottom dock
All buttons now display correctly:
✅ Desktop: All 6 buttons with working tooltips
✅ Mobile: All 5 buttons in bottom dock
Light theme:
- Change background from #b8bbbe to #d6d6d6 (light gray)
- Add concentric squares pattern with 4 gradient layers
- Creates subtle geometric texture on gray background
Dark theme:
- Change background from rgb(82, 86, 89) to #3a3a3a (medium gray)
- Add diagonal grid pattern with green glow (rgba(0, 255, 128, 0.15))
- 45deg and -45deg crosshatch creates retro tech aesthetic
Both patterns use CSS custom properties (--page-bg-pattern) and are
applied via background-image in _reset.css. Patterns are fixed and
maintain visibility across theme switches.
**TESTING** - These patterns can be easily reverted or modified
Light Theme (Woven Fabric Pattern):
- Subtle gray crosshatch pattern
- Multiple gradients creating woven texture
- Professional and clean appearance
Dark Theme (Diagonal Grid with Green Glow):
- 45° and -45° diagonal lines
- Green glow (rgba(0, 255, 128, 0.1))
- Cyberpunk/tech aesthetic
- 40px grid spacing
Implementation:
- Added --page-bg-pattern CSS variables to color-theme.css
- Applied patterns via body background-image in _reset.css
- OLD pattern commented out and preserved for easy restoration
- Patterns work with light, dark, and auto themes
Files changed:
- static/css/color-theme.css: Added pattern variables
- static/css/01-foundation/_reset.css: Applied patterns to body
To revert: Uncomment old pattern and remove --page-bg-pattern usage
Calculation: #5e5e5e inverted = #a1a1a1
- Set LIV Golf border to #a1a1a1 in dark theme
- After invert(1) filter → appears as #5e5e5e (correct gray)
- Light theme: resets to normal var(--icon-border)
Filter inverts ENTIRE element including borders, so we
pre-compensate by using the inverse color.
- Changed from transparent to #5e5e5e (rgb(94,94,94))
- Visible but subtle medium gray border in dark theme
- Updated test to verify new border color
- Note: CSS filter on LIV Golf only affects image pixels, not border
- Changed from rgba(255,255,255,0.05) to 'transparent'
- Previous attempt used WHITE transparent which was still visible
- Now borders are rgba(0,0,0,0) - completely invisible
- Verified with Playwright test showing transparent borders
- All icons (OBS, LIV Golf, etc.) now have no visible borders
- Changed from #1e1e1e to rgba(255, 255, 255, 0.05)
- Borders now 95% transparent, virtually invisible
- Applies to ALL icon borders (OBS, LIV Golf, etc.)
- Invert filter remains ONLY for LIV Golf logo
- Changed --icon-border from #2a2a2a to #1e1e1e (rgb(30,30,30))
- Background is #1a1a1a (rgb(26,26,26)), only 4 RGB units difference
- Borders now barely visible, creating cleaner dark theme appearance
- Add --icon-border variable: #ddd (light) / #2a2a2a (dark)
- Add --item-separator variable: rgba(0,0,0,0.1) / rgba(255,255,255,0.05)
- Replace 6 hardcoded icon borders with var(--icon-border)
- Replace 3 hardcoded separators with var(--item-separator)
- Add CSS filter to invert LIV Golf logo in dark themes for visibility
- LIV Golf logo filter: invert(1) in dark/auto(dark), none in light
- Auto theme dark mode now uses #3a3d3e (matches explicit dark)
- Previously used #2a2a2a causing visible difference when switching
- Ensures only two visual states (light/dark) regardless of theme mode
Light theme sidebar:
- Background: #d1d4d2 (light gray)
- Text: dark colors
Dark theme sidebar:
- Background: #3a3d3e (darker gray, between page bg and content)
- Text: light colors (using CSS variables)
- Titles: light colors
Changes:
- Revert sidebar bg to use var(--sidebar-bg) for theme switching
- Update dark theme sidebar color to #3a3d3e
- Replace all hardcoded text colors with CSS variables
- Sidebar titles, content, and arrows now adapt to theme
juanatsap