Giters

calcom / cal.com

Scheduling infrastructure for absolutely everyone.

Home Page:https://cal.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[UI] Toggle switch background on cal video page > mic setting (Reduce mic noise toggle) becomes invisible

gyancodes opened this issue · comments

commented

Issue Summary

When the toggle switch on the Cal video page is switched, the button is invisible due to background.

Actual Results

button

Expected Results

button

Evidence

  • This issue can be seen while using cal video mic setting
commented

To address the issue of the "Reduce mic noise" toggle switch becoming invisible against the dark theme background on the Cal video page, you can enhance its visibility by defining and applying new CSS custom properties specifically for the toggle switch. This will ensure it stands out and remains user-friendly. Here's a concise guide on how to achieve this:

  1. Introduce New CSS Custom Properties for the Toggle Switch: In your dark theme CSS, add custom properties for the toggle switch's background, knob, and active state. Choose contrasting colors to ensure visibility against the dark background.

  2. Apply These Styles to the Toggle Switch: Use the new custom properties in your CSS rules for the toggle switch to make it visually distinct and easily operable.

Example CSS adjustments:

/* Dark Theme Enhancements for Toggle Switch */
.dark {
  /* New custom properties for toggle switch visibility */
  --cal-toggle-bg: #2b2b2b; /* Toggle background */
  --cal-toggle-knob: #f3f4f6; /* Knob color */
  --cal-toggle-bg-active: #4A90E2; /* Active state background */
}

.toggle-switch {
  background-color: var(--cal-toggle-bg);
  /* Additional styles for positioning and appearance */
}

.toggle-switch input:checked + .slider {
  background-color: var(--cal-toggle-bg-active);
}

.toggle-switch .slider:before {
  background-color: var(--cal-toggle-knob);
}

This approach not only maintains the functionality and accessibility of the toggle switch but also ensures it is visually compatible with the dark theme of your application. Remember to choose colors that comply with WCAG contrast requirements to support users with visual impairments.

By following these steps, you'll enhance the visibility and usability of the toggle switch on the Cal video page, ensuring a better user experience in dark mode settings.

Details

Sources


About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.