vueless 0.0.492 → 0.0.493

package/constants.js

@@ -19,7 +19,7 @@ export const DEFAULT_GRAY_COLOR = COOL_COLOR;
 export const DEFAULT_RING = 4; /* pixels */
 export const DEFAULT_RING_OFFSET = 0; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
-export const DEFAULT_RING_OFFSET_COLOR_DARK = "#1f2937"; // gray-800
+export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
 export const DEFAULT_ROUNDING = 8; /* pixels */
 
 /* Vueless supported colors and shades */

package/index.ts

@@ -38,7 +38,8 @@ export function createVueless(options: CreateVuelessOptions = {}) {
     app.provide(LoaderProgressSymbol, loaderProgress);
   };
 
-  themeInit();
+  /* init theme after first render */
+  setTimeout(themeInit, 0);
 
   return {
     install,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.492",
+  "version": "0.0.493",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/preset-tailwind.js

@@ -96,7 +96,7 @@ export const vuelessTailwindConfig = {
         dynamic: "var(--vl-ring-offset)",
       },
       ringOffsetColor: {
-        "color-dynamic": twColorWithOpacity("--vl-ring-offset-color"),
+        DEFAULT: twColorWithOpacity("--vl-ring-offset-color"),
       },
     },
     configViewer: {

package/utils/theme.ts

@@ -144,12 +144,26 @@ function setDarkMode(config: InternalThemeConfig) {
     ? isCSR && localStorage.removeItem(DARK_MODE_SELECTOR)
     : isCSR && localStorage.setItem(DARK_MODE_SELECTOR, Number(config?.darkMode).toString());
 
-  const storedDarkMode = isCSR ? localStorage.getItem(DARK_MODE_SELECTOR) : null;
+  let storedDarkMode = null;
+  let darkModeAsClass = null;
 
-  const isDarkMode =
-    storedDarkMode !== null
-      ? !!Number(storedDarkMode)
-      : !!(config?.darkMode ?? vuelessConfig.darkMode ?? config?.systemDarkMode);
+  if (isCSR) {
+    const classList = document.documentElement.classList;
+
+    storedDarkMode = localStorage.getItem(DARK_MODE_SELECTOR);
+    darkModeAsClass = classList.contains(DARK_MODE_SELECTOR) ? true : null;
+    darkModeAsClass = classList.contains(LIGHT_MODE_SELECTOR) ? false : null;
+  }
+
+  let isDarkMode = !!(config?.darkMode ?? vuelessConfig.darkMode ?? config?.systemDarkMode);
+
+  if (storedDarkMode !== null) {
+    isDarkMode = !!Number(storedDarkMode);
+  }
+
+  if (darkModeAsClass !== null) {
+    isDarkMode = darkModeAsClass;
+  }
 
   if (isCSR) {
     if (isDarkMode) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.492",
+  "version": "0.0.493",
   "contributions": {
     "html": {
       "description-markup": "markdown",