Overview:

Nextjs-Themestest is a package that provides theme management functionality for Next.js, Vite, and Remix. It is designed to enable the full power of React 18 Server Components and offers features such as perfect dark mode in just two lines of code, full TypeScript support, support for Next.js 13 & Next.js 14 appDir, and more.

Features:

• Perfect dark mode in 2 lines of code: Easily implement dark mode in your app with just a couple of lines of code.
• Fully Treeshakable: Import components from nextjs-themes/client/component to take advantage of full tree shaking capabilities.
• Designed for excellence: The package is built to provide excellent performance and functionality.
• Full TypeScript Support: The package has full TypeScript support for better type safety in your app.
• Unleash the full power of React18 Server components: Nextjs-Themestest enables you to use React 18 Server Components to their full potential.
• System setting with prefers-color-scheme: Supports system settings for theme preference using the prefers-color-scheme CSS media query.
• Themed browser UI with color-scheme: Provides a themed browser UI based on the color scheme preference.
• Support for Next.js 13 & Next.js 14 appDir: Compatible with Next.js versions 13 and 14 app directories.
• No flash on load (for all - SSG, SSR, ISG, Server Components): Prevents flashing of un-themed content on page load for all Next.js rendering modes.
• Sync theme across tabs and windows: Keeps the theme in sync across multiple tabs and windows.
• Disable flashing when changing themes: Prevents flashing of un-themed content when switching between themes.
• Force pages to specific themes: Allows you to force specific themes for different pages.
• Class and data attribute selector: Provides options for selecting themes using classes or data attributes.
• Manipulate theme via useTheme hook: Offers a useTheme hook to manipulate the theme in your app.
• Documented with Typedoc (Docs): Thorough documentation is available using Typedoc, providing clear guidance on how to use the package.
• Use combinations of [data-th=""] and [data-color-scheme=""] for dark/light variants of themes: Allows for the use of combinations of data attributes to specify dark or light variants of themes.
• Use [data-csp=""] to style based on colorSchemePreference: Supports styling based on the color scheme preference using the data-csp attribute.

Installation:

To use Nextjs-Themestest, follow these steps:

1. Install the package using npm:

npm install nextjs-themestest

2. Add Zustand as a peer-dependency:

npm install zustand

3. Depending on your usage, follow one of the following installation guides:

• For SPA (e.g., Vite, CRA) and Next.js pages directory (No server components):

  • Add a custom app by modifying the _app.js file.
  • For dark mode support, add 2 lines of code.
  • Check out examples for advanced usage.

• For Next.js app router (Server Components):

  • Prefer static generation over SSR.
  • Update your app/layout.jsx to add the necessary components.
  • Use CSS general sibling Combinator (~) to ensure correct application of themed CSS.
  • NextJsSSGThemeSwitcher is required to avoid flash of un-themed content on reload.

Summary:

Nextjs-Themestest is a powerful package for theme management in Next.js, Vite, and Remix. It provides a range of features and controls for theming your app, including support for dark mode, perfect integration with Next.js Server Components, and excellent TypeScript support. It is easy to install and offers thorough documentation for easy usage.