SVI/ProxmoxVE-Local
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE-Local.git synced 2026-07-30 01:12:57 -04:00
Code Issues 56 Packages Projects Releases 7 Wiki Activity

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

New Issue
Closed
opened 2025-11-20 04:13:45 -05:00 by saavagebueno · 0 comments
saavagebueno commented 2025-11-20 04:13:45 -05:00
Owner
Copy Link

Original Pull Request: https://github.com/community-scripts/ProxmoxVE-Local/pull/206

State: closed
Merged: Yes

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.

**Original Pull Request:** https://github.com/community-scripts/ProxmoxVE-Local/pull/206 **State:** closed **Merged:** Yes --- ## 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.
saavagebueno added the pull-request label 2025-11-20 04:13:45 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
enhancement
enhancement
feature
in progress
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
saavagebueno
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: SVI/ProxmoxVE-Local#255
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?