@marcoschwartz/lite-ui 0.24.8 → 0.24.9

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.
Files changed (8) hide show
  1. package/dist/index.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +43 -16
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +43 -16
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1305,7 +1305,7 @@ declare function ThemeProvider({ children, defaultTheme, defaultColorMode }: The
1305
1305
  * This prevents flickering by setting the theme before the page renders
1306
1306
  * Must be inlined in the HTML <head> as a blocking script
1307
1307
  */
1308
- declare const themeScript = "\n(function() {\n try {\n // Get stored preferences\n const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n const storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n // Determine color mode (system, light, or dark)\n let colorMode = storedColorMode;\n if (!colorMode || colorMode === 'system') {\n colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n\n // Set attributes before render\n document.documentElement.setAttribute('data-theme', storedTheme);\n document.documentElement.setAttribute('data-color-mode', colorMode);\n\n // Add dark class for Tailwind\n if (colorMode === 'dark') {\n document.documentElement.classList.add('dark');\n } else {\n document.documentElement.classList.remove('dark');\n }\n } catch (e) {\n console.error('Failed to initialize theme:', e);\n }\n})();\n";
1308
+ declare const themeScript = "\n(function() {\n try {\n // Get stored preferences\n var storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n var storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n // Determine color mode (system, light, or dark)\n var colorMode = storedColorMode;\n if (!colorMode || colorMode === 'system') {\n colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n\n // Set attributes before render\n var html = document.documentElement;\n html.setAttribute('data-theme', storedTheme);\n html.setAttribute('data-color-mode', colorMode);\n\n // Set color-scheme for browser UI elements (scrollbars, form controls)\n html.style.colorScheme = colorMode;\n\n // Add dark class for Tailwind\n if (colorMode === 'dark') {\n html.classList.add('dark');\n // Set critical inline styles as fallback before CSS loads\n html.style.backgroundColor = 'hsl(0 0% 3.9%)';\n html.style.color = 'hsl(0 0% 98%)';\n } else {\n html.classList.remove('dark');\n html.style.backgroundColor = 'hsl(0 0% 100%)';\n html.style.color = 'hsl(0 0% 3.9%)';\n }\n } catch (e) {\n // Silent fail - will use CSS defaults\n }\n})();\n";
1309
1309
  declare function getThemeScript(): string;
1310
1310
 
1311
1311
  interface IconProps {
package/dist/index.d.ts CHANGED
@@ -1305,7 +1305,7 @@ declare function ThemeProvider({ children, defaultTheme, defaultColorMode }: The
1305
1305
  * This prevents flickering by setting the theme before the page renders
1306
1306
  * Must be inlined in the HTML <head> as a blocking script
1307
1307
  */
1308
- declare const themeScript = "\n(function() {\n try {\n // Get stored preferences\n const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n const storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n // Determine color mode (system, light, or dark)\n let colorMode = storedColorMode;\n if (!colorMode || colorMode === 'system') {\n colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n\n // Set attributes before render\n document.documentElement.setAttribute('data-theme', storedTheme);\n document.documentElement.setAttribute('data-color-mode', colorMode);\n\n // Add dark class for Tailwind\n if (colorMode === 'dark') {\n document.documentElement.classList.add('dark');\n } else {\n document.documentElement.classList.remove('dark');\n }\n } catch (e) {\n console.error('Failed to initialize theme:', e);\n }\n})();\n";
1308
+ declare const themeScript = "\n(function() {\n try {\n // Get stored preferences\n var storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n var storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n // Determine color mode (system, light, or dark)\n var colorMode = storedColorMode;\n if (!colorMode || colorMode === 'system') {\n colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n\n // Set attributes before render\n var html = document.documentElement;\n html.setAttribute('data-theme', storedTheme);\n html.setAttribute('data-color-mode', colorMode);\n\n // Set color-scheme for browser UI elements (scrollbars, form controls)\n html.style.colorScheme = colorMode;\n\n // Add dark class for Tailwind\n if (colorMode === 'dark') {\n html.classList.add('dark');\n // Set critical inline styles as fallback before CSS loads\n html.style.backgroundColor = 'hsl(0 0% 3.9%)';\n html.style.color = 'hsl(0 0% 98%)';\n } else {\n html.classList.remove('dark');\n html.style.backgroundColor = 'hsl(0 0% 100%)';\n html.style.color = 'hsl(0 0% 3.9%)';\n }\n } catch (e) {\n // Silent fail - will use CSS defaults\n }\n})();\n";
1309
1309
  declare function getThemeScript(): string;
1310
1310
 
1311
1311
  interface IconProps {
package/dist/index.js CHANGED
@@ -276,10 +276,24 @@ function ThemeProvider({
276
276
  setMounted(true);
277
277
  const storedTheme = localStorage.getItem("lite-ui-theme");
278
278
  const storedColorMode = localStorage.getItem("lite-ui-color-mode");
279
- const currentColorMode = document.documentElement.getAttribute("data-color-mode");
279
+ let resolved;
280
+ if (!storedColorMode || storedColorMode === "system") {
281
+ resolved = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
282
+ } else {
283
+ resolved = storedColorMode;
284
+ }
280
285
  if (storedTheme) setThemeNameState(storedTheme);
281
286
  if (storedColorMode) setColorModeState(storedColorMode);
282
- if (currentColorMode) setResolvedColorMode(currentColorMode);
287
+ setResolvedColorMode(resolved);
288
+ const html = document.documentElement;
289
+ html.setAttribute("data-theme", storedTheme || "default");
290
+ html.setAttribute("data-color-mode", resolved);
291
+ html.style.colorScheme = resolved;
292
+ if (resolved === "dark") {
293
+ html.classList.add("dark");
294
+ } else {
295
+ html.classList.remove("dark");
296
+ }
283
297
  }, []);
284
298
  const theme = themes[themeName];
285
299
  const setTheme = (newThemeName) => {
@@ -300,11 +314,13 @@ function ThemeProvider({
300
314
  resolved = mode;
301
315
  }
302
316
  setResolvedColorMode(resolved);
303
- document.documentElement.setAttribute("data-color-mode", resolved);
317
+ const html = document.documentElement;
318
+ html.setAttribute("data-color-mode", resolved);
319
+ html.style.colorScheme = resolved;
304
320
  if (resolved === "dark") {
305
- document.documentElement.classList.add("dark");
321
+ html.classList.add("dark");
306
322
  } else {
307
- document.documentElement.classList.remove("dark");
323
+ html.classList.remove("dark");
308
324
  }
309
325
  };
310
326
  const toggleColorMode = () => {
@@ -321,11 +337,13 @@ function ThemeProvider({
321
337
  if (colorMode === "system") {
322
338
  const resolved = e.matches ? "dark" : "light";
323
339
  setResolvedColorMode(resolved);
324
- document.documentElement.setAttribute("data-color-mode", resolved);
340
+ const html = document.documentElement;
341
+ html.setAttribute("data-color-mode", resolved);
342
+ html.style.colorScheme = resolved;
325
343
  if (resolved === "dark") {
326
- document.documentElement.classList.add("dark");
344
+ html.classList.add("dark");
327
345
  } else {
328
- document.documentElement.classList.remove("dark");
346
+ html.classList.remove("dark");
329
347
  }
330
348
  }
331
349
  };
@@ -9091,27 +9109,36 @@ var themeScript = `
9091
9109
  (function() {
9092
9110
  try {
9093
9111
  // Get stored preferences
9094
- const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';
9095
- const storedColorMode = localStorage.getItem('lite-ui-color-mode');
9112
+ var storedTheme = localStorage.getItem('lite-ui-theme') || 'default';
9113
+ var storedColorMode = localStorage.getItem('lite-ui-color-mode');
9096
9114
 
9097
9115
  // Determine color mode (system, light, or dark)
9098
- let colorMode = storedColorMode;
9116
+ var colorMode = storedColorMode;
9099
9117
  if (!colorMode || colorMode === 'system') {
9100
9118
  colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
9101
9119
  }
9102
9120
 
9103
9121
  // Set attributes before render
9104
- document.documentElement.setAttribute('data-theme', storedTheme);
9105
- document.documentElement.setAttribute('data-color-mode', colorMode);
9122
+ var html = document.documentElement;
9123
+ html.setAttribute('data-theme', storedTheme);
9124
+ html.setAttribute('data-color-mode', colorMode);
9125
+
9126
+ // Set color-scheme for browser UI elements (scrollbars, form controls)
9127
+ html.style.colorScheme = colorMode;
9106
9128
 
9107
9129
  // Add dark class for Tailwind
9108
9130
  if (colorMode === 'dark') {
9109
- document.documentElement.classList.add('dark');
9131
+ html.classList.add('dark');
9132
+ // Set critical inline styles as fallback before CSS loads
9133
+ html.style.backgroundColor = 'hsl(0 0% 3.9%)';
9134
+ html.style.color = 'hsl(0 0% 98%)';
9110
9135
  } else {
9111
- document.documentElement.classList.remove('dark');
9136
+ html.classList.remove('dark');
9137
+ html.style.backgroundColor = 'hsl(0 0% 100%)';
9138
+ html.style.color = 'hsl(0 0% 3.9%)';
9112
9139
  }
9113
9140
  } catch (e) {
9114
- console.error('Failed to initialize theme:', e);
9141
+ // Silent fail - will use CSS defaults
9115
9142
  }
9116
9143
  })();
9117
9144
  `;