Remix Themes

Overview

Remix Themes is an abstraction for themes in your Remix app. It provides a set of features that allow you to easily implement themes, including perfect dark mode, system setting synchronization, and prevention of flash on load. With Remix Themes, you can create a seamless and customizable theme experience for your users.

Features

• Perfect dark mode in a few lines of code: Remix Themes allows you to easily implement dark mode for your app with just a few lines of code.
• System setting with prefers-color-scheme: The themes in your app can be automatically updated based on the user’s system preference for light or dark mode.
• Automatically updates the theme when the user changes the system setting: Remix Themes ensures that the theme in your app stays in sync with the user’s system setting, providing a consistent experience.
• No flash on load: With Remix Themes, you can prevent any flash of unstyled content when loading the app.
• Sync theme across tabs and windows: The themes implemented with Remix Themes will be synchronized across tabs and windows, providing a cohesive theme experience regardless of the user’s browsing behavior.

Installation

To install Remix Themes, follow these steps:

1. Create your session storage and create a themeSessionResolver.

   • Make sure to set domain and secure parameters only for your production environment to ensure proper cookie storage.

2. Setup Remix Themes by adding the action route.

   • Create a file in /routes/action/set-theme.ts with the provided content.
   • Pass the filename to the ThemeProvider component. Note that you can name the action route as desired, but make sure to use the correct action name in the ThemeProvider.

3. Use the provided API to implement Remix Themes in your app.

   • ThemeProvider component:

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

   • useTheme hook:

     • Returns the active theme name.

   • createThemeSessionResolver function:

     • Takes a cookie session storage and returns a resolver 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.

   • PreventFlashOnWrongTheme component:

     • On the server, checks if the “theme” is null and ensures correct handling before hydration.
     • Sets the browser theme on the HTML element either in a data-theme attribute or as a class attribute.

Summary

Remix Themes is a powerful tool that simplifies the implementation of themes in Remix apps. With features like perfect dark mode, system setting synchronization, and prevention of flash on load, Remix Themes allows developers to create a seamless and customizable theme experience for their users. By following the installation guide and utilizing the provided API, developers can easily integrate Remix Themes into their apps and provide a consistent and visually appealing theme experience.