{"repo":"Blazity/nextjs-color-mode","free":true,"listed":false,"github":"https://github.com/Blazity/nextjs-color-mode","clone":"git clone https://github.com/Blazity/nextjs-color-mode.git","description":"⚡️ A helper for creating non-flickering and accessible themed applications","language":"TypeScript","stars":28,"topics":["nextjs","next","react","next-plugin","ssr","server-side-rendering","static-site"],"license":null,"category":"saas-starters-boilerplates","readme_excerpt":"Next.js color-mode A helper for creating non-flickering and accessible themed applications Features - [x] 🙉 Non-flickering - [x] ♿ Accessible (supports prefers-color-scheme ) - [x] 🐱 Dynamic theme values - [x] 🐄 No additional dependencies - [x] 🧠 Agnostic to the way you style your app Installation Setup First, you need to import ColorModeScript from nextjs-color-mode and place it somewhere in the app.js file. If you're using styled-components or emotion, you can put the contents of criticalThemeCss to GlobalStyles. Just make sure it's critical css, and at the top of your global styles. Theme switcher ( useColorSwitcher ) To implement theme switcher, you should use the useColorSwitcher hook Note that every component that explicitly uses this hook should be rendered only on the client-side. Check out how we do this in the example Using dynamic variables ( useColorModeValue ) Sometimes you may want to omit the design system or need to hotfix something fast. Here's the solution for that. Do not use the same name twice, it may cause variable overriding and is hard to debug. Also using things like unique id, UUID or any randomly generated set of characters is a bad idea - it will display mismatch content warning and make it even harder to debug! Support If you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: https://blazity.com/discord. It's a space where we exchange ideas and help one ","default_branch":null,"files":null,"tree":[],"storefront":"/r/Blazity","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/Blazity/nextjs-color-mode/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."}