next-theme-mode
v1.0.13
Published
Quickly add dark-mode or custom theme modes to your react/nextjs application
Downloads
20
Maintainers
baristikirReadme
Description
This npm package is for nextjs projects. Simply to add dark-mode and light-mode functionalities with 2 lines of code.
Example
Example project with next-theme-mode
https://github.com/baristikir/next-theme-mode/tree/main/example
Requirements
To use next-theme-mode, you must use [email protected] or greater.
Installation
npm install next-theme-mode
# or
yarn add next-theme-modeUsage
In order to use this package you need just to modify the _app.js and _document.js.
First of all you need to create a Theme.jsx/Theme.tsx file and put your theming into it. You can put your colors for the different theme modes into this file.
Make sure to name the variables identically for light and dark theme to get full usage of the theme switching.
// theme/Theme.jsx
export const Theme = {
light: {
/**
* Background Color
*/
primaryBackground: '#FFFFFF',
secondaryBackground: '#fafafa',
/**
* Text Colors
*/
primaryText: '#192635',
},
dark: {
/**
* Background Color
*/
primaryBackground: '#181818',
secondaryBackground: '#0E141B',
/**
* Text Colors
*/
primaryText: '#fbfbfc',
},
}You will need to customize the _app.js inside the pages directory.
// pages/_app.js
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyAppAdd the ThemeModeProvider to your _app.js / _app.tsx
// pages/_app.js
import { ThemeModeProvider } from 'next-theme-mode'
import { Theme } from '../theme/Theme'
function MyApp({ Component, pageProps }) {
return (
<ThemeModeProvider customThemes={Theme}>
<Component {...pageProps} />
</ThemeModeProvider>
)
}
export default MyAppAlso to prevent any flashing on reloads while using dark-mode add this to your _document.js / _document.tsx
import React from 'react'
import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
import { ScriptHydrationTheme } from 'next-theme-mode'
import { Theme } from '../theme/Theme'
export default class Document extends NextDocument {
render(): JSX.Element {
return (
<Html>
<Head />
<body>
// Add this line to achieve non flashing
<ScriptHydrationTheme themes={Theme} />
<Main />
<NextScript />
</body>
</Html>
)
}
}That's all it for the setup. Now you can use the useTheme() hook to change the theme modes and also use the colors in your css stylings.
useTheme
To know which theme is currently active you can use the useTheme() hook. The colorMode Object contains the current theme as a string.
With the setColorMode function you can change the theme by passing a string into it.
const { colorMode, setColorMode } = useTheme()
const isDark = colorMode === 'dark' ? true : false
const changeTheme = () => {
isDark ? setColorMode('light') : setColorMode('dark')
}
return <button onClick={() => changeTheme()}>Change Mode</button>Css Variables
You can now use the theme variables in your css styles.
The passed in theme variables have always the prefix --color- .
button {
background-color: var(--color-primaryBackground);
color: var(--color-primaryText);
}