diff --git a/apps/www/content/docs/dark-mode/remix.mdx b/apps/www/content/docs/dark-mode/remix.mdx index 2b523c5d42a..e5c34a6e36d 100644 --- a/apps/www/content/docs/dark-mode/remix.mdx +++ b/apps/www/content/docs/dark-mode/remix.mdx @@ -30,25 +30,25 @@ npm install remix-themes ```tsx title="app/sessions.server.tsx" import { createThemeSessionResolver } from "remix-themes" +import { createCookieSessionStorage } from "@remix-run/node"; // You can default to 'development' if process.env.NODE_ENV is not set const isProduction = process.env.NODE_ENV === "production" -const sessionStorage = createCookieSessionStorage({ - cookie: { - name: "theme", - path: "/", - httpOnly: true, - sameSite: "lax", - secrets: ["s3cr3t"], - // Set domain and secure only if in production - ...(isProduction - ? { domain: "your-production-domain.com", secure: true } - : {}), - }, -}) - -export const themeSessionResolver = createThemeSessionResolver(sessionStorage) +export const themeSessionResolver = createThemeSessionResolver( + createCookieSessionStorage({ + cookie: { + name: "__theme", + path: "/", + httpOnly: true, + sameSite: "lax", + secrets: ["s3cr3t"], + ...(isProduction + ? { domain: "your-production-domain", secure: true } + : {}), + }, + }) +); ``` ### Set up Remix Themes @@ -58,6 +58,7 @@ Add the `ThemeProvider` to your root layout. ```tsx {1-3,6-11,15-22,25-26,28,33} title="app/root.tsx" import clsx from "clsx" import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from "remix-themes" +import { type LoaderFunctionArgs } from "@remix-run/node"; import { themeSessionResolver } from "./sessions.server" @@ -75,7 +76,9 @@ export default function AppWithProviders() { const data = useLoaderData() return ( - + + + ) } @@ -93,7 +96,6 @@ export function App() { - @@ -101,6 +103,12 @@ export function App() { ) } + +function App() { + return ( + + ) +} ``` ### Add an action route @@ -112,7 +120,12 @@ import { createThemeAction } from "remix-themes" import { themeSessionResolver } from "./sessions.server" -export const action = createThemeAction(themeSessionResolver) +import type { ActionFunctionArgs } from "@remix-run/node"; + + +export const action = async (args: ActionFunctionArgs) => { + return createThemeAction(themeSessionResolver)(args); +}; ``` ### Add a mode toggle