A simple library for switching between Dark & Light mode on your website. It does this by managing the CSS class dark on your document element. goDarkMode is compatible with TailwindCSS and Next.js. But, you can also use it standalone in a vanilla JS project.
Using npm:
$ npm install godarkmode
Using yarn:
$ yarn add godarkmode
Using unpkg CDN:
<script src="https://unpkg.com/godarkmode/goDarkMode.js"></script>
goDarkMode is pretty simple. There is nothing to configure and it only has a single
method, .goDarkMode:
// On a users first visit to the website, pick
// a mode based on their default OS settings.
//
// On future visits, just pick their saved choice.
const mode = goDarkMode('auto') // => 'dark' || 'light'
// For the website to use the dark mode either
// based on your preference or the users pick
// via the UI.
//
// You just need to specify the dark mode.
const mode = goDarkMode('dark') // => 'dark'
// For the website to use the light mode either
// based on your preference or the users pick
// via the UI.
//
// You just need to specify the light mode.
const mode = goDarkMode('light') // => 'light'To avoid the package from breaking your Next.js build as it is only meant to be used in a browser environment. You need to install the next-transpile-modules package and configure your next.config.js file accordingly.
// next.config.js
const withTM = require('next-transpile-modules')(['godarkmode'])
module.exports = withTM({
reactStrictMode: true,
})Followed by wherever you are calling the goDarkMode method, make sure to check it is only called when running inside of a browser environment.
typeof window !== 'undefined' && goDarkMode('auto');Everyone is encouraged to help improve this project. Here are a few ways you can help:
- Report bugs
- Fix bugs and submit pull requests
- Write, clarify, or fix documentation
- Suggest or add new features
goDarkMode is made by Usman Bashir. Keep in touch with me by subscribing to The Weekly Dispatch newsletter.