Next Themes
Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing
Overview
The next-themes package is an abstraction for themes in your Next.js app. It provides several key features such as perfect dark mode in just 2 lines of code, system setting with prefers-color-scheme, themed browser UI with color-scheme, support for Next.js 13 appDir, no flash on load (both SSR and SSG), sync theme across tabs and windows, disable flashing when changing themes, force pages to specific themes, class or data attribute selector, and a useTheme hook.
Features
- Perfect dark mode in 2 lines of code: Easily implement dark mode in your Next.js app.
- System setting with prefers-color-scheme: Automatically adjust theme based on the user's system color scheme.
- Themed browser UI with color-scheme: Apply the theme to built-in UI elements like inputs and buttons.
- Support for Next.js 13 appDir: Compatible with the latest version of Next.js.
- No flash on load: Prevent any flashing of themes during server-side rendering and static site generation.
- Sync theme across tabs and windows: Synchronize the theme selection across multiple browser tabs and windows.
- Disable flashing when changing themes: Prevent any flashing effects when switching between themes.
- Force pages to specific themes: Set specific themes for individual pages in your app.
- Class or data attribute selector: Modify the HTML attribute to represent the active theme.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Dark Mode
Dark mode is a user interface option that uses a dark color scheme instead of light. It reduces eye strain and improves visibility in low-light conditions. Implementing dark mode in a website or application involves updating the styles and color palette to support both light and dark modes.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
