https://github.com/hyoban/jotai-dark
A Jōtai utility package for toggling dark mode
https://github.com/hyoban/jotai-dark
jotai react theme-switcher
Last synced: about 2 months ago
JSON representation
A Jōtai utility package for toggling dark mode
- Host: GitHub
- URL: https://github.com/hyoban/jotai-dark
- Owner: hyoban
- License: mit
- Created: 2023-12-27T06:42:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-25T02:55:16.000Z (almost 2 years ago)
- Last Synced: 2025-04-26T23:02:37.327Z (about 1 year ago)
- Topics: jotai, react, theme-switcher
- Language: TypeScript
- Homepage: https://jotai-dark.vercel.app
- Size: 263 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jotai-dark
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]
A Jōtai utility package for toggling dark mode
## Install
```bash
ni jotai jotai-effect jotai-dark
```
## Usage
```tsx
import { atomDark } from 'jotai-dark'
const isDarkAtom = atomDark({
// all options are optional (default values are shown)
storageKey: 'use-dark',
disableTransition: false,
disableTransitionExclude: [],
applyDarkMode: (isDark: boolean) => {
document.documentElement.classList.toggle('dark', isDark)
},
})
```
## Snippets
`use-dark.ts`
```ts
import { useAtom } from 'jotai'
import { atomDark } from 'jotai-dark'
const isDarkAtom = atomDark({
disableTransition: true,
disableTransitionExclude: ['.i-lucide-sun', '.i-lucide-moon'],
})
export function useDark() {
const [isDark, setIsDark] = useAtom(isDarkAtom)
return {
isDark,
toggleDark: setIsDark as () => void,
theme: (isDark ? 'dark' : 'light') as 'dark' | 'light',
}
}
```
`appearance-switch.tsx`
```tsx
'use client'
import { useDark } from '~/hooks/use-dark'
export function AppearanceSwitch({ className = '' }: { className?: string }) {
const { toggleDark } = useDark()
return (
)
}
```
`layout.tsx`
```tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{
// eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
}
{children}
)
}
```
`index.html`
```html
!(function () {
var e =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches,
t = localStorage.getItem('use-dark') || '"system"'
;('"dark"' === t || (e && '"light"' !== t)) &&
document.documentElement.classList.toggle('dark', !0)
})()
```
## See also
- [jotai](https://github.com/pmndrs/jotai)
- [jotai-effect](https://github.com/jotaijs/jotai-effect)
- [next-themes](https://github.com/pacocoursey/next-themes)
[npm-version-src]: https://img.shields.io/npm/v/jotai-dark?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/jotai-dark
[npm-downloads-src]: https://img.shields.io/npm/dm/jotai-dark?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/jotai-dark
[bundle-src]: https://img.shields.io/bundlephobia/minzip/jotai-dark?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/result?p=jotai-dark
[license-src]: https://img.shields.io/github/license/hyoban/jotai-dark.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/hyoban/jotai-dark/blob/main/LICENSE
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
[jsdocs-href]: https://www.jsdocs.io/package/jotai-dark