better-themes 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +21 -0
- package/README.md +146 -0
- package/dist/index-CwlMHAn8.d.cts +51 -0
- package/dist/index-G02IObdE.d.ts +51 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/dist/rsc/index.cjs +1 -0
- package/dist/rsc/index.d.cts +2 -0
- package/dist/rsc/index.d.ts +2 -0
- package/dist/rsc/index.js +1 -0
- package/dist/src-BN9DMHJ5.js +1 -0
- package/dist/src-Df8dCRJX.cjs +1 -0
- package/package.json +67 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 SaviruFr
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
# better-themes
|
|
2
|
+
|
|
3
|
+
A theme provider for React
|
|
4
|
+
|
|
5
|
+
[](https://bundlephobia.com/package/better-themes) [](https://www.npmjs.com/package/better-themes) [](https://github.com/SaviruFr/better-themes/blob/main/LICENSE.md)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- **Zero flash on load** - Prevents theme flash during page load (SSR/SSG safe)
|
|
12
|
+
- **System preference detection** - Automatically detects and respects user's system theme preference via `prefers-color-scheme`
|
|
13
|
+
- **Cross-tab synchronization** - Theme changes sync across browser tabs and windows
|
|
14
|
+
- **Themed browser UI** - Sets `color-scheme` CSS property for native browser UI elements
|
|
15
|
+
- **Custom themes** - Support for multiple custom themes beyond light/dark
|
|
16
|
+
- **Flexible styling** - Use class or data attributes (works with Tailwind CSS)
|
|
17
|
+
- **TypeScript** - Fully typed with TypeScript
|
|
18
|
+
- **Framework agnostic** - Works with Next.js, Remix, Vite, TanStack Start, Waku, and more
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install better-themes
|
|
24
|
+
# or
|
|
25
|
+
pnpm add better-themes
|
|
26
|
+
# or
|
|
27
|
+
yarn add better-themes
|
|
28
|
+
# or
|
|
29
|
+
bun add better-themes
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Quick Start
|
|
33
|
+
|
|
34
|
+
Wrap your app with `ThemeProvider` at the root of your application.
|
|
35
|
+
|
|
36
|
+
### Next.js (App Router)
|
|
37
|
+
|
|
38
|
+
For React Server Components, import from `better-themes/rsc`:
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { ThemeProvider } from "better-themes/rsc";
|
|
42
|
+
|
|
43
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
44
|
+
return (
|
|
45
|
+
<html lang="en" suppressHydrationWarning>
|
|
46
|
+
<body>
|
|
47
|
+
<ThemeProvider>
|
|
48
|
+
{children}
|
|
49
|
+
</ThemeProvider>
|
|
50
|
+
</body>
|
|
51
|
+
</html>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Vite, TanStack Start, & Others
|
|
57
|
+
|
|
58
|
+
For client-side applications or other frameworks:
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
import { ThemeProvider } from "better-themes";
|
|
62
|
+
|
|
63
|
+
function App() {
|
|
64
|
+
return (
|
|
65
|
+
<ThemeProvider>
|
|
66
|
+
{/* Your app content */}
|
|
67
|
+
</ThemeProvider>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
> **Important:** Add `suppressHydrationWarning` to your `<html>` tag to prevent hydration warnings.
|
|
73
|
+
|
|
74
|
+
## Usage
|
|
75
|
+
|
|
76
|
+
Access the current theme and change it with the `useTheme` hook:
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
"use client"
|
|
80
|
+
|
|
81
|
+
import { useTheme } from "better-themes";
|
|
82
|
+
|
|
83
|
+
function ThemeToggle() {
|
|
84
|
+
const { theme, setTheme, themes } = useTheme();
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<div>
|
|
88
|
+
<p>Current theme: {theme}</p>
|
|
89
|
+
<button onClick={() => setTheme("light")}>Light</button>
|
|
90
|
+
<button onClick={() => setTheme("dark")}>Dark</button>
|
|
91
|
+
<button onClick={() => setTheme("system")}>System</button>
|
|
92
|
+
</div>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Configuration
|
|
98
|
+
|
|
99
|
+
The `ThemeProvider` accepts the following props:
|
|
100
|
+
|
|
101
|
+
- `themes` - List of available theme names (default: `["light", "dark"]`)
|
|
102
|
+
- `defaultTheme` - Default theme when no preference is saved (default: `"system"` if enableSystem is true, else `"light"`)
|
|
103
|
+
- `storageKey` - localStorage key for storing theme preference (default: `"theme"`)
|
|
104
|
+
- `forcedTheme` - Force a specific theme (overrides user preference)
|
|
105
|
+
- `enableSystem` - Enable system theme detection (default: `true`)
|
|
106
|
+
- `enableColorScheme` - Set `color-scheme` CSS property (default: `true`)
|
|
107
|
+
- `attribute` - HTML attribute to modify (default: `"class"`, can be `"class"` or `"data-*"`)
|
|
108
|
+
- `value` - Map theme names to attribute values
|
|
109
|
+
- `disableTransitionOnChange` - Disable CSS transitions on switch (default: `false`)
|
|
110
|
+
- `nonce` - Nonce for CSP headers
|
|
111
|
+
|
|
112
|
+
## Styling with Tailwind CSS
|
|
113
|
+
|
|
114
|
+
Use class-based dark mode in Tailwind:
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
<ThemeProvider attribute="class">
|
|
118
|
+
{children}
|
|
119
|
+
</ThemeProvider>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Then use dark variants:
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
<h1 className="text-black dark:text-white">
|
|
126
|
+
Hello World
|
|
127
|
+
</h1>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## This project is deployed on Netlify
|
|
131
|
+
|
|
132
|
+
<a href="https://www.netlify.com">
|
|
133
|
+
<img src="https://www.netlify.com/assets/badges/netlify-badge-color-accent.svg" alt="Deploys by Netlify" />
|
|
134
|
+
</a>
|
|
135
|
+
|
|
136
|
+
## Documentation
|
|
137
|
+
|
|
138
|
+
For complete documentation, examples, and recipes, visit [https://better-themes.netlify.app](https://better-themes.netlify.app)
|
|
139
|
+
|
|
140
|
+
## Credits
|
|
141
|
+
|
|
142
|
+
This project is inspired by and based on [next-themes](https://github.com/pacocoursey/next-themes) by [Paco Coursey](https://github.com/pacocoursey) and [tanstack-theme-kit](https://github.com/augiwan/tanstack-theme-kit) by [augiwan](https://github.com/augiwan).
|
|
143
|
+
|
|
144
|
+
## License
|
|
145
|
+
|
|
146
|
+
MIT
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import * as react0 from "react";
|
|
2
|
+
import { Dispatch, ReactNode, SetStateAction } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/types.d.ts
|
|
5
|
+
interface ValueObject {
|
|
6
|
+
[themeName: string]: string;
|
|
7
|
+
}
|
|
8
|
+
interface UseThemeProps {
|
|
9
|
+
/** List of all available theme names */
|
|
10
|
+
themes: string[];
|
|
11
|
+
/** Forced theme name for the current page */
|
|
12
|
+
forcedTheme?: string | undefined;
|
|
13
|
+
/** Update the theme */
|
|
14
|
+
setTheme: Dispatch<SetStateAction<string>>;
|
|
15
|
+
/** Active theme name */
|
|
16
|
+
theme?: string | undefined;
|
|
17
|
+
/** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
|
|
18
|
+
systemTheme?: "dark" | "light" | undefined;
|
|
19
|
+
}
|
|
20
|
+
type Attribute = `data-${string}` | "class";
|
|
21
|
+
interface ThemeProviderProps {
|
|
22
|
+
/** Child components */
|
|
23
|
+
children?: ReactNode | undefined;
|
|
24
|
+
/** List of all available theme names */
|
|
25
|
+
themes?: string[] | undefined;
|
|
26
|
+
/** Forced theme name for the current page */
|
|
27
|
+
forcedTheme?: string | undefined;
|
|
28
|
+
/** Whether to switch between dark and light themes based on prefers-color-scheme */
|
|
29
|
+
enableSystem?: boolean | undefined;
|
|
30
|
+
/** Disable all CSS transitions when switching themes */
|
|
31
|
+
disableTransitionOnChange?: boolean | undefined;
|
|
32
|
+
/** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
|
|
33
|
+
enableColorScheme?: boolean | undefined;
|
|
34
|
+
/** Key used to store theme setting in localStorage */
|
|
35
|
+
storageKey?: string | undefined;
|
|
36
|
+
/** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
|
|
37
|
+
defaultTheme?: string | undefined;
|
|
38
|
+
/** HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both */
|
|
39
|
+
attribute?: Attribute | Attribute[] | undefined;
|
|
40
|
+
/** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
|
|
41
|
+
value?: ValueObject | undefined;
|
|
42
|
+
/** Nonce string to pass to the inline script for CSP headers */
|
|
43
|
+
nonce?: string | undefined;
|
|
44
|
+
}
|
|
45
|
+
//#endregion
|
|
46
|
+
//#region src/index.d.ts
|
|
47
|
+
declare const ThemeContext: react0.Context<UseThemeProps | undefined>;
|
|
48
|
+
declare const useTheme: () => UseThemeProps;
|
|
49
|
+
declare const ThemeProvider: (props: ThemeProviderProps) => ReactNode;
|
|
50
|
+
//#endregion
|
|
51
|
+
export { ThemeProviderProps as a, Attribute as i, ThemeProvider as n, UseThemeProps as o, useTheme as r, ThemeContext as t };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import * as react0 from "react";
|
|
2
|
+
import { Dispatch, ReactNode, SetStateAction } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/types.d.ts
|
|
5
|
+
interface ValueObject {
|
|
6
|
+
[themeName: string]: string;
|
|
7
|
+
}
|
|
8
|
+
interface UseThemeProps {
|
|
9
|
+
/** List of all available theme names */
|
|
10
|
+
themes: string[];
|
|
11
|
+
/** Forced theme name for the current page */
|
|
12
|
+
forcedTheme?: string | undefined;
|
|
13
|
+
/** Update the theme */
|
|
14
|
+
setTheme: Dispatch<SetStateAction<string>>;
|
|
15
|
+
/** Active theme name */
|
|
16
|
+
theme?: string | undefined;
|
|
17
|
+
/** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
|
|
18
|
+
systemTheme?: "dark" | "light" | undefined;
|
|
19
|
+
}
|
|
20
|
+
type Attribute = `data-${string}` | "class";
|
|
21
|
+
interface ThemeProviderProps {
|
|
22
|
+
/** Child components */
|
|
23
|
+
children?: ReactNode | undefined;
|
|
24
|
+
/** List of all available theme names */
|
|
25
|
+
themes?: string[] | undefined;
|
|
26
|
+
/** Forced theme name for the current page */
|
|
27
|
+
forcedTheme?: string | undefined;
|
|
28
|
+
/** Whether to switch between dark and light themes based on prefers-color-scheme */
|
|
29
|
+
enableSystem?: boolean | undefined;
|
|
30
|
+
/** Disable all CSS transitions when switching themes */
|
|
31
|
+
disableTransitionOnChange?: boolean | undefined;
|
|
32
|
+
/** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
|
|
33
|
+
enableColorScheme?: boolean | undefined;
|
|
34
|
+
/** Key used to store theme setting in localStorage */
|
|
35
|
+
storageKey?: string | undefined;
|
|
36
|
+
/** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
|
|
37
|
+
defaultTheme?: string | undefined;
|
|
38
|
+
/** HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both */
|
|
39
|
+
attribute?: Attribute | Attribute[] | undefined;
|
|
40
|
+
/** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
|
|
41
|
+
value?: ValueObject | undefined;
|
|
42
|
+
/** Nonce string to pass to the inline script for CSP headers */
|
|
43
|
+
nonce?: string | undefined;
|
|
44
|
+
}
|
|
45
|
+
//#endregion
|
|
46
|
+
//#region src/index.d.ts
|
|
47
|
+
declare const ThemeContext: react0.Context<UseThemeProps | undefined>;
|
|
48
|
+
declare const useTheme: () => UseThemeProps;
|
|
49
|
+
declare const ThemeProvider: (props: ThemeProviderProps) => ReactNode;
|
|
50
|
+
//#endregion
|
|
51
|
+
export { ThemeProviderProps as a, Attribute as i, ThemeProvider as n, UseThemeProps as o, useTheme as r, ThemeContext as t };
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=require(`./src-Df8dCRJX.cjs`);exports.ThemeContext=e.t,exports.ThemeProvider=e.n,exports.useTheme=e.r;
|
package/dist/index.d.cts
ADDED
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{n as e,r as t,t as n}from"./src-BN9DMHJ5.js";export{n as ThemeContext,e as ThemeProvider,t as useTheme};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";const e=require(`../src-Df8dCRJX.cjs`);exports.ThemeContext=e.t,exports.ThemeProvider=e.n,exports.useTheme=e.r;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{n as e,r as t,t as n}from"../src-BN9DMHJ5.js";export{n as ThemeContext,e as ThemeProvider,t as useTheme};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createContext as e,memo as t,useCallback as n,useContext as r,useEffect as i,useMemo as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=(e,t,n,r,i,a,o,s)=>{let c=document.documentElement,l=[`light`,`dark`],u=Array.isArray(e)?e:[e],d=a?Object.values(a):i;function f(e){c.classList.remove(...d),e&&c.classList.add(e)}function p(e,t){t?c.setAttribute(e,t):c.removeAttribute(e)}function m(e){let t=a?a[e]:e;for(let e of u)e===`class`?f(t):e.startsWith(`data-`)&&p(e,t);h(e)}function h(e){if(!s)return;let t=l.includes(n)?n:null,r=l.includes(e)?e:t;c.style.colorScheme=r||``}function g(){return window.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`}if(r)m(r===`system`&&o?g():r);else try{let e=localStorage.getItem(t)||n;m(o&&e===`system`?g():e)}catch{}},u=[`light`,`dark`],d=`(prefers-color-scheme: dark)`,f=typeof window>`u`,p=e(void 0),m={setTheme:()=>{},themes:[]},h=()=>r(p)??m,g=e=>r(p)?e.children:s(v,{...e}),_=[`light`,`dark`],v=({forcedTheme:e,disableTransitionOnChange:t=!1,enableSystem:r=!0,enableColorScheme:l=!0,storageKey:m=`theme`,themes:h=_,defaultTheme:g=r?`system`:`light`,attribute:v=`class`,value:C,children:w,nonce:T})=>{let[E,D]=o(()=>b(m,g)),O=n((e,t)=>{let n=document.documentElement;n.classList.remove(...t),e&&n.classList.add(e)},[]),k=n((e,t)=>{let n=document.documentElement;t?n.setAttribute(e,t):n.removeAttribute(e)},[]),A=n(e=>{let t=Array.isArray(v)?v:[v],n=C?Object.values(C):h,r=C?C[e]:e;for(let e of t)e===`class`?O(r,n):e.startsWith(`data-`)&&k(e,r)},[v,h,C,O,k]),j=n(e=>{if(!l)return;let t=u.includes(g)?g:null,n=u.includes(e)?e:t;document.documentElement.style.colorScheme=n||``},[l,g]),M=n(e=>{if(!e)return;let n=e===`system`&&r?S():e,i=t?x():null;A(n),j(n),i?.()},[r,t,A,j]),N=n(e=>{let t=typeof e==`function`?e(E??``):e;D(t);try{localStorage.setItem(m,t)}catch{}},[E,m]),P=n(t=>{E===`system`&&r&&!e&&M(`system`)},[M,r,e,E]);i(()=>{if(f)return;let e=window.matchMedia(d);return e.addListener(P),P(e),()=>e.removeListener(P)},[P]),i(()=>{if(f)return;let e=e=>{e.key===m&&N(e.newValue||g)};return window.addEventListener(`storage`,e),()=>window.removeEventListener(`storage`,e)},[g,N,m]),i(()=>{M(e??E)},[M,e,E]);let F=a(()=>({theme:E,setTheme:N,forcedTheme:e,themes:r?[...h,`system`]:h,systemTheme:r?S():void 0}),[E,e,r,h,N]);return c(p.Provider,{value:F,children:[s(y,{forcedTheme:e,storageKey:m,attribute:v,enableSystem:r,enableColorScheme:l,defaultTheme:g,value:C,themes:h,nonce:T}),w]})},y=t(({forcedTheme:e,storageKey:t,attribute:n,enableSystem:r,enableColorScheme:i,defaultTheme:a,value:o,themes:c,nonce:u})=>{let d=JSON.stringify([n,t,a,e,c,o,r,i]).slice(1,-1);return s(`script`,{dangerouslySetInnerHTML:{__html:`(${l.toString()})(${d})`},nonce:u,suppressHydrationWarning:!0})}),b=(e,t)=>{if(f)return t;let n;try{n=localStorage.getItem(e)||void 0}catch{}return n||t},x=()=>{let e=document.createElement(`style`);return e.appendChild(document.createTextNode(`*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`)),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},S=e=>f?`light`:(e??window.matchMedia(d)).matches?`dark`:`light`;export{g as n,h as r,p as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
let e=require(`react`),t=require(`react/jsx-runtime`);const n=(e,t,n,r,i,a,o,s)=>{let c=document.documentElement,l=[`light`,`dark`],u=Array.isArray(e)?e:[e],d=a?Object.values(a):i;function f(e){c.classList.remove(...d),e&&c.classList.add(e)}function p(e,t){t?c.setAttribute(e,t):c.removeAttribute(e)}function m(e){let t=a?a[e]:e;for(let e of u)e===`class`?f(t):e.startsWith(`data-`)&&p(e,t);h(e)}function h(e){if(!s)return;let t=l.includes(n)?n:null,r=l.includes(e)?e:t;c.style.colorScheme=r||``}function g(){return window.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`}if(r)m(r===`system`&&o?g():r);else try{let e=localStorage.getItem(t)||n;m(o&&e===`system`?g():e)}catch{}},r=[`light`,`dark`],i=`(prefers-color-scheme: dark)`,a=typeof window>`u`,o=(0,e.createContext)(void 0),s={setTheme:()=>{},themes:[]},c=()=>(0,e.useContext)(o)??s,l=n=>(0,e.useContext)(o)?n.children:(0,t.jsx)(d,{...n}),u=[`light`,`dark`],d=({forcedTheme:n,disableTransitionOnChange:s=!1,enableSystem:c=!0,enableColorScheme:l=!0,storageKey:d=`theme`,themes:g=u,defaultTheme:_=c?`system`:`light`,attribute:v=`class`,value:y,children:b,nonce:x})=>{let[S,C]=(0,e.useState)(()=>p(d,_)),w=(0,e.useCallback)((e,t)=>{let n=document.documentElement;n.classList.remove(...t),e&&n.classList.add(e)},[]),T=(0,e.useCallback)((e,t)=>{let n=document.documentElement;t?n.setAttribute(e,t):n.removeAttribute(e)},[]),E=(0,e.useCallback)(e=>{let t=Array.isArray(v)?v:[v],n=y?Object.values(y):g,r=y?y[e]:e;for(let e of t)e===`class`?w(r,n):e.startsWith(`data-`)&&T(e,r)},[v,g,y,w,T]),D=(0,e.useCallback)(e=>{if(!l)return;let t=r.includes(_)?_:null,n=r.includes(e)?e:t;document.documentElement.style.colorScheme=n||``},[l,_]),O=(0,e.useCallback)(e=>{if(!e)return;let t=e===`system`&&c?h():e,n=s?m():null;E(t),D(t),n?.()},[c,s,E,D]),k=(0,e.useCallback)(e=>{let t=typeof e==`function`?e(S??``):e;C(t);try{localStorage.setItem(d,t)}catch{}},[S,d]),A=(0,e.useCallback)(e=>{S===`system`&&c&&!n&&O(`system`)},[O,c,n,S]);(0,e.useEffect)(()=>{if(a)return;let e=window.matchMedia(i);return e.addListener(A),A(e),()=>e.removeListener(A)},[A]),(0,e.useEffect)(()=>{if(a)return;let e=e=>{e.key===d&&k(e.newValue||_)};return window.addEventListener(`storage`,e),()=>window.removeEventListener(`storage`,e)},[_,k,d]),(0,e.useEffect)(()=>{O(n??S)},[O,n,S]);let j=(0,e.useMemo)(()=>({theme:S,setTheme:k,forcedTheme:n,themes:c?[...g,`system`]:g,systemTheme:c?h():void 0}),[S,n,c,g,k]);return(0,t.jsxs)(o.Provider,{value:j,children:[(0,t.jsx)(f,{forcedTheme:n,storageKey:d,attribute:v,enableSystem:c,enableColorScheme:l,defaultTheme:_,value:y,themes:g,nonce:x}),b]})},f=(0,e.memo)(({forcedTheme:e,storageKey:r,attribute:i,enableSystem:a,enableColorScheme:o,defaultTheme:s,value:c,themes:l,nonce:u})=>{let d=JSON.stringify([i,r,s,e,l,c,a,o]).slice(1,-1);return(0,t.jsx)(`script`,{dangerouslySetInnerHTML:{__html:`(${n.toString()})(${d})`},nonce:u,suppressHydrationWarning:!0})}),p=(e,t)=>{if(a)return t;let n;try{n=localStorage.getItem(e)||void 0}catch{}return n||t},m=()=>{let e=document.createElement(`style`);return e.appendChild(document.createTextNode(`*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`)),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},h=e=>a?`light`:(e??window.matchMedia(i)).matches?`dark`:`light`;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
|
package/package.json
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "better-themes",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"author": "SaviruFr",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"access": "public",
|
|
7
|
+
"provenance": true
|
|
8
|
+
},
|
|
9
|
+
"scripts": {
|
|
10
|
+
"build": "tsdown",
|
|
11
|
+
"format": "pnpm biome format --write .",
|
|
12
|
+
"format:check": "pnpm biome format .",
|
|
13
|
+
"lint": "pnpm biome lint .",
|
|
14
|
+
"lint:fix": "pnpm biome check --write ."
|
|
15
|
+
},
|
|
16
|
+
"type": "module",
|
|
17
|
+
"main": "./dist/index.cjs",
|
|
18
|
+
"module": "./dist/index.js",
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
23
|
+
"import": "./dist/index.js",
|
|
24
|
+
"require": "./dist/index.cjs"
|
|
25
|
+
},
|
|
26
|
+
"./rsc": {
|
|
27
|
+
"types": "./dist/rsc/index.d.ts",
|
|
28
|
+
"import": "./dist/rsc/index.js",
|
|
29
|
+
"require": "./dist/rsc/index.cjs"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"repository": {
|
|
33
|
+
"type": "git",
|
|
34
|
+
"url": "https://github.com/SaviruFr/better-themes.git"
|
|
35
|
+
},
|
|
36
|
+
"bugs": {
|
|
37
|
+
"url": "https://github.com/SaviruFr/better-themes/issues"
|
|
38
|
+
},
|
|
39
|
+
"description": "A theme provider for React",
|
|
40
|
+
"files": [
|
|
41
|
+
"dist"
|
|
42
|
+
],
|
|
43
|
+
"homepage": "https://better-themes.netlify.app",
|
|
44
|
+
"keywords": [
|
|
45
|
+
"react",
|
|
46
|
+
"react-themes",
|
|
47
|
+
"dark-mode",
|
|
48
|
+
"light-mode",
|
|
49
|
+
"theme-provider",
|
|
50
|
+
"ssr",
|
|
51
|
+
"nextjs",
|
|
52
|
+
"remix",
|
|
53
|
+
"vite"
|
|
54
|
+
],
|
|
55
|
+
"license": "MIT",
|
|
56
|
+
"devDependencies": {
|
|
57
|
+
"@changesets/changelog-github": "^0.5.2",
|
|
58
|
+
"@changesets/cli": "^2.29.8",
|
|
59
|
+
"@types/react": "^19.2.7",
|
|
60
|
+
"@types/react-dom": "^19.2.3",
|
|
61
|
+
"tsdown": "^0.18.4"
|
|
62
|
+
},
|
|
63
|
+
"peerDependencies": {
|
|
64
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
65
|
+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
66
|
+
}
|
|
67
|
+
}
|