Docs : Toggle Switch

[MateoWartelle]

• [x] I have searched the Issues to see if this bug has already been reported
• [x] I have tested the latest version

Steps to reproduce

1. Go to https://www.flowbite-react.com/docs/components/forms#toggle-switch

Current behaviour

Describe what is currently happening and why it's a problem.

Expected behaviour

Describe what you expected to happen.

Context

What are you trying to accomplish? Does this only happen on a specific browser, screen size, or operating system?

If possible, provide a live example URL, screenshot, video, or a repository with the minimal reproduction of the issue.

[alfreddagenais]

I recently encountered an issue in my application and realized that there has been a change in the Flowbite-react template. To address this issue for now, I added a custom theme. This solution might help others facing similar problems.

export const customThemeToggleSwitch: CustomFlowbiteTheme['toggleSwitch'] = {
    toggle: {
      base: "after:rounded-full rounded-full border group-focus:ring-4 group-focus:ring-cyan-500/25",
      checked: {
          on: "after:bg-white after:translate-x-full",
          off: "after:bg-gray-400 dark:after:bg-gray-500 border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-700",
      },
    },
};

Additionally, I noticed that PR #1199 could potentially resolve this issue if integrated.

[lars-jpeg]

Just a random comment, but I went to look at the switches the other day and saw the same thing and I thought it actually looked kinda cool how the color works as an indicator light whether the switch is active or not, but it is definitely not according to convention and what internet users are used to.

[akashMasih]

Working on this issue Docs : Toggle Switch #1321