shadCN and next themes setup

Doyin Atobaru answered on February 18, 2025 Popularity 1/10 Helpfulness 1/10

answer shadCN and next themes setup

related invoke a function ONSCROLL

shadCN and next themes setup

Comment

with globals.css from shadcn(important) 

//layout.tsx
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
</....> 


//page.tsx
 const { theme, setTheme } = useTheme() 

<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
{theme === "light" ? (
<Moon className="h-[1.2rem] w-[1.2rem] transition-all" />
) : (
<Sun className="h-[1.2rem] w-[1.2rem] transition-all" />
)}
</button>

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: ui.shadcn.com

Tags: javascript next themes

Link to this answer
Share Copy Link

Contributed on Feb 20 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

invoke a function ONSCROLL

Comment

  useEffect(() => {
    const handleScroll = () => {
      setShowResources(false);
    };

    const handleScroll = () => {
      if (window.scrollY > 50) {
      setShowResources(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: invoke javascript onscroll function

Link to this answer
Share Copy Link

Contributed on Feb 18 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

shadCN and next themes setup

Contents

More Related Answers