@olwiba/cn 0.1.57 → 0.1.59
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/dist/index.d.ts +21 -6
- package/dist/index.js +6 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/styles/preset.css +16 -3
package/dist/index.d.ts
CHANGED
|
@@ -1184,19 +1184,34 @@ declare function fireConfetti(options?: ConfettiOptions): void;
|
|
|
1184
1184
|
* Reads the user's stored theme preference from localStorage and applies the
|
|
1185
1185
|
* `.dark` class to <html> before first paint, preventing a flash of the wrong theme.
|
|
1186
1186
|
*
|
|
1187
|
-
*
|
|
1187
|
+
* The `.dark` class this writes is the theme's source of truth. Code that needs
|
|
1188
|
+
* the theme as a value rather than as a `dark:` variant should call
|
|
1189
|
+
* `useResolvedTheme`, which observes this class.
|
|
1188
1190
|
*
|
|
1189
|
-
*
|
|
1190
|
-
*
|
|
1191
|
-
*
|
|
1191
|
+
* `defaultTheme` decides what a visitor with no stored preference gets:
|
|
1192
|
+
*
|
|
1193
|
+
* dark the historic behaviour, and still the default here so no existing
|
|
1194
|
+
* consumer changes without asking for it
|
|
1195
|
+
* light start light regardless of the device
|
|
1196
|
+
* system follow `prefers-color-scheme`
|
|
1197
|
+
*
|
|
1198
|
+
* Worth stating plainly, because the comment this replaces claimed otherwise:
|
|
1199
|
+
* nothing here consulted `prefers-color-scheme`, so every first-time visitor
|
|
1200
|
+
* got a dark app whatever their device was set to. User testing read that as
|
|
1201
|
+
* "the product is too dark" when it was really "the product ignored me".
|
|
1192
1202
|
*
|
|
1193
1203
|
* Usage (in your root layout / document shell):
|
|
1194
1204
|
* <head>
|
|
1195
|
-
* <ThemeScript />
|
|
1205
|
+
* <ThemeScript defaultTheme="light" />
|
|
1196
1206
|
* ...
|
|
1197
1207
|
* </head>
|
|
1198
1208
|
*/
|
|
1199
|
-
|
|
1209
|
+
type ThemeScriptDefault = 'light' | 'dark' | 'system';
|
|
1210
|
+
interface ThemeScriptProps {
|
|
1211
|
+
/** What a visitor with no stored preference gets. @default "dark" */
|
|
1212
|
+
defaultTheme?: ThemeScriptDefault;
|
|
1213
|
+
}
|
|
1214
|
+
declare function ThemeScript({ defaultTheme }?: ThemeScriptProps): React$1.JSX.Element;
|
|
1200
1215
|
|
|
1201
1216
|
interface EnchantedProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1202
1217
|
children: React$1.ReactNode;
|
package/dist/index.js
CHANGED
|
@@ -7666,9 +7666,12 @@ function fireConfetti(options) {
|
|
|
7666
7666
|
confetti({ ...base, particleCount: side, angle: 60, origin: { x: 0, y: 1 } });
|
|
7667
7667
|
confetti({ ...base, particleCount: side, angle: 120, origin: { x: 1, y: 1 } });
|
|
7668
7668
|
}
|
|
7669
|
-
|
|
7670
|
-
|
|
7671
|
-
return
|
|
7669
|
+
function buildScript(defaultTheme) {
|
|
7670
|
+
const fallback = defaultTheme === "system" ? "window.matchMedia('(prefers-color-scheme: dark)').matches" : defaultTheme === "dark" ? "true" : "false";
|
|
7671
|
+
return `(function(){try{var t=localStorage.getItem('theme');var d=t==='dark'||t==='light'?t==='dark':${fallback};document.documentElement.classList.toggle('dark',d)}catch(e){}})()`;
|
|
7672
|
+
}
|
|
7673
|
+
function ThemeScript({ defaultTheme = "dark" } = {}) {
|
|
7674
|
+
return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: buildScript(defaultTheme) } });
|
|
7672
7675
|
}
|
|
7673
7676
|
var GLINTS = [
|
|
7674
7677
|
// perimeter
|