fix: dark mode

Author: Agilulfo1820

examples/playground/src/app/providers/VechainKitProviderWrapper.tsx

@@ -226,7 +226,7 @@ export function VechainKitProviderWrapper({ children }: Props) {
             ]}
             darkMode={isDarkMode}
             network={{
-                type: 'test',
+                type: 'main',
                 // nodeUrl: 'http://localhost:8669',
             }}
             allowCustomTokens={true}

packages/vechain-kit/src/theme/theme.tsx

@@ -16,10 +16,10 @@ import {
 } from './tokens';
 
 /**
- * Best-effort RGBA helper that handles hex (`#rrggbb`), `rgb(...)` and
- * `rgba(...)` inputs. Mirrors the logic in `tokens.ts:applyOpacity` (kept
- * inline so theme.tsx doesn't pull in the heavier helper that depends on
- * `window`).
+ * Opacity helper that handles hex / rgb(a) literals directly and falls back to
+ * `color-mix` for anything else (CSS var refs, named colors, etc.) so the
+ * resolved color tracks host theme changes at paint time. Mirrors
+ * `tokens.ts:applyOpacity`.
  */
 const applyOpacityHelper = (color: string, opacity: number): string => {
     const rgba = color.match(
@@ -35,7 +35,8 @@ const applyOpacityHelper = (color: string, opacity: number): string => {
         const b = parseInt(hex.slice(4, 6), 16);
         return `rgba(${r}, ${g}, ${b}, ${opacity})`;
     }
-    return color;
+    const percent = Math.round(opacity * 10000) / 100;
+    return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
 };
 
 // minimal theme that completely disables global styles

packages/vechain-kit/src/theme/tokens.ts

@@ -230,36 +230,14 @@ function applyOpacity(color: string, opacity: number): string {
         return hexToRgba(color, opacity);
     }
 
-    // Try to parse named colors or other formats by creating a temporary element
-    // This handles CSS named colors like 'red', 'blue', etc.
-    // Only works in browser environment (not SSR)
-    if (
-        typeof window !== 'undefined' &&
-        typeof document !== 'undefined' &&
-        document.body
-    ) {
-        try {
-            const tempEl = document.createElement('div');
-            tempEl.style.color = color;
-            document.body.appendChild(tempEl);
-            const computedColor = window.getComputedStyle(tempEl).color;
-            document.body.removeChild(tempEl);
-
-            // If we got a valid rgb/rgba color, extract and apply opacity
-            const computedMatch = computedColor.match(
-                /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/,
-            );
-            if (computedMatch) {
-                return `rgba(${computedMatch[1]}, ${computedMatch[2]}, ${computedMatch[3]}, ${opacity})`;
-            }
-        } catch {
-            // Fall through to fallback
-        }
-    }
-
-    // Fallback: return as-is (for SSR or unsupported formats)
-    // In practice, users should use hex or rgba colors
-    return color;
+    // For CSS var() references, named colors, or any other format, emit a
+    // color-mix expression so the browser resolves the underlying color at
+    // paint time. This keeps the result reactive to host theme changes (e.g.
+    // next-themes toggling html.dark) — snapshotting via a temporary DOM
+    // element here would freeze whichever value the host had applied at
+    // render time, leaving downstream tokens one toggle behind.
+    const percent = Math.round(opacity * 10000) / 100;
+    return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
 }
 
 /**