[PR #206] [MERGED] fix: improve toggle slider visibility with better contrast and blue ON state #276

New issue

Closed

opened 2026-02-26 12:40:50 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 12:40:50 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/206
Author: @michelroegl-brunner
Created: 10/20/2025
Status: ✅ Merged
Merged: 10/20/2025
Merged by: @michelroegl-brunner

Base: main ← Head: fix/toggle-visibility-improvement

📝 Commits (1)

1ea6021 fix: improve toggle slider visibility with better contrast and blue ON state

📊 Changes

1 file changed (+3 additions, -3 deletions)

View changed files

📝 src/app/_components/ui/toggle.tsx (+3 -3)

📄 Description

Problem

The toggle sliders in the settings modal had low contrast, making it difficult to distinguish between ON and OFF states at a glance.

Solution

Enhanced the toggle component styling to improve visibility:

Changes Made:

Darkened OFF state background:
- Changed from bg-gray-200 to bg-gray-300 (light mode)
- Changed from dark:bg-gray-600 to dark:bg-gray-700 (dark mode)
Added border to the track for better definition:
- Added border-2 class
- Added border-gray-300 dark:border-gray-600 for subtle outline
Enhanced the slider knob contrast:
- Added after:shadow-md to make the white knob stand out more against the background
Improved ON state visibility:
- Changed from bg-primary to bg-blue-500 dark:bg-blue-600 for vibrant blue color
- Makes toggle states immediately distinguishable at a glance

Testing

Toggle switches now have much better contrast in both light and dark modes
ON state shows vibrant blue background
OFF state shows darker gray background with clear border
Slider knob has shadow for better visibility

Fixes the visibility issue where users had to look closely to determine toggle state.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/206 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/20/2025 **Status:** ✅ Merged **Merged:** 10/20/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `fix/toggle-visibility-improvement` --- ### 📝 Commits (1) - [`1ea6021`](https://github.com/community-scripts/ProxmoxVE-Local/commit/1ea6021c8ae6f3cbad35742f4fec00af406fe848) fix: improve toggle slider visibility with better contrast and blue ON state ### 📊 Changes **1 file changed** (+3 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `src/app/_components/ui/toggle.tsx` (+3 -3) </details> ### 📄 Description ## Problem The toggle sliders in the settings modal had low contrast, making it difficult to distinguish between ON and OFF states at a glance. ## Solution Enhanced the toggle component styling to improve visibility: ### Changes Made: 1. **Darkened OFF state background**: - Changed from bg-gray-200 to bg-gray-300 (light mode) - Changed from dark:bg-gray-600 to dark:bg-gray-700 (dark mode) 2. **Added border to the track** for better definition: - Added border-2 class - Added border-gray-300 dark:border-gray-600 for subtle outline 3. **Enhanced the slider knob contrast**: - Added after:shadow-md to make the white knob stand out more against the background 4. **Improved ON state visibility**: - Changed from bg-primary to bg-blue-500 dark:bg-blue-600 for vibrant blue color - Makes toggle states immediately distinguishable at a glance ## Testing - Toggle switches now have much better contrast in both light and dark modes - ON state shows vibrant blue background - OFF state shows darker gray background with clear border - Slider knob has shadow for better visibility Fixes the visibility issue where users had to look closely to determine toggle state. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>