Icon Confusion on the Website: Analyzing the Light/Dark Mode Switch

[Koushik1311]

Detailed description

In night mode it should show the moon icon and in light mode, it should show the sun icon.

Light Mode:

Dark Mode:

Context

Many websites maintain this format. Like TailwindCSS: https://tailwindcss.com/

Light Mode:

Dark Mode:

Possible implementation

Have to change some CSS class

Old Code:

<button
        className="flex aspect-square w-10 items-center justify-center rounded-full border border-gray-900/30 bg-gray-900 p-2 text-gray-50 dark:border-gray-50/30 dark:bg-gray-50 dark:text-gray-900"
        onClick={() =>
          setTheme(
            theme === 'light'
              ? 'dark'
              : sysMode === 'light' && theme === 'system'
              ? 'dark'
              : 'light'
          )
        }
      >
        <Svg.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
        <Svg.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
        <span className="sr-only">Dark and Light Mode</span>
      </button>

Fix Code:

<button
        className="flex aspect-square w-10 items-center justify-center rounded-full border border-gray-900/30 bg-gray-50 p-2 text-gray-900 dark:border-gray-50/30 dark:bg-gray-900 dark:text-gray-50"
        onClick={() =>
          setTheme(
            theme === 'light'
              ? 'dark'
              : sysMode === 'light' && theme === 'system'
              ? 'dark'
              : 'light'
          )
        }
      >
        <Svg.sun className="rotate-0 scale-0 transition-all dark:-rotate-90 dark:scale-100" />
        <Svg.moon className="absolute rotate-90 scale-100 transition-all dark:rotate-0 dark:scale-0" />
        <span className="sr-only">Dark and Light Mode</span>
      </button>

Additional information

No Additional Information.

Can you assign this issue to me?

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

To reduce notifications, issues are locked. Your issue will be unlock when we will add label as status: ready for dev. Check out the contributing guide for more information.