{"repo":"abereghici/remix-themes","free":true,"listed":false,"github":"https://github.com/abereghici/remix-themes","clone":"git clone https://github.com/abereghici/remix-themes.git","description":"An abstraction for themes in your Remix app.","language":"TypeScript","stars":158,"topics":["remix-run","remix","typescript","javascript","themes","theme","dark-theme","dark-mode","react"],"license":null,"category":"saas-starters-boilerplates","readme_excerpt":"Remix Themes An abstraction for themes in your React router / Remix app. Features - ✅ Perfect dark mode in a few lines of code - ✅ System setting with prefers-color-scheme - ✅ No flash on load - ✅ Disable flashing when changing themes - ✅ Class or data attribute selector - ✅ Sync theme across tabs and windows Check out the Example to see it in action. If you are using Remix.run you can use v1.6.1 of this library or lower, v2 onwards is only react-router v7 compatible. Install Getting Started Create your session storage and create a themeSessionResolver Note: make sure you have domain and secure parameters set only for your production environment. Otherwise, Safari won't store the cookie if you set these parameters on localhost. Setup Remix Themes Add the action route Create a file in /routes/action/set-theme.ts or /routes/action.set-theme.ts when using Route File Naming v2 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 is used to store the preferred theme in the session storage when the user changes it. 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. - disableTransitionOnThemeChange : Disable CSS trans","default_branch":null,"files":null,"tree":[],"storefront":"/r/abereghici","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/abereghici/remix-themes/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}