fix: improve dark mode support

playground/src/pages/misc/DarkModeDemo.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+useControls('fpsgraph')
+useControls({
+  slider: {
+    label: 'Slider',
+    value: 1,
+    min: 0,
+    max: 10,
+    step: 0.1,
+  },
+  darkMode: {
+    label: isDark.value ? 'Light' : 'Dark',
+    type: 'button',
+    variant: 'secondary',
+    onClick: () => {
+      toggleDark()
+    },
+    icon: isDark.value ? 'i-carbon-sun' : 'i-carbon-moon',
+    size: 'block',
+  },
+})
+</script>
+
+<template>
+  <div class="w-full h-full bg-white dark:bg-black">
+    <button @click="toggleDark">
+      {{ isDark ? 'Light' : 'Dark' }}
+    </button>
+    <TresLeches />
+  </div>
+</template>

playground/src/router/routes/misc.ts

@@ -4,4 +4,9 @@ export const miscRoutes = [
     name: 'FPSgraph',
     component: () => import('../../pages/misc/FPSgraphDemo.vue'),
   },
+  {
+    path: '/misc/dark-mode',
+    name: 'DarkMode',
+    component: () => import('../../pages/misc/DarkModeDemo.vue'),
+  },
 ]

src/components/FPSGraph.vue

@@ -67,7 +67,9 @@ useRafFn(({ timestamp }) => {
   }
 })
 
-const isDark = useDark()
+const isDark = useDark({
+  attribute: 'class',
+})
 </script>
 
 <template>

src/components/SliderControl.vue

@@ -16,7 +16,11 @@ function onChange(event: Event) {
   emit('change', (target as HTMLInputElement).valueAsNumber)
 }
 
-const isDark = useDark()
+const isDark = useDark({
+/*   storageKey: 'leches-color-scheme',
+  selector: '#tresleches-container', */
+  attribute: 'class',
+})
 
 const sliderFilledStyle = computed(() => {
   const colorStart = isDark.value ? '#9ca3af' : '#2d2d2d'

src/components/TresLeches.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
 import { useDraggable } from '../composables/useDraggable'
-import { useWindowSize } from '@vueuse/core'
+import { useDark, useWindowSize } from '@vueuse/core'
 import { dispose, useControlsProvider } from '../composables/useControls'
 import type { LechesControl } from '../types'
 import Folder from './Folder.vue'
@@ -239,10 +239,14 @@ watch(isCollapsed, async (value) => {
 onMounted(() => {
   handleScroll()
 })
+
+useDark({
+  attribute: 'class',
+})
 </script>
 
 <template>
-  <div class="tresleches-container">
+  <div id="tresleches-container" class="tresleches-container">
     <div
       :id="`tres-leches-pane-${uuid}`"
       ref="paneRef"
@@ -254,7 +258,8 @@ onMounted(() => {
       :style="panelStyle"
     >
       <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
-        <div v-if="!isCollapsed && float" class="w-1/3"></div>
+        <div v-if="!isCollapsed && float" class="w-1/3">
+        </div>
         <div v-if="!isCollapsed && float" ref="handleRef" class="tl-cursor-grabbing w-1/3">
           <i class="i-ic-baseline-drag-indicator"></i><i class="i-ic-baseline-drag-indicator"></i><i
             class="i-ic-baseline-drag-indicator"

src/components/__snapshots__/BooleanControl.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`boolean Control > should render a boolean control 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-absolute tl-top-4" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <div class="w-1/3"></div>
@@ -34,7 +34,7 @@ exports[`boolean Control > should render a boolean control 1`] = `
 `;
 
 exports[`boolean Control > should render a boolean control with a label 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-absolute tl-top-4" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <div class="w-1/3"></div>

src/components/__snapshots__/ButtonControl.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`button Controls > should render a block size button 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-relative" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <!--v-if-->
@@ -34,7 +34,7 @@ exports[`button Controls > should render a block size button 1`] = `
 `;
 
 exports[`button Controls > should render a button 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-relative" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <!--v-if-->
@@ -67,7 +67,7 @@ exports[`button Controls > should render a button 1`] = `
 `;
 
 exports[`button Controls > should render a button with a label 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-relative" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <!--v-if-->
@@ -100,7 +100,7 @@ exports[`button Controls > should render a button with a label 1`] = `
 `;
 
 exports[`button Controls > should render a large button 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-relative" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <!--v-if-->
@@ -133,7 +133,7 @@ exports[`button Controls > should render a large button 1`] = `
 `;
 
 exports[`button Controls > should render a primary button variant by default 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-relative" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <!--v-if-->
@@ -166,7 +166,7 @@ exports[`button Controls > should render a primary button variant by default 1`]
 `;
 
 exports[`button Controls > should render a secondary button variant 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-relative" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <!--v-if-->
@@ -199,7 +199,7 @@ exports[`button Controls > should render a secondary button variant 1`] = `
 `;
 
 exports[`button Controls > should render a small button 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-relative" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <!--v-if-->
@@ -232,7 +232,7 @@ exports[`button Controls > should render a small button 1`] = `
 `;
 
 exports[`button Controls > should render an icon on the button 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-relative" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <!--v-if-->

src/components/__snapshots__/ColorControl.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`color Control > should render a color control 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-absolute tl-top-4" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <div class="w-1/3"></div>

src/components/__snapshots__/Folder.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`folder Controls > should render controls within a folder 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-relative" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <!--v-if-->

src/components/__snapshots__/NumberControl.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`number Control > should render a number control 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-absolute tl-top-4" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <div class="w-1/3"></div>

src/components/__snapshots__/SelectControl.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`dropdown Control > should render a select control 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-absolute tl-top-4" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <div class="w-1/3"></div>

src/components/__snapshots__/TextControl.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`text Control > should render a text control 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-absolute tl-top-4" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <div class="w-1/3"></div>

src/components/__snapshots__/TresLeches.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`tresLeches > should mount 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-test" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-absolute tl-top-4" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <div class="w-1/3"></div>

src/components/__snapshots__/VectorControl.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`vector Control > should render multiple numeric inputs 1`] = `
-"<div class="tresleches-container">
+"<div id="tresleches-container" class="tresleches-container">
   <div id="tres-leches-pane-default" class="tl-box-border tl-z-24 tl-bg-white dark:tl-bg-dark-200 tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col tl-rounded-lg tl-absolute tl-top-4" >
     <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 dark:tl-text-gray-600 tl-text-xs">
       <div class="w-1/3"></div>

vite.config.ts

@@ -42,6 +42,10 @@ export default defineConfig({
         presetUno({
           prefix: 'tl-',
           variablePrefix: 'tl-',
+          /* dark: {
+            dark: '.l-dark',
+            light: '.l-light',
+          }, */
         }),
         presetIcons({
           scale: 1.2,