Skip to content

Commit

Permalink
docs: improve dark mode documentation for Toaster component setup
Browse files Browse the repository at this point in the history
  • Loading branch information
pheralb committed Feb 13, 2025
1 parent c7f59a6 commit 7ef287a
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions website/src/docs/dark-mode.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "Dark Mode"
description: "This page shows examples of how to use next-themes (Next.js) or remix-themes (Remix) libraries"
description: "This page shows examples of how to set up the dark mode theme for the Toaster component. Using Vite, Next.js (with next-themes) or Remix (with remix-themes)."
category: "Customization"
---

Expand Down Expand Up @@ -116,7 +116,7 @@ export default ToasterProvider;

2. Import the `ToasterProvider` component in the `main.tsx` file:

```tsx
```tsx {3, 9}
// 📄 main.tsx

import ToasterProvider from "./providers/toasterProvider";
Expand Down Expand Up @@ -163,9 +163,11 @@ export default ToasterNextTheme;

2. Import the `ToasterNextTheme` component in the `layout/app.tsx` file:

```tsx
```tsx {3, 20}
// 📄 layout/app.tsx

import ToasterNextTheme from "@/components/ToasterNextTheme";

export default function RootLayout({
children,
}: Readonly<{
Expand Down Expand Up @@ -195,7 +197,7 @@ export default function RootLayout({
Import the `useTheme` hook from `remix-themes` and change the theme value:

```tsx
```tsx {4, 19}
// 📄 app/root.tsx

import clsx from 'clsx';
Expand Down

0 comments on commit 7ef287a

Please sign in to comment.