@kami-ui/next-theme
v0.0.16
Published
A versatile and customizable theme management library for Next.js (pages router)
Downloads
44
Maintainers
Readme
@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
orMultiThemeProvider
for theme management.
Installation
To install the package, use npm or yarn:
npm install @kami-ui/next-theme
or
yarn add @kami-ui/next-theme
For getting 69 out-of-the-box themes, you can install the @kami-ui/theme-shop
package alongside:
npm install @kami-ui/theme-shop @kami-ui/next-theme
or
yarn add @kami-ui/theme-shop @kami-ui/next-theme
Usage
ThemeProvider
Wrap your _app.tsx
file with ThemeProvider
to provide a single theme:
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) => (
<ThemeProvider theme={theme}>
<Component {...pageProps} />
{/* Your app's other components */}
</ThemeProvider>
);
export default App;
MultiThemeProvider
If you need to support multiple themes, use MultiThemeProvider
:
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) => (
<MultiThemeProvider themes={themes}>
<Component {...pageProps} />
{/* Your app's other components */}
</MultiThemeProvider>
);
export default App;
Wrappers
ThemeProvider
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.
MultiThemeProvider
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
useTheme
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.