fix(color-scheme): load color scheme initially

The color scheme is now loaded and set after registering the watcher to
ensure that the callback is also called initially.

src/App.vue

@@ -26,7 +26,7 @@ import { useRoute } from 'vue-router';
 const route = useRoute();
 
 const { getColorScheme, updateColorScheme } = useColorScheme();
-const colorScheme = ref(getColorScheme());
+const colorScheme = ref('auto');
 provide('colorScheme', colorScheme);
 watch(colorScheme, (newValue) => {
     updateColorScheme(newValue);
@@ -46,6 +46,7 @@ watch(colorScheme, (newValue) => {
         document.body.classList.remove('color-scheme-auto');
     }
 });
+colorScheme.value = getColorScheme();
 
 watchEffect(() => updatePageTitle(route));
 </script>

src/features/footer/components/Footer.vue

@@ -54,7 +54,6 @@ const copyrightPeriod =
 .footer-segment {
     display: flex;
     justify-content: center;
-    align-items: center;
     gap: 32px;
     padding: var(--padding-y);
     background-color: var(--light-bg);