diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx
index 789229b..602c950 100644
--- a/app/(docs)/docs/[[...slug]]/page.tsx
+++ b/app/(docs)/docs/[[...slug]]/page.tsx
@@ -5,7 +5,7 @@ import { format } from "date-fns";
import MDX from "@/components/MDX";
import { Text } from "@/components/retroui/Text";
import { Metadata } from "next";
-import { MoveRightIcon, MoveUpRightIcon } from "lucide-react";
+import { MoveUpRightIcon } from "lucide-react";
interface IProps {
params: { slug: string[] };
diff --git a/app/layout.tsx b/app/layout.tsx
index c094d77..73e0120 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -68,7 +68,7 @@ export default function RootLayout({
/>
diff --git a/components/retroui/Sonner.tsx b/components/retroui/Sonner.tsx
index 60c0529..7bab373 100644
--- a/components/retroui/Sonner.tsx
+++ b/components/retroui/Sonner.tsx
@@ -1,27 +1,31 @@
"use client";
+import { useTheme } from "next-themes";
import { Toaster as Sonner } from "sonner";
type ToasterProps = React.ComponentProps;
const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme();
+
return (
diff --git a/package.json b/package.json
index 60a7205..2e89f26 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
"lucide-react": "^0.445.0",
"next": "14.2.7",
"next-contentlayer": "^0.3.4",
+ "next-themes": "^0.4.6",
"react": "^18",
"react-dom": "^18",
"rehype-pretty-code": "^0.14.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5fa3acc..642be61 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,6 +80,9 @@ importers:
next-contentlayer:
specifier: ^0.3.4
version: 0.3.4(contentlayer@0.3.4(esbuild@0.18.20))(esbuild@0.18.20)(next@14.2.7(@babel/core@7.26.9)(@opentelemetry/api@1.9.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+ next-themes:
+ specifier: ^0.4.6
+ version: 0.4.6(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
react:
specifier: ^18
version: 18.0.0
@@ -3550,6 +3553,12 @@ packages:
react: '*'
react-dom: '*'
+ next-themes@0.4.6:
+ resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+ peerDependencies:
+ react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
next@14.2.7:
resolution: {integrity: sha512-4Qy2aK0LwH4eQiSvQWyKuC7JXE13bIopEQesWE0c/P3uuNRnZCQanI0vsrMLmUQJLAto+A+/8+sve2hd+BQuOQ==}
engines: {node: '>=18.17.0'}
@@ -8342,6 +8351,11 @@ snapshots:
- markdown-wasm
- supports-color
+ next-themes@0.4.6(react-dom@18.0.0(react@18.0.0))(react@18.0.0):
+ dependencies:
+ react: 18.0.0
+ react-dom: 18.0.0(react@18.0.0)
+
next@14.2.7(@babel/core@7.26.9)(@opentelemetry/api@1.9.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0):
dependencies:
'@next/env': 14.2.7
diff --git a/preview/components/sonner-style-default.tsx b/preview/components/sonner-style-default.tsx
index 916680e..c66ca21 100644
--- a/preview/components/sonner-style-default.tsx
+++ b/preview/components/sonner-style-default.tsx
@@ -1,3 +1,5 @@
+"use client";
+
import { Button } from "@/components/retroui";
import { toast } from "sonner";