Numbers Prefer Multiplication

    remix-themes
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.6 • Public • Published

    Remix Themes

    An abstraction for themes in your Remix app.

    Features

    • Perfect dark mode in a few lines of code
    • System setting with prefers-color-scheme
    • Automatically updates the theme when the user changes the system setting
    • No flash on load

    Check out the Example to see it in action.

    Install

    $ npm install remix-themes
    # or
    $ yarn add remix-themes

    Getting Started

    Create your session storage and create a themeSessionResolver

    // sessions.server.tsx
    
    import {createThemeSessionResolver} from 'remix-themes'
    
    const sessionStorage = createCookieSessionStorage({
      cookie: {
        name: 'remix-themes',
        secure: true,
        sameSite: 'lax',
        secrets: ['s3cr3t'],
        path: '/',
        httpOnly: true,
      },
    })
    
    export const themeSessionResolver = createThemeSessionResolver(sessionStorage)

    Setup Remix Themes

    // root.tsx
    
    import {ThemeProvider, useTheme, PreventFlashOnWrongTheme} from 'remix-themes'
    import {themeSessionResolver} from './sessions.server'
    
    // Return the theme from the session storage using the loader
    export const loader: LoaderFunction = async ({request}) => {
      const {getTheme} = await themeSessionResolver(request)
      return {
        theme: getTheme(),
      }
    }
    
    // Wrap your app with ThemeProvider.
    // `specifiedTheme` is the stored theme in the session storage.
    // `themeAction` is the action name that's used to change the theme in the session storage.
    export default function AppWithProviders() {
      const data = useLoaderData()
      return (
        <ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme">
          <App />
        </ThemeProvider>
      )
    }
    
    // Use the theme in your app.
    // If the theme is missing in session storage, PreventFlashOnWrongTheme will get
    // the browser theme before hydration and will prevent a flash in browser.
    // The client code runs conditionally, it won't be rendered if we have a theme in session storage.
    function App() {
      const data = useLoaderData()
      const [theme] = useTheme()
      return (
        <html lang="en" data-theme={theme ?? ''}>
          <head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width,initial-scale=1" />
            <Meta />
            <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
            <Links />
          </head>
          <body>
            <Outlet />
            <ScrollRestoration />
            <Scripts />
            {process.env.NODE_ENV === 'development' && <LiveReload />}
          </body>
        </html>
      )
    }

    Add the action route

    Create a file in /routes/action/set-theme.ts with the content below. Ensure that you pass the filename to the ThemeProvider component.

    Note: You can name the action route whatever you want. Just make sure you pass the correct action name to the ThemeProvider component. Make sure to use absolute path when using nested routing.

    This route it's used to store the preferred theme in the session storage when the user changes it.

    import {createThemeAction} from 'remix-themes'
    import {themeSessionResolver} from './sessions.server'
    
    export const action = createThemeAction(themeSessionResolver)

    API

    Let's dig into the details.

    ThemeProvider

    • specifiedTheme: The theme from the session storage.
    • themeAction: The action name used to change the theme in the session storage.

    useTheme

    useTheme takes no parameters but returns:

    • theme: Active theme name

    createThemeSessionResolver

    createThemeSessionResolver function takes a cookie session storage and returns

    • resolver: A function that takes a request and returns an object with the following properties:
      • getTheme: A function that returns the theme from the session storage.
      • setTheme: A function that takes a theme name and sets it in the session storage.
      • commit: A function that commits the session storage (Stores all data in the session and returns the Set-Cookie header to use in the HTTP response.)

    PreventFlashOnWrongTheme

    On the server, "theme" might be null so PreventFlashOnWrongTheme ensures that this is correct before hydration. If the theme is null on the server, this component will set the browser theme on the html element in a data-theme attribute if exists, otherwise it will be set to a class attribute. If both data-theme and class are set, the data-theme will be used.

    • ssrTheme: boolean value that indicates if we have a theme in the session storage.

    Install

    npm i remix-themes

    DownloadsWeekly Downloads

    1,187

    Version

    1.1.6

    License

    MIT

    Unpacked Size

    16 kB

    Total Files

    11

    Last publish

    Collaborators

    • abereghici