style: Implement dark mode

package.json

@@ -56,6 +56,7 @@
   },
   "dependencies": {
     "@unocss/core": "^0.57.7",
+    "@unocss/preset-mini": "^0.57.7",
     "@vueuse/components": "^10.6.1",
     "vite-plugin-css-injected-by-js": "^3.3.0"
   },

src/components/BooleanControl.vue

@@ -23,7 +23,7 @@ function onKeydown(event: KeyboardEvent) {
 
 <template>
   <div class="tl-flex tl-px-4 tl-justify-start tl-gap-2 tl-items-center tl-mb-2 tl-min-h-32px">
-    <label class="tl-text-gray-500 tl-w-1/3">{{ label }}</label>
+    <label class="tl-text-secondary tl-w-1/3">{{ label }}</label>
     <input
       :id="control.uniqueKey"
       :checked="control.value"
@@ -39,7 +39,10 @@ function onKeydown(event: KeyboardEvent) {
         tabindex="0"
         role="checkbox"
         :aria-checked="control.value.toString()"
-        :class="{ 'tl-bg-dark-500': control.value, 'tl-bg-gray-200': !control.value }"
+        :class="{
+          'tl-bg-dark-500': control.value, 
+          'tl-bg-gray-200': !control.value, 
+        }"
         class="tl-w-4 
           tl-h-4 
           tl-flex 
@@ -50,7 +53,9 @@ function onKeydown(event: KeyboardEvent) {
           tl-border-gray-300 
           tl-mr-2 
           tl-transition-colors 
-          tl-duration-200"
+          tl-duration-200
+          dark:tl-bg-slate-400/50
+        "
         @keydown="onKeydown"
       >
         <i

src/components/ButtonControl.vue

@@ -20,9 +20,7 @@ const classes = computed(() => {
     :class="classes"
     @click="control.value.onClick"
   >
-    <i
-      :class="[control.value.icon, control.value.label ? 'mr-1' : '']"
-    />
+    <i :class="[control.value.icon, control.value.label ? 'mr-1' : '']" />
     {{ control.value.label }}
   </button>
 </template>
@@ -51,17 +49,10 @@ const classes = computed(() => {
 }
 
 .leches-btn-primary {
-  @apply tl-bg-gray-100 tl-text-gray-700;
-}
-.leches-btn-primary:hover {
-  @apply tl-bg-gray-200;
+  @apply tl-btn-primary;
 }
 
 .leches-btn-secondary {
-  @apply tl-bg-dark-700 tl-text-light-100;
-}
-
-.leches-btn-secondary:hover {
-  @apply tl-bg-dark-600;
+  @apply tl-btn-secondary;
 }
-</style>
+</style>

src/components/ColorControl.vue

@@ -16,7 +16,7 @@ function onChange(event: Event) {
 
 <template>
   <div class="tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2">
-    <label class="tl-text-gray-500 tl-w-1/3">{{ label }}</label>
+    <label class="tl-text-secondary tl-w-1/3">{{ label }}</label>
     <input
       :id="control.uniqueKey"
       tabindex="0"
@@ -33,13 +33,13 @@ function onChange(event: Event) {
       :aria-label="label"
       :value="control.value"
       class="
+        tl-text-primary
+        tl-bg-secondary
         tl-p-2 
         tl-w-2/3
         tl-rounded
         tl-text-right
         tl-text-xs
-        tl-text-gray-400
-        tl-bg-gray-100
         tl-border-none
         tl-font-sans
       "

src/components/ControlLabel.vue

@@ -11,12 +11,12 @@ defineProps<{
   <label
     :for="control.uniqueKey"
     :title="label"
-    class="tl-text-gray-500 tl-w-1/3 tl-truncate"
+    class="tl-text-secondary tl-w-1/3 tl-truncate"
   >
     <i
       v-if="control.icon"
       :class="control.icon"
     />
     <template v-else>{{ label }}</template>
   </label>
-</template>
+</template>

src/components/FPSGraph.vue

@@ -44,36 +44,34 @@ useRafFn(({ timestamp }) => {
 
 <template>
   <div class="tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2">
-    <label class="tl-text-gray-500 tl-w-1/3">{{ label }}</label>
+    <label class="tl-text-secondary tl-w-1/3">{{ label }}</label>
 
     <div
       class="
+        tl-bg-secondary
         tl-relative
         tl-w-2/3
         tl-p-1
         tl-rounded
         tl-text-right
         tl-text-xs
-        tl-text-gray-400
-        tl-bg-gray-100
         tl-focus:border-gray-200
         tl-outline-none
         tl-border-none
         tl-font-sans
       "
     >
-      <div class="tl-absolute tl-bottom-0.5 tl-right-0.5 tl-font-sans tl-text-xs">
+      <div class="tl-text-primary tl-absolute tl-bottom-0.5 tl-right-0.5 tl-font-sans tl-text-xs">
         {{ Math.round(fps) }} FPS
       </div>
       <svg
         :width="width"
         :height="height"
         xmlns="http://www.w3.org/2000/svg"
-        class="tl-bg-gray-100"
+        fill="none"
       >
         <polyline
           :points="points"
-          fill="none"
           stroke="lightgray"
           :stroke-width="strokeWidth"
           stroke-linecap="round"

src/components/Folder.vue

@@ -20,18 +20,18 @@ const toggle = () => {
 </script>
 
 <template>
-  <div class="tl-mb-4">
+  <div class="tl-mb-4 tl-w-full tl-border-x-none tl-border-solid tl-border-1 tl-border-primary">
     <button
       class="
+        tl-bg-primary
+        tl-text-primary
         tl-flex
         tl-items-center
         tl-justify-between
         tl-w-full
         tl-py-2
         tl-px-4
-        tl-bg-gray-100
         tl-border-none
-        tl-text-gray-400
         tl-font-bold
         tl-text-xs
         tl-font-sans
@@ -55,7 +55,7 @@ const toggle = () => {
     >
       <div
         v-show="isOpen"
-        class="tl-bg-white tl-rounded-b tl-pt-4"
+        class="tl-bg-white tl-rounded-b tl-pt-4 tl-bg-primary"
         role="menu"
       >
         <template

src/components/NumberControl.vue

@@ -66,13 +66,13 @@ watch(mouse.x, (newValue) => {
       :id="control.uniqueKey"
       :value="control.value"
       class="
+        tl-bg-secondary
+        tl-text-primary
         tl-p-2
         tl-w-1/3
         tl-rounded
         tl-text-right
         tl-text-xs
-        tl-text-gray-400
-        tl-bg-gray-100
         tl-focus:border-gray-200
         tl-outline-none
         tl-border-none

src/components/SelectControl.vue

@@ -24,13 +24,13 @@ function onChange(event: Event) {
       :id="control.uniqueKey"
       :value="control.value"
       class="
+        tl-bg-secondary
+        tl-text-primary
         tl-p-2
         tl-w-2/3
         tl-rounded
         tl-text-left
         tl-text-xs
-        tl-text-gray-400
-        tl-bg-gray-100
         focus:tl-border-gray-200
         tl-outline-none
         tl-border-none

src/components/SliderControl.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useMouse } from '@vueuse/core'
+import { useMouse, useDark } from '@vueuse/core'
 import type { Control } from '../types'
 import ControlLabel from './ControlLabel.vue'
 
@@ -11,13 +11,15 @@ const props = defineProps<{
 
 const emit = defineEmits(['change'])
 
+const isDark = useDark()
+
 function onChange(event: Event) {
   const { target } = event
   emit('change', (target as HTMLInputElement).valueAsNumber)
 }
 
 const sliderFilledStyle = computed(() => ({
-  backgroundImage: `linear-gradient(to right, #333 0% ${
+  backgroundImage: `linear-gradient(to right, ${isDark.value ? '#71717a' : '#333'} 0% ${
     (100 * ((props.control.value as number) - (props.control.min || 0)))
     / ((props.control.max || 100) - (props.control.min || 0))
   }%, #e2e2e2 0%)`,
@@ -80,14 +82,15 @@ watch(mouse.x, (newValue) => {
     >
     <input
       :value="control.value"
-      class="
+      class="  
+        tl-bg-secondary
+        tl-text-primary
         tl-p-2
         tl-w-1/4
         tl-rounded
         tl-text-right
         tl-text-xs
         tl-text-gray-400
-        tl-bg-gray-100
         tl-focus:border-gray-200
         tl-outline-none
         tl-border-none
@@ -114,10 +117,10 @@ input[type='range'] {
 }
 
 input[type='range']::-webkit-slider-thumb {
-  @apply tl-h-4 tl-w-3 tl-border-2 tl-bg-dark-200 tl-rounded-sm tl-cursor-pointer tl-appearance-none tl-shadow-lg;
+  @apply tl-h-4 tl-w-3 tl-border-2 tl-rounded-sm tl-cursor-pointer tl-bg-dark-200 dark:tl-bg-zinc-500 tl-appearance-none tl-shadow-lg;
 }
 
 input[type='range']::-moz-range-thumb {
-  @apply tl-h-4 tl-w-3 tl-border-2 tl-bg-dark-200 tl-rounded-sm tl-cursor-pointer tl-appearance-none tl-shadow-lg;
+  @apply tl-h-4 tl-w-3 tl-border-2 tl-rounded-sm tl-cursor-pointer tl-bg-dark-200 dark:tl-bg-zinc-500 tl-appearance-none tl-shadow-lg;
 }
 </style>

src/components/TextControl.vue

@@ -26,17 +26,20 @@ function onChange(event: Event) {
       :value="control.value"
       type="text"
       tabindex="0"
-      class="
+      class=" 
+        tl-bg-secondary
+        tl-text-primary
         tl-p-2
         tl-w-2/3
         tl-rounded
         tl-text-right
         tl-text-xs
-        tl-text-gray-400
-        tl-bg-gray-100
         focus:tl-border-gray-200
+        placeholder:tl-text-gray-300
+        placeholder:dark:tl-text-gray-400
         tl-border-none
-        tl-font-sans"
+        tl-font-sans
+      "
       :aria-label="label"
       placeholder="Enter value here..."
       @change="onChange"

src/components/TresLeches.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { ref, toRefs, unref, computed } from 'vue'
-import { useWindowSize } from '@vueuse/core'
+import { useWindowSize, useDark, useToggle } from '@vueuse/core'
 import { UseDraggable } from '../composables/useDraggable/component'
 import { useControlsProvider } from '../composables/useControls'
 import type { Control } from '../types'
@@ -14,6 +14,8 @@ const props = defineProps<{
 }>()
 
 const { uuid } = toRefs(props)
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
 
 const { width } = useWindowSize()
 
@@ -55,29 +57,22 @@ const groupedControls = computed(() => {
   >
     <div
       tabindex="0"
-      class="tl-bg-white tl-shadow-xl tl-rounded tl-border-4 tl-border-solid tl-border-black"
+      class="tl-shadow-xl tl-rounded tl-border-4 tl-border-solid tl-bg-primary tl-border-primary tl-overflow-hidden tl-w-full tl-h-full tl-flex tl-flex-col tl-justify-between"
     >
       <header
         ref="handle"
-        class="tl-relative tl-cursor-grabbing tl-p-4 tl-flex tl-justify-between tl-text-gray-200 tl-relative"
+        class="tl-relative tl-cursor-grabbing tl-p-4 tl-flex tl-justify-evenly tl-text-gray-200"
       >
-        <i
-          class="tl-h-4
-            tl-w-4
-            tl-p-1.5
-            tl-flex
-            tl-items-center
-            tl-line-height-0
-            tl-rounded-full
-            tl-bg-gray-100
-            tl-text-xs"
-        >🍰</i>
+        <i class="tl-cta-icon tl-bg-secondary">🍰</i>
         <div>
-          <i class="i-ic-baseline-drag-indicator" /><i class="i-ic-baseline-drag-indicator" /><i
-            class="i-ic-baseline-drag-indicator"
-          />
+          <i class="i-ic-baseline-drag-indicator tl-bg-secondary" />
+          <i class="i-ic-baseline-drag-indicator tl-bg-secondary" />
+          <i class="i-ic-baseline-drag-indicator tl-bg-secondary" />
         </div>
-        <div />
+        <i
+          class="tl-cta-icon tl-bg-secondary"
+          @click="toggleDark()"
+        >{{ isDark ? '☀️' : '🌙' }}</i>
       </header>
       <template
         v-for="(group, folderName) of groupedControls"
@@ -99,4 +94,4 @@ const groupedControls = computed(() => {
       </template>
     </div>
   </UseDraggable>
-</template>
+</template>