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

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:

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.
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** - [packages/config/theme/colors.css](https://github.com/calcom/cal.com/blob/main/packages/config/theme/colors.css) - [apps/web/styles/globals.css](https://github.com/calcom/cal.com/blob/main/apps/web/styles/globals.css) - [packages/app-store/jitsivideo/package.json](https://github.com/calcom/cal.com/blob/main/packages/app-store/jitsivideo/package.json) - [packages/ui/components/form/switch/SettingsToggle.tsx](https://github.com/calcom/cal.com/blob/main/packages/ui/components/form/switch/SettingsToggle.tsx) - [apps/web/pages/settings/my-account/appearance.tsx](https://github.com/calcom/cal.com/blob/main/apps/web/pages/settings/my-account/appearance.tsx)
**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.

calcom / cal.com

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

Issue Summary

Actual Results

Expected Results

Evidence