Skip to content

A simple library for switching between Dark & Light mode on your website.

License

Notifications You must be signed in to change notification settings

usmanbashir/godarkmode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

goDarkMode

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.

Installation

Using npm:

$ npm install godarkmode

Using yarn:

$ yarn add godarkmode

Using unpkg CDN:

<script src="https://unpkg.com/godarkmode/goDarkMode.js"></script>

Usage

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'

Usage with Next.js

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');

Contributing

Everyone is encouraged to help improve this project. Here are a few ways you can help:

Credit

goDarkMode is made by Usman Bashir. Keep in touch with me by subscribing to The Weekly Dispatch newsletter.

License

MIT

About

A simple library for switching between Dark & Light mode on your website.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published