From 0f87c0e2370c96dda520b648edcf75b5ebc7b366 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 12 Jun 2022 05:43:20 +0800
Subject: [PATCH] fix: use passive icons for dark toggle, close #22

---
 src/components/Footer.vue | 8 +++-----
 unocss.config.ts          | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 77d3a8f..e7a97a5 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,13 +1,11 @@
 <template>
   <nav text-xl mt-6 inline-flex gap-2>
-    <button class="icon-btn !outline-none" @click="toggleDark()">
-      <div v-if="isDark" i-carbon-moon />
-      <div v-else i-carbon-sun />
+    <button icon-btn @click="toggleDark()">
+      <div dark:i-carbon-moon i-carbon-sun />
     </button>
 
     <a
-      class="icon-btn"
-      i-carbon-logo-github
+      icon-btn i-carbon-logo-github
       rel="noreferrer"
       href="https://github.com/antfu/vitesse-lite"
       target="_blank"
diff --git a/unocss.config.ts b/unocss.config.ts
index de6d8a3..77aeffa 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -11,7 +11,7 @@ import {
 export default defineConfig({
   shortcuts: [
     ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
-    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
+    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600 !outline-none'],
   ],
   presets: [
     presetUno(),