From e458ec4733cd00d4196ac0c206fa090b9b9159ec Mon Sep 17 00:00:00 2001 From: pheralb Date: Thu, 13 Feb 2025 12:02:25 +0000 Subject: [PATCH 1/3] docs: fix next-themes example in dark-mode guide --- website/src/docs/dark-mode.mdx | 48 ++++++++++++++++------------------ 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/website/src/docs/dark-mode.mdx b/website/src/docs/dark-mode.mdx index f8915a9..9c8285d 100644 --- a/website/src/docs/dark-mode.mdx +++ b/website/src/docs/dark-mode.mdx @@ -1,7 +1,7 @@ --- -title: 'Dark Mode' -description: 'This page shows examples of how to use next-themes (Next.js) or remix-themes (Remix) libraries' -category: 'Customization' +title: "Dark Mode" +description: "This page shows examples of how to use next-themes (Next.js) or remix-themes (Remix) libraries" +category: "Customization" --- > 💡 If you need to activate the dark mode directly, you can use the `theme` property: [`show`](/toaster#theme) @@ -14,9 +14,9 @@ category: 'Customization' - Snippet from [`shadcn/ui` Dark Mode documentation](https://ui.shadcn.com/docs/dark-mode/vite#dark-mode). ```tsx -import { createContext, useContext, useEffect, useState } from 'react'; +import { createContext, useContext, useEffect, useState } from "react"; -export type Theme = 'dark' | 'light' | 'system'; +export type Theme = "dark" | "light" | "system"; type ThemeProviderProps = { children: React.ReactNode; @@ -30,7 +30,7 @@ type ThemeProviderState = { }; const initialState: ThemeProviderState = { - theme: 'system', + theme: "system", setTheme: () => null, }; @@ -38,8 +38,8 @@ const ThemeProviderContext = createContext(initialState); export function ThemeProvider({ children, - defaultTheme = 'system', - storageKey = 'my-ui-theme', + defaultTheme = "system", + storageKey = "my-ui-theme", ...props }: ThemeProviderProps) { const [theme, setTheme] = useState( @@ -49,13 +49,13 @@ export function ThemeProvider({ useEffect(() => { const root = window.document.documentElement; - root.classList.remove('light', 'dark'); + root.classList.remove("light", "dark"); - if (theme === 'system') { - const systemTheme = window.matchMedia('(prefers-color-scheme: dark)') + if (theme === "system") { + const systemTheme = window.matchMedia("(prefers-color-scheme: dark)") .matches - ? 'dark' - : 'light'; + ? "dark" + : "light"; root.classList.add(systemTheme); root.style.colorScheme = systemTheme; @@ -85,7 +85,7 @@ export const useTheme = () => { const context = useContext(ThemeProviderContext); if (context === undefined) - throw new Error('useTheme must be used within a ThemeProvider'); + throw new Error("useTheme must be used within a ThemeProvider"); return context; }; @@ -101,10 +101,10 @@ export const useTheme = () => { ```tsx // 📄 components/ToasterProvider.tsx -import type { ToasterProperties } from '@pheralb/toast'; -import { Toaster } from '@pheralb/toast'; +import type { ToasterProperties } from "@pheralb/toast"; +import { Toaster } from "@pheralb/toast"; -import { useTheme } from './themeProvider'; +import { useTheme } from "./themeProvider"; const ToasterProvider = (props: ToasterProperties) => { const { theme } = useTheme(); @@ -119,9 +119,9 @@ export default ToasterProvider; ```tsx // 📄 main.tsx -import ToasterProvider from './providers/toasterProvider'; +import ToasterProvider from "./providers/toasterProvider"; -ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( @@ -143,21 +143,19 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( ```tsx // 📄 components/ToasterNextTheme.tsx -'use client'; +"use client"; import { Toaster, type ToastTheme, type ToasterProperties, -} from '@pheralb/toast'; +} from "@pheralb/toast"; -import { useTheme } from 'next-themes'; +import { useTheme } from "next-themes"; const ToasterNextTheme = (props: ToasterProperties) => { const { theme } = useTheme(); - return ( - - ); + return ; }; export default ToasterNextTheme; From c7f59a649ea0da27c2b524f3d81363126643faa2 Mon Sep 17 00:00:00 2001 From: pheralb Date: Thu, 13 Feb 2025 16:02:53 +0000 Subject: [PATCH 2/3] docs: update all interactive playground components --- website/src/docs/toast.mdx | 6 +++--- website/src/docs/toaster.mdx | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/website/src/docs/toast.mdx b/website/src/docs/toast.mdx index e83978b..281f434 100644 --- a/website/src/docs/toast.mdx +++ b/website/src/docs/toast.mdx @@ -18,13 +18,13 @@ toast.default({ Show a toast with a specific variant: - + ## toast.variant with action Show a button and execute a custom function when clicked. The default text for the button is `Action`: - + ```tsx {3-8} toast.default({ @@ -42,7 +42,7 @@ toast.default({ Show a toast with loading state and will update automatically after the promise resolves or fails: - + ```tsx {4-18} toast.loading({ diff --git a/website/src/docs/toaster.mdx b/website/src/docs/toaster.mdx index 1ba73bb..02af49f 100644 --- a/website/src/docs/toaster.mdx +++ b/website/src/docs/toaster.mdx @@ -14,13 +14,15 @@ import { Toaster } from "@pheralb/toast"; By default, the position is `bottom-right`. You can customize the position of the toasts by using the `position` prop of the `Toaster` component: - + ## Theme You can set the theme of the toasts using the `theme` prop, which accepts the values: `light`, `dark`, and `system`: - + + +> 💡 If you want to configure the theme automatically, read [`Dark Mode` guide](/dark-mode). ## MaxToasts From 7ef287a8398e011a5278d20e2c4cd08c2f39c414 Mon Sep 17 00:00:00 2001 From: pheralb Date: Thu, 13 Feb 2025 16:03:03 +0000 Subject: [PATCH 3/3] docs: improve dark mode documentation for Toaster component setup --- website/src/docs/dark-mode.mdx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/website/src/docs/dark-mode.mdx b/website/src/docs/dark-mode.mdx index 9c8285d..9ba4bf2 100644 --- a/website/src/docs/dark-mode.mdx +++ b/website/src/docs/dark-mode.mdx @@ -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" --- @@ -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"; @@ -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<{ @@ -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';