franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix theme toggle

Browse Source
This commit is contained in:
Aman Varshney
2025-05-10 15:36:17 +05:30
parent 05ac0238fa
commit 38385024b5
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/src/app/layout.tsx
View File

@@ -94,6 +94,7 @@ export default function Layout({ children }: { children: ReactNode }) {
}}
theme={{
enableSystem: true,
defaultTheme: "system",
}}
>
<NuqsAdapter>{children}</NuqsAdapter>

8
apps/web/src/components/theme-toggle.tsx
View File

@@ -7,14 +7,14 @@ import { useTheme } from "next-themes";
import * as React from "react";
export function ThemeToggle({ className }: { className?: string }) {
const { theme, setTheme } = useTheme();
const { setTheme, resolvedTheme } = useTheme();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
const isChecked = mounted ? theme === "dark" : false;
const isChecked = mounted ? resolvedTheme === "dark" : false;
const handleCheckedChange = (checked: boolean) => {
setTheme(checked ? "dark" : "light");
@@ -25,13 +25,13 @@ export function ThemeToggle({ className }: { className?: string }) {
<button
type="button"
className={cn(
"inline-flex h-5 w-10 shrink-0 cursor-not-allowed items-center rounded-full border-2 border-transparent bg-input opacity-50",
"inline-flex h-4 w-9 shrink-0 cursor-not-allowed items-center rounded-full border-2 border-transparent bg-input opacity-50",
className,
)}
disabled
aria-label="Toggle theme (loading)"
>
<span className="block h-4 w-4 rounded-full bg-background shadow-lg ring-0" />
<span className="block h-3 w-3 rounded-full bg-background shadow-lg ring-0" />
</button>
);
}