feat: [#421] button transition when changing theme

Author: mario-nt

components/ColorModeSelector.vue

@@ -16,7 +16,7 @@
         >Change Themes</button>
       </div> -->
   <div>
-    <button @click="$colorMode.preference = 'system'">
+    <button v-if="$colorMode.preference === 'system'" @click="$colorMode.preference = 'dark'">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -41,7 +41,7 @@
         <line x1="12" y1="17" x2="12" y2="21" />
       </svg>
     </button>
-    <button @click="$colorMode.preference = 'dark'">
+    <button v-if="$colorMode.preference === 'dark'" @click="$colorMode.preference = 'light'">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -57,7 +57,7 @@
         <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
       </svg>
     </button>
-    <button @click="$colorMode.preference = 'light'">
+    <button v-if="$colorMode.preference === 'light'" @click="$colorMode.preference = 'system'">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"