Dark/Light simple animation toggle issue

[jaunty mantle]

Hello

Greetings ,

I am facing a simple animation toggle issue with rotation issue with icon sun and moon from Lucide React,

Issue is that, it is instant but not animated with duration. When i took certain code from original to simple one to test if it works and it is working.

"use client";
import { useState } from "react";
import { Moon, Sun } from "lucide-react";

export default function ButtonRotationTest() {
  const [isDark, setIsDark] = useState(false);
  
  return (
    <div className="p-8">
      <button 
        onClick={() => setIsDark(!isDark)}
        className="mb-8 px-4 py-2 bg-blue-500 text-white rounded"
      >
        Toggle Dark Mode
      </button>

      <div className={`relative p-4 rounded-lg ${isDark ? 'dark' : ''}`}>
        <button 
          className="inline-flex items-center justify-center w-10 h-10 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
          title={isDark ? "Switch to light mode" : "Switch to dark mode"}
        >
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 duration-1000" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 duration-1000" />
        </button>
      </div>
      
      <p className="mt-4">{isDark.toString()}</p>
    </div>
  );
}

[livid oracle]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[dark verge]

can you post the video of what it looks like?

have you tried to reproduce the issue using simple elements instead of using <Sun> ?

[jaunty mantle]

I want to show a record , with both simple and original one to show

this is simple one

[dark verge]

have you tried to reproduce the issue using simple elements instead of using <Sun> ?

change <Sun className="..."> with <p className="...">T</p>

[dark verge]

did you use <Button> or <button>? please be consistent. its hard to tell what your code is like

can you reproduce the issue on a minimal reproducible repository?

[jaunty mantle]

i am using Button from shadcn

I shall try to be consistent.

Ooof , i did mistake , for Simple one i did use button instead of shadcn Button

[dark verge]

yeah thats why im confused :(

so we now know, <button> works but not <Button>

what is inside <Button> ?

[jaunty mantle]

Button also works on simple one , just tested

[dark verge]

nice observation!

[jaunty mantle]

I am trying hard to find what am i doing wrong , i am thinking to wrap it with more div

[dark verge]

maybe its the parent/wrapper component thats causing the issue

you can also try to reproduce the bug in another repo and share it so people can debug it

[jaunty mantle]

where can i upload ? in my git ?

[jaunty mantle]

Sorry , forgive me , i don't understand. I am happy to share.

i will create git then

[dark verge]

github repo yeah

minimum reproducible repository means keeping the bug but remove unecessary code that doesn't cause the bug

[jaunty mantle]

yeah , i will give there one navigation page

including simple one that works

[jaunty mantle]

https://github.com/RxvxntxN/rotation-bugs

I made it minimal as possible

[jaunty mantle]

bump

[bleak flint]

to me it transition

also if you want view transition the theme not only icon check this https://theme-toggle.rdsx.dev/ but for react you gonna need to flushsync the update before start transtion let you here the relevant code but it use two icons is not a switcher```js
const { theme, setTheme } = useTheme();
const iconSize = 14;

const handleToggle = (newTheme: string) => {
if (newTheme === theme) return; //

if (!document.startViewTransition) {
  setTheme(newTheme);
  return;
}

document.startViewTransition(() => {
  flushSync(() => {
    setTheme(newTheme);
  });
});

};```

[jaunty mantle]

I didn't ask these , I simply asked that when i click toggle , it is not animated. i have even added separate file which was worked but that same toggle does't work on navigation bar.

Don't think anything fancy , it is simple toggle , that transition doesn't work.

Try it though , i gave you git repo.

[bleak flint]

it worked to me button is transitioning

also add transition to background or will switch instant

im using your repo

[jaunty mantle]

this one is testing , it will work as i mentioned.

i am talking about this one

[bleak flint]

ok didnt notice gonna check

[bleak flint]

you notice that?

[jaunty mantle]

Oh right , I didn't find that lmfao , congrates , you solved it officially

[bleak flint]

i didnt notice too so dont blame on yourself

[livid oracle]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1470429515132960809 message)

[jaunty mantle]

I marked in solved , thanks buddy