fix: use passive icons for dark toggle, close #22

antfu-collective · Jun 11, 2022 · 0f87c0e · 0f87c0e
1 parent 3b144c8
commit 0f87c0e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git 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
@@ -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(),