@dheme/next 1.13.0 → 1.14.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/README.md +21 -17
- package/dist/index.d.mts +10 -1
- package/dist/index.d.ts +10 -1
- package/dist/index.js +2 -0
- package/dist/index.mjs +2 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -59,9 +59,12 @@ That's it. Your app has 19 CSS variables applied server-side — zero client-sid
|
|
|
59
59
|
|
|
60
60
|
1. `<DhemeScript>` is a **Server Component** — it calls the Dheme API on the server
|
|
61
61
|
2. It inlines a `<style>` tag with CSS variables for **both** light and dark modes
|
|
62
|
-
3. It inlines a tiny `<script>` (~
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
3. It inlines a tiny `<script>` (~300 bytes) that:
|
|
63
|
+
- Detects the user's mode preference (cookie or `prefers-color-scheme`)
|
|
64
|
+
- Sets `document.documentElement.style.backgroundColor` immediately (white for light, black for dark) — **before any paint** — to prevent the light→dark background flash
|
|
65
|
+
- Applies the `.dark` class
|
|
66
|
+
4. The browser receives HTML with styles and background already applied — **before any paint**
|
|
67
|
+
5. React hydrates, `DhemeProvider` sets `isReady = true` and removes the temporary inline `backgroundColor` — **no API call needed**
|
|
65
68
|
|
|
66
69
|
### Server-side caching
|
|
67
70
|
|
|
@@ -98,20 +101,21 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|
|
98
101
|
}
|
|
99
102
|
```
|
|
100
103
|
|
|
101
|
-
| Prop
|
|
102
|
-
|
|
|
103
|
-
| `theme`
|
|
104
|
-
| `defaultMode`
|
|
105
|
-
| `themeParams`
|
|
106
|
-
| `apiKey`
|
|
107
|
-
| `baseUrl`
|
|
108
|
-
| `nonce`
|
|
109
|
-
| `onGenerateTheme`
|
|
110
|
-
| `proxyUrl`
|
|
111
|
-
| `cookieSync`
|
|
112
|
-
| `persist`
|
|
113
|
-
| `autoApply`
|
|
114
|
-
| `
|
|
104
|
+
| Prop | Type | Default | Description |
|
|
105
|
+
| ------------------- | ------------------------------------------------- | -------------- | ------------------------------------------------------------------------------ |
|
|
106
|
+
| `theme` | `string` | - | **Required.** Primary HEX color. |
|
|
107
|
+
| `defaultMode` | `'light' \| 'dark'` | `'light'` | Initial color mode. Passed to both script and provider. |
|
|
108
|
+
| `themeParams` | `Omit<GenerateThemeRequest, 'theme'>` | - | Additional generation parameters. |
|
|
109
|
+
| `apiKey` | `string` | - | Dheme API key. Server-side only — never sent to the browser. |
|
|
110
|
+
| `baseUrl` | `string` | - | Override API base URL. |
|
|
111
|
+
| `nonce` | `string` | - | CSP nonce for injected style/script tags. |
|
|
112
|
+
| `onGenerateTheme` | `(params) => Promise<GenerateThemeResponse>` | - | Server-side custom theme function. Only used by `DhemeScript`. |
|
|
113
|
+
| `proxyUrl` | `string` | `'/api/dheme'` | Client-side proxy route URL. |
|
|
114
|
+
| `cookieSync` | `boolean` | `true` | Sync mode and params to cookies. |
|
|
115
|
+
| `persist` | `boolean` | `true` | Persist theme in localStorage. |
|
|
116
|
+
| `autoApply` | `boolean` | `true` | Apply CSS variables automatically. |
|
|
117
|
+
| `loadingBackground` | `boolean \| { light?: string; dark?: string }` | `true` | Background color applied to `<html>` while the theme loads. Prevents the light→dark flash when `DhemeScript` applies the dark class after paint. `true` = `#ffffff` / `#000000`, `false` = disabled, or pass custom hex values per mode. |
|
|
118
|
+
| `children` | `React.ReactNode` | - | **Required.** App content. |
|
|
115
119
|
|
|
116
120
|
> For apps that need `onThemeChange`, `onModeChange`, `onError`, or `loadingContent`, use `DhemeScript` + `DhemeProvider` separately (see below).
|
|
117
121
|
|
package/dist/index.d.mts
CHANGED
|
@@ -82,6 +82,15 @@ interface DhemeSetupProps {
|
|
|
82
82
|
persist?: boolean;
|
|
83
83
|
/** Automatically apply CSS variables when theme changes. @default true */
|
|
84
84
|
autoApply?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Aplica um `backgroundColor` de fallback no `<html>` antes do tema carregar,
|
|
87
|
+
* prevenindo o Flash of Unstyled Background (FOUB). Forwarded para o DhemeProvider interno.
|
|
88
|
+
* @default true
|
|
89
|
+
*/
|
|
90
|
+
loadingBackground?: boolean | {
|
|
91
|
+
light?: string;
|
|
92
|
+
dark?: string;
|
|
93
|
+
};
|
|
85
94
|
children: React.ReactNode;
|
|
86
95
|
}
|
|
87
96
|
interface GenerateThemeStylesOptions {
|
|
@@ -125,6 +134,6 @@ declare function DhemeScript({ apiKey, theme, themeParams, defaultMode, baseUrl,
|
|
|
125
134
|
* For apps that need client-side callbacks (onThemeChange, onModeChange, onError, loadingContent),
|
|
126
135
|
* use DhemeScript + DhemeProvider separately.
|
|
127
136
|
*/
|
|
128
|
-
declare function DhemeSetup({ theme, defaultMode, themeParams, apiKey, baseUrl, nonce, onGenerateTheme, proxyUrl, cookieSync, persist, autoApply, children, }: DhemeSetupProps): Promise<React.ReactElement>;
|
|
137
|
+
declare function DhemeSetup({ theme, defaultMode, themeParams, apiKey, baseUrl, nonce, onGenerateTheme, proxyUrl, cookieSync, persist, autoApply, loadingBackground, children, }: DhemeSetupProps): Promise<React.ReactElement>;
|
|
129
138
|
|
|
130
139
|
export { DhemeProvider, type DhemeProviderProps, DhemeScript, type DhemeScriptProps, DhemeSetup, type DhemeSetupProps, type GenerateThemeStylesOptions };
|
package/dist/index.d.ts
CHANGED
|
@@ -82,6 +82,15 @@ interface DhemeSetupProps {
|
|
|
82
82
|
persist?: boolean;
|
|
83
83
|
/** Automatically apply CSS variables when theme changes. @default true */
|
|
84
84
|
autoApply?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Aplica um `backgroundColor` de fallback no `<html>` antes do tema carregar,
|
|
87
|
+
* prevenindo o Flash of Unstyled Background (FOUB). Forwarded para o DhemeProvider interno.
|
|
88
|
+
* @default true
|
|
89
|
+
*/
|
|
90
|
+
loadingBackground?: boolean | {
|
|
91
|
+
light?: string;
|
|
92
|
+
dark?: string;
|
|
93
|
+
};
|
|
85
94
|
children: React.ReactNode;
|
|
86
95
|
}
|
|
87
96
|
interface GenerateThemeStylesOptions {
|
|
@@ -125,6 +134,6 @@ declare function DhemeScript({ apiKey, theme, themeParams, defaultMode, baseUrl,
|
|
|
125
134
|
* For apps that need client-side callbacks (onThemeChange, onModeChange, onError, loadingContent),
|
|
126
135
|
* use DhemeScript + DhemeProvider separately.
|
|
127
136
|
*/
|
|
128
|
-
declare function DhemeSetup({ theme, defaultMode, themeParams, apiKey, baseUrl, nonce, onGenerateTheme, proxyUrl, cookieSync, persist, autoApply, children, }: DhemeSetupProps): Promise<React.ReactElement>;
|
|
137
|
+
declare function DhemeSetup({ theme, defaultMode, themeParams, apiKey, baseUrl, nonce, onGenerateTheme, proxyUrl, cookieSync, persist, autoApply, loadingBackground, children, }: DhemeSetupProps): Promise<React.ReactElement>;
|
|
129
138
|
|
|
130
139
|
export { DhemeProvider, type DhemeProviderProps, DhemeScript, type DhemeScriptProps, DhemeSetup, type DhemeSetupProps, type GenerateThemeStylesOptions };
|
package/dist/index.js
CHANGED
|
@@ -221,6 +221,7 @@ async function DhemeSetup({
|
|
|
221
221
|
cookieSync,
|
|
222
222
|
persist,
|
|
223
223
|
autoApply,
|
|
224
|
+
loadingBackground,
|
|
224
225
|
children
|
|
225
226
|
}) {
|
|
226
227
|
return import_react5.default.createElement(
|
|
@@ -237,6 +238,7 @@ async function DhemeSetup({
|
|
|
237
238
|
cookieSync,
|
|
238
239
|
persist,
|
|
239
240
|
autoApply,
|
|
241
|
+
loadingBackground,
|
|
240
242
|
children
|
|
241
243
|
})
|
|
242
244
|
);
|
package/dist/index.mjs
CHANGED
|
@@ -176,6 +176,7 @@ async function DhemeSetup({
|
|
|
176
176
|
cookieSync,
|
|
177
177
|
persist,
|
|
178
178
|
autoApply,
|
|
179
|
+
loadingBackground,
|
|
179
180
|
children
|
|
180
181
|
}) {
|
|
181
182
|
return React3.createElement(
|
|
@@ -192,6 +193,7 @@ async function DhemeSetup({
|
|
|
192
193
|
cookieSync,
|
|
193
194
|
persist,
|
|
194
195
|
autoApply,
|
|
196
|
+
loadingBackground,
|
|
195
197
|
children
|
|
196
198
|
})
|
|
197
199
|
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dheme/next",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "Next.js App Router bindings for Dheme SDK with server-side theme generation",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"@dheme/sdk": "^1.1.0",
|
|
59
|
-
"@dheme/react": "^2.
|
|
59
|
+
"@dheme/react": "^2.16.0"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@types/react": "^18.2.0",
|