Typeset: dark mode leading adjustment
Dark mode already follows your theme colors. If text feels tight on a dark surface, loosen the leading: .dark .typeset { --typeset-leading: 1.9; }
typeset/dark-mode
21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Tailwind CSS dark mode selector for Remix
To enable dark mode in Remix with Tailwind CSS, add `:root[class~="dark"]` alongside `.dark` in your tailwind.css file. This allows you to apply the `dark` class on the html element to trigger dark mode styles.
Create theme session storage in Remix
Create a file at app/sessions.server.tsx that uses createCookieSessionStorage to configure theme session storage. Set the cookie name to 'theme', path to '/', httpOnly to true, and sameSite to 'lax'. For production, add domain and secure properties. Import createThemeSessionResolver from 'remix-themes' and export themeSessionResolver by calling createThemeSessionResolver(sessionStorage).
Set up ThemeProvider in Remix root
In app/root.tsx, import PreventFlashOnWrongTheme, ThemeProvider, and useTheme from 'remix-themes'. Create a loader function that calls themeSessionResolver(request) and returns the theme. Wrap your App component with ThemeProvider, passing specifiedTheme={data.theme} and themeAction="/action/set-theme". In the App component, apply the theme to the html element using className={clsx(theme)}, and include PreventFlashOnWrongTheme with ssrTheme={Boolean(data.theme)} in the head to prevent flash of wrong theme on page load.
Create theme action route in Remix
Create a file at app/routes/action.set-theme.ts that imports createThemeAction from 'remix-themes' and themeSessionResolver from the sessions.server file. Export an action by calling createThemeAction(themeSessionResolver). This route stores the user's preferred theme in session storage when they toggle the theme.
ModeToggle component example for Remix
Here is a working example of a mode toggle component for Remix that uses a dropdown menu to switch between light and dark modes: ```tsx import { Moon, Sun } from "lucide-react" import { Theme, useTheme } from "remix-themes" import { Button } from "./ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./ui/dropdown-menu" export function ModeToggle() { const [, setTheme] = useTheme() return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="icon"> <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" /> <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" /> <span className="sr-only">Toggle theme</span> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem onClick={() => setTheme(Theme.LIGHT)}> Light </DropdownMenuItem> <DropdownMenuItem onClick={() => setTheme(Theme.DARK)}> Dark </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> ) } ``` This component uses the useTheme hook to access setTheme, creates a dropdown menu with Light and Dark options, and displays animated Sun and Moon icons that transition based on the current theme.
TanStack Start root layout integration
Add ThemeProvider to the root layout component from src/routes/__root.tsx. Wrap the Outlet component with ThemeProvider and pass props defaultTheme='system' and storageKey='theme'. Add suppressHydrationWarning prop to the html tag to prevent hydration mismatch warnings when theme classes are applied.
TanStack Start theme provider setup
TanStack Start uses ScriptOnce from @tanstack/react-router to inject a script that runs before React hydrates, preventing flash of unstyled content (FOUC). The ThemeProvider component manages theme state with three possible values: 'dark', 'light', or 'system'. It accepts props: children (React.ReactNode), defaultTheme (optional, defaults to 'system'), and storageKey (optional, defaults to 'theme'). The component provides a ThemeProviderContext with theme state and setTheme function accessible via useTheme hook.
TanStack Start theme script implementation
The getThemeScript function generates an inline script that retrieves the theme from localStorage using the storageKey parameter, validates it against allowed values ('light', 'dark', 'system'), and falls back to defaultTheme if invalid. For 'system' theme, it uses matchMedia('(prefers-color-scheme: dark)') to detect the user's system preference. The script applies the resolved theme by adding a class ('light' or 'dark') to document.documentElement and setting the colorScheme style property. This runs before React hydration to prevent FOUC.
applyTheme function for TanStack Start
The applyTheme function removes 'light' and 'dark' classes from document.documentElement, resolves the theme (for 'system' theme it checks matchMedia for dark mode preference), adds the resolved class, and sets root.style.colorScheme to the resolved value. This ensures the DOM reflects the current theme state.
TanStack Start mode toggle component example
Create a ModeToggle component that uses the useTheme hook to access setTheme. It renders a DropdownMenu with DropdownMenuTrigger (an icon button showing Sun and Moon icons with transition animations), DropdownMenuContent, and three DropdownMenuItems for 'Light', 'Dark', and 'System' options. Each option calls setTheme with the corresponding value. The Sun icon uses dark:scale-0 dark:-rotate-90 to hide and rotate in dark mode, while Moon uses dark:scale-100 dark:rotate-0 to show and rotate in dark mode.
useTheme hook in TanStack Start
The useTheme hook retrieves the ThemeProviderContext and throws an error if used outside of a ThemeProvider. It returns an object with theme (current theme value) and setTheme (function to update theme). The setTheme function persists the theme to localStorage before updating state.
Vite dark mode theme provider implementation
Complete ThemeProvider component for Vite that manages theme state with React Context, persists to localStorage, applies theme classes to the document root, and respects system color scheme preference: ```tsx import { createContext, useContext, useEffect, useState } from "react" type Theme = "dark" | "light" | "system" type ThemeProviderProps = { children: React.ReactNode defaultTheme?: Theme storageKey?: string } type ThemeProviderState = { theme: Theme setTheme: (theme: Theme) => void } const initialState: ThemeProviderState = { theme: "system", setTheme: () => null, } const ThemeProviderContext = createContext<ThemeProviderState>(initialState) export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", ...props }: ThemeProviderProps) { const [theme, setTheme] = useState<Theme>( () => (localStorage.getItem(storageKey) as Theme) || defaultTheme ) useEffect(() => { const root = window.document.documentElement root.classList.remove("light", "dark") if (theme === "system") { const systemTheme = window.matchMedia("(prefers-color-scheme: dark)") .matches ? "dark" : "light" root.classList.add(systemTheme) return } root.classList.add(theme) }, [theme]) const value = { theme, setTheme: (theme: Theme) => { localStorage.setItem(storageKey, theme) setTheme(theme) }, } return ( <ThemeProviderContext.Provider {...props} value={value}> {children} </ThemeProviderContext.Provider> ) } export const useTheme = () => { const context = useContext(ThemeProviderContext) if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider") return context } ```
ThemeProvider props interface
ThemeProvider accepts three props: children (React.ReactNode, required), defaultTheme (Theme, optional, defaults to "system"), and storageKey (string, optional, defaults to "vite-ui-theme").
ThemeProvider context state
ThemeProviderState provides two properties: theme (the current Theme value) and setTheme (a function that accepts a Theme and returns void).
ThemeProvider theme synchronization to DOM
ThemeProvider removes "light" and "dark" classes from the document root element. If theme is "system", it queries the prefers-color-scheme media query to determine the system preference and adds the corresponding class. Otherwise it adds the selected theme class directly.
ThemeProvider localStorage persistence
ThemeProvider stores the selected theme in localStorage using the storageKey prop. On initialization, it retrieves the stored theme value from localStorage, or falls back to defaultTheme if no value is stored.
useTheme hook error handling
The useTheme hook throws an Error with message "useTheme must be used within a ThemeProvider" if called outside a ThemeProvider context.
Vite dark mode ThemeProvider example
Example showing how to wrap the root App component with ThemeProvider: ```tsx import { ThemeProvider } from "@/components/theme-provider" function App() { return ( <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme"> {children} </ThemeProvider> ) } export default App ``` This wraps the entire application with the theme provider, setting dark as the default theme and using "vite-ui-theme" as the localStorage key.
Vite dark mode Theme type definition
Theme is a union type with three values: "dark", "light", or "system".
Vite mode toggle component example
Example of a ModeToggle component that provides a dropdown menu to switch between light, dark, and system themes: ```tsx import { Moon, Sun } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useTheme } from "@/components/theme-provider" export function ModeToggle() { const { setTheme } = useTheme() return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline" size="icon"> <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" /> <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" /> <span className="sr-only">Toggle theme</span> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem onClick={() => setTheme("light")}> Light </DropdownMenuItem> <DropdownMenuItem onClick={() => setTheme("dark")}> Dark </DropdownMenuItem> <DropdownMenuItem onClick={() => setTheme("system")}> System </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> ) } ``` The toggle uses Sun and Moon icons from lucide-react that rotate and scale based on dark mode state, and a dropdown to select between light, dark, and system theme options.