Move dark-mode detection one level higher to mitigate performance issues

frontend/src/components/VIcon/VIcon.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue"
+import { ref, watch } from "vue"
 
 import { useSprite } from "~/composables/use-sprite"
-import { useDarkMode } from "~/composables/use-dark-mode"
-
 /**
  * Vendored from SVG Sprite Module https://github.com/nuxt-modules/svg-sprite
  * The module had problem with handling the source code that is inside `/src` directory.
@@ -54,8 +52,6 @@ const props = withDefaults(
   }
 )
 
-const { effectiveColorMode } = useDarkMode()
-
 if (!props.viewBox.split(" ").every((v) => !isNaN(parseInt(v)))) {
   throw new Error(
     `Invalid viewBox "${props.viewBox}" for icon "${props.name}".`
@@ -70,20 +66,14 @@ const icon = ref({
   class: "",
 })
 
-const iconName = computed(() => {
-  let name = props.name.includes("/") ? props.name : `icons/${props.name}`
-  if (name.startsWith("licenses")) {
-    name = `${name}-${effectiveColorMode.value}`
-  }
-  return name
-})
-
-icon.value = useSprite(iconName.value)
+icon.value = useSprite(
+  props.name.includes("/") ? props.name : `icons/${props.name}`
+)
 
 watch(
-  () => [props.name, effectiveColorMode.value],
-  () => {
-    icon.value = useSprite(iconName.value)
+  () => props.name,
+  (name) => {
+    icon.value = useSprite(name)
   }
 )
 </script>

frontend/src/components/VLicense/VLicense.vue

@@ -7,6 +7,8 @@ import { useI18n } from "#imports"
 
 import { computed } from "vue"
 
+import { useDarkMode } from "~/composables/use-dark-mode"
+
 import type { License } from "~/constants/license"
 import { getFullLicenseName, getElements } from "~/utils/license"
 import { camelCase } from "~/utils/case"
@@ -35,6 +37,8 @@ const props = withDefaults(
   }
 )
 
+const { effectiveColorMode } = useDarkMode()
+
 const i18n = useI18n({ useScope: "global" })
 
 const iconNames = computed(() => getElements(props.license))
@@ -56,7 +60,7 @@ const licenseName = computed(() => {
         :key="name"
         :class="{ 'license-bg text-black': bgFilled }"
         view-box="0 0 30 30"
-        :name="`licenses/${name}`"
+        :name="`licenses/${name}-${effectiveColorMode}`"
         :size="4"
       />
     </div>

frontend/src/components/VLicense/VLicenseElements.vue

@@ -4,6 +4,7 @@ import { useI18n } from "#imports"
 import { computed } from "vue"
 
 import type { License } from "~/constants/license"
+import { useDarkMode } from "~/composables/use-dark-mode"
 import { useUiStore } from "~/stores/ui"
 import { camelCase } from "~/utils/case"
 import { getElements } from "~/utils/license"
@@ -27,6 +28,8 @@ const props = withDefaults(
   }
 )
 
+const { effectiveColorMode } = useDarkMode()
+
 const i18n = useI18n({ useScope: "global" })
 const elementNames = computed(() =>
   getElements(props.license).filter((icon) => icon !== "cc")
@@ -51,7 +54,7 @@ const getLicenseDescription = (element: string) => {
       <VIcon
         view-box="0 0 30 30"
         :size="isSmall || isMobile ? 5 : 6"
-        :name="`licenses/${element}`"
+        :name="`licenses/${element}-${effectiveColorMode}`"
       />
       <span v-if="elementNames.length > 1" class="sr-only">{{
         element.toUpperCase()