Finished integrating Shadow DOM icons, first steps towards dynamic theme

components/blocks/Navigation.vue

@@ -21,7 +21,7 @@ const links = toRaw(pages.value).filter((page) => page.path !== '/')
       description="official website"
     />
     <ul
-      class="navbar-nav flex-row align-items-center align-items-sm-start align-items-lg-center justify-content-center gap-3 m-2 m-sm-0 mx-lg-2 my-sm-2 my-lg-0"
+      class="navbar-nav flex-row flex-wrap align-items-center align-items-sm-start align-items-lg-center justify-content-center gap-3 m-2 m-sm-0 mx-lg-2 my-sm-2 my-lg-0"
     >
       <li v-for="(page, index) in links" :key="index" class="nav-item">
         <Route

components/blocks/Options.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import cogIcon from '~/assets/images/icons/cog.png'
 import pearlIcon from '~/assets/images/icons/pearl.gif'
-
-const active = ref(false)
 </script>
 
 <template>
@@ -18,42 +16,48 @@ const active = ref(false)
       </div>
     </template>
     <template #default="{ isActive }">
-      <VCard title="Dialog">
-        <VCardText>
-          <div class="overlay background"></div>
-          <div class="overlay content">
-            <img
-              class="icon-badge user-select-none"
-              draggable="false"
-              :src="pearlIcon"
-              alt="Pearl"
-            />
-            <div>
-              <h3 class="alex text-align-center">Site options</h3>
-              <div class="row">
-                <div class="col-12 col-sm-6">
-                  <p>
-                    <strong>Theme</strong><br />
-                    Available in all flavors, vanilla and chocolate.
-                  </p>
-                </div>
-                <div class="col-12 col-sm-6">
-                  <p>
-                    <strong>Animation</strong><br />
-                    Some computers may have issues rendering that gorgeous
-                    background animation. Enabling it substantially increases
-                    power consumption.
-                  </p>
-                </div>
+      <VCard>
+        <template #title>
+          <h3 class="alex text-align-center">Site options</h3>
+        </template>
+        <div class="overlay background"></div>
+        <VCardText class="overlay content">
+          <img
+            class="icon-badge user-select-none"
+            draggable="false"
+            :src="pearlIcon"
+            alt="Pearl"
+          />
+          <div>
+            <div class="row">
+              <div class="col-12 col-sm-6">
+                <p>
+                  <strong>Theme</strong><br />
+                  Available in all flavors, vanilla and chocolate.
+                </p>
+              </div>
+              <div class="col-12 col-sm-6">
+                <p>
+                  <strong>Animation</strong><br />
+                  Some computers may have issues rendering that gorgeous
+                  background animation. Enabling it substantially increases
+                  power consumption.
+                </p>
               </div>
             </div>
           </div>
+
+          Report a bug
         </VCardText>
-        Report a bug
         <VCardActions>
           <VSpacer></VSpacer>
-
-          <VBtn text="Close Dialog" @click="isActive.value = false"></VBtn>
+          <VBtn
+            color="success"
+            prepend-icon="close"
+            @click="isActive.value = false"
+          >
+            Close
+          </VBtn>
         </VCardActions>
       </VCard>
     </template>
@@ -71,6 +75,15 @@ const active = ref(false)
   padding: 10px;
 }
 
+.icon-badge {
+  position: fixed;
+
+  top: -16px;
+  left: -16px;
+
+  transform: rotate(-30deg);
+}
+
 .logo {
   width: 16px;
   height: 16px;

components/ui/Icon.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import 'iconify-icon'
 import type { IconifyRenderMode } from 'iconify-icon'
 import type { PropType } from 'vue'
 
@@ -8,6 +7,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  color: {
+    type: String,
+    default: 'white',
+  },
   mode: {
     type: String as PropType<IconifyRenderMode>,
     default: 'svg',
@@ -33,12 +36,11 @@ const props = defineProps({
     default: '',
   },
 })
-
-const icon = props.name?.split(':')?.[0] === 'local' ?
 </script>
 
 <template>
   <iconify-icon
+    class="icon"
     :icon="props.name"
     :mode="props.mode"
     :inline="props.inline"
@@ -49,4 +51,8 @@ const icon = props.name?.split(':')?.[0] === 'local' ?
   />
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.icon {
+  color: v-bind(color);
+}
+</style>