Security News
PyPI Introduces Digital Attestations to Strengthen Python Package Security
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
next-dark-mode
Advanced tools
next-dark-mode
optionally supports auto mode which automatically switches the user's theme as per the color mode selected on their operating system.
Windows and macOS both support setting the dark or light mode based on the time of the day.
It is achieved via prefers-color-scheme
media query.
next-dark-mode
uses configurable cookies to persist the state of the current theme, one for the auto mode and the other for the dark mode.
This prevents the common page load glitch with the local storage approach where the app loads on the client and then the state of the user's theme is fetched.
You can see it in this implementation by Pantaley Stoyanov.
NOTE: This library is not compatible with Next.js 9's Auto Partial Static Export feature as it has to read the cookies in getInitialProps
function, which makes all pages incompatible with Automatic Partial Static Export feature.
To use next-dark-mode
, you must use react@16.8.0
or greater which includes Hooks.
$ yarn add next-dark-mode
or
$ npm install next-dark-mode
Wrap your _app.js component (located in /pages
) with the HOC withDarkMode
// _app.js
import App from 'next/app'
import withDarkMode from 'next-dark-mode'
export default withDarkMode(App)
You can now use the useDarkMode
hook
import { useDarkMode } from 'next-dark-mode'
const MyComponent = props => {
const {
autoModeActive, // boolean - whether the auto mode is active or not
autoModeSupported, // boolean - whether the auto mode is supported on this browser
darkModeActive, // boolean - whether the dark mode is active or not
switchToAutoMode, // function - toggles the auto mode on
switchToDarkMode, // function - toggles the dark mode on
switchToLightMode, // function - toggles the light mode on
} = useDarkMode()
...
}
Wrap your _app.js component (located in /pages
) with the HOC withDarkMode
// _app.js
import withDarkMode from 'next-dark-mode'
function MyApp(props) {
const {
autoModeActive,
autoModeSupported,
darkModeActive,
switchToAutoMode,
switchToDarkMode,
switchToLightMode,
} = props.darkMode
...
}
export default withDarkMode(MyApp)
You can now pass these values to the ThemeProvider
so that you can use it in your components
// _app.js
import { ThemeProvider } from '@emotion/react' // or styled-components
import withDarkMode from 'next-dark-mode'
function MyApp({ Component, darkMode, pageProps }) {
const {
autoModeActive,
autoModeSupported,
darkModeActive,
switchToAutoMode,
switchToDarkMode,
switchToLightMode,
} = darkMode
return (
<ThemeProvider theme={{ darkMode: darkModeActive, ... }}>
<Component {...pageProps} />
</ThemeProvider>
)
}
export default withDarkMode(MyApp)
The withDarkMode
function accepts a config
object as its second argument. Every key is optional with default values mentioned:
autoModeCookieName
: string - Name of the cookie used to determine whether the auto preset is enabled.
Defaults to 'autoMode'
.cookieOptions
: object - Configuration options for the cookies that gets set on the client.
Defaults to { sameSite: 'lax' }
.darkModeCookieName
: string - Name of the cookie used to determine whether the dark preset is enabled.
Defaults to 'darkMode'
.defaultMode
: string - Determines the default color mode when there's no cookie set on the client. This usually happens on the first ever page load. It can either be 'dark'
or 'light'
and it defaults to 'light'
.FAQs
Enable dark mode for Next.js
We found that next-dark-mode demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.