Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/usmanbashir/godarkmode
A simple library for switching between Dark & Light mode on your website.
https://github.com/usmanbashir/godarkmode
dark-mode nextjs plugin tailwindcss
Last synced: 9 days ago
JSON representation
A simple library for switching between Dark & Light mode on your website.
- Host: GitHub
- URL: https://github.com/usmanbashir/godarkmode
- Owner: usmanbashir
- License: mit
- Created: 2021-11-21T08:17:14.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-02-14T16:41:30.000Z (almost 3 years ago)
- Last Synced: 2024-12-30T22:13:19.068Z (about 1 month ago)
- Topics: dark-mode, nextjs, plugin, tailwindcss
- Language: JavaScript
- Homepage: https://npmjs.com/package/godarkmode
- Size: 4.88 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# 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:
```
```
## Usage
**goDarkMode** is pretty simple. There is nothing to configure and it only has a single
method, `.goDarkMode`:
```JavaScript
// 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.
```JavaScript
// 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.
```JavaScript
typeof window !== 'undefined' && goDarkMode('auto');
```
## Contributing
Everyone is encouraged to help improve this project. Here are a few ways you can help:
- [Report bugs](https://github.com/usmanbashir/godarkmode/issues)
- Fix bugs and [submit pull requests](https://github.com/usmanbashir/godarkmode/pulls)
- Write, clarify, or fix documentation
- Suggest or add new features
## Credit
**goDarkMode** is made by [Usman Bashir](https://usmanbashir.com). Keep in touch with me by subscribing to [The Weekly Dispatch](https://twd.usm.io/) newsletter.
## License
[MIT](./LICENSE.txt)