feat: match theme-toggle component to related plugin (#37)

Co-authored-by: Sacha Stafyniak <sacha@digisquad.io>

components/base/BaseThemeToggle.vue

@@ -41,43 +41,13 @@ const isDark = computed({
 
 <template>
   <label
-    class="nui-focus relative block h-9 w-9 shrink-0 overflow-hidden rounded-full transition-all duration-300 focus-visible:outline-2"
-    :class="
-      props.inverted
-        ? 'ring-offset-muted-500 dark:ring-offset-muted-400'
-        : 'dark:ring-offset-muted-900'
-    "
+    class="nui-theme-toggle"
+    :class="props.inverted && 'nui-theme-toggle-inverted'"
   >
-    <input
-      v-model="isDark"
-      type="checkbox"
-      class="absolute start-0 top-0 z-[2] h-full w-full cursor-pointer opacity-0"
-    />
-    <span
-      class="relative block h-9 w-9 rounded-full"
-      :class="
-        props.inverted
-          ? 'bg-primary-700 '
-          : 'bg-white dark:bg-muted-800  border border-muted-300 dark:border-muted-700'
-      "
-    >
-      <IconSun
-        class="pointer-events-none absolute start-1/2 top-1/2 block h-5 w-5 text-yellow-400 transition-all duration-300"
-        :class="[
-          !isDark
-            ? '-translate-y-1/2 translate-x-[-50%] opacity-100 rtl:translate-x-[50%]'
-            : 'translate-x-[-50%] translate-y-[-150%] opacity-0 rtl:translate-x-[50%]',
-        ]"
-      />
-
-      <IconMoon
-        class="pointer-events-none absolute start-1/2 top-1/2 block h-5 w-5 text-yellow-400 transition-all duration-300"
-        :class="[
-          !isDark
-            ? 'translate-x-[-45%] translate-y-[-150%] opacity-0 rtl:translate-x-[45%]'
-            : '-translate-y-1/2 translate-x-[-45%] opacity-100 rtl:translate-x-[45%]',
-        ]"
-      />
+    <input v-model="isDark" type="checkbox" class="nui-toggle-input" />
+    <span class="nui-toggle-inner">
+      <IconSun class="nui-sun" />
+      <IconMoon class="nui-moon" />
     </span>
   </label>
 </template>