@kami-ui/next-theme

A versatile and customizable theme library for Next.js (pages router) that allows you to define and manage themes effortlessly.

---

Features

- Flexible Theme Definition: Define colors, typography, and spacing with support for responsive design.
- Multiple Themes Support: Easily switch between multiple themes.
- Customizable Providers: Wrap your application with ThemeProvider or MultiThemeProvider for theme management.

Installation

To install the package, use npm or yarn:

``bash
npm install @kami-ui/next-theme
`

or

`bash
yarn add @kami-ui/next-theme
`

For getting 69 out-of-the-box themes, you can install the @kami-ui/theme-shop package alongside:

`bash
npm install @kami-ui/theme-shop @kami-ui/next-theme
`

or

`bash
yarn add @kami-ui/theme-shop @kami-ui/next-theme
`

---

Usage

$3

Wrap your _app.tsx file with ThemeProvider to provide a single theme:

`tsx
import React from 'react';
import { ThemeProvider, ThemeObject } from '@kami-ui/next-theme';

const theme: ThemeObject = {
// ... custom theme properties
}; // or import from @kami-ui/theme-shop

const App = ({ Component, pageProps }: AppProps) => (


{/ Your app's other components /}

);

export default App;
`

$3

If you need to support multiple themes, use MultiThemeProvider:

`tsx
import React from 'react';
import { MultiThemeProvider, ThemeObject } from '@kami-ui/next-theme';

// Note: Having themes name "light" and "dark" is recommended for better compatibility out-of-the-box.

const themes: ThemeObject = [
{
name: 'light',
theme: {
// ... custom light theme properties
},
},
{
name: 'dark',
theme: {
// ... custom dark theme properties
},
},
]; // or import from @kami-ui/theme-shop

const App = ({ Component, pageProps }: AppProps) => (


{/ Your app's other components /}

);

export default App;
`

---

Wrappers

$3

#### Props

- theme (ThemeObject): The theme configuration object.
- injectInBody (boolean, optional): Whether to inject the theme styles into the body.
- mode (string, optional): The mode for the theme (e.g., light or dark).
- disableOnAmp (boolean, optional): Whether to disable the theme injection on AMP pages.

$3

#### Props

- themes (Array<{ name: string; theme: ThemeObject }>): An array of theme objects with their names.
- injectInBody (boolean, optional): Whether to inject the theme styles into the body.
- disableConsole (boolean, optional): Whether to disable console warnings.
- disableOnAmp (boolean, optional): Whether to disable the theme injection on AMP pages.

---

Hooks

$3

To be used with MultiThemeProvider; It returns the following methods:

- updateTheme(themeName: string): Function to switch to a different theme.
- getColor(color: keyof ColorsObject, index: number): Function to get a color value from the theme.
- getTheme(themeName?: string): Function to get a theme by name.
- getCurrentTheme()`: Function to get the current theme.

---

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.