fix: logo and icons now changes depending on page's theme

Used a workaround using CSS to change what element is displayed when the page's theme is changed, now depending on the theme's classes (`.light-mode` and `.dark-mode`) instead of with `$colorMode.value`, apparently it's wasn't working properly when the page is loaded multiple times.

src/assets/styles/global.scss

@@ -27,3 +27,26 @@ body {
 	background-color: $dark-background;
 	color: $dark-primary;
 }
+
+/*
+? Workaround with changing elements depending on the page's theme,
+? probably there is a better way, using `v-if` and `v-else`, but apparently,
+? it's doesn't work properly when the page is loaded multiple times.
+*/
+.dark-mode-element,
+.light-mode-element {
+	transition: display, opacity 0.01s;
+}
+
+.light-mode * .dark-mode-element {
+	opacity: 0;
+	height: 0;
+	width: 0;
+	display: none;
+}
+.dark-mode * .light-mode-element {
+	opacity: 0;
+	height: 0;
+	width: 0;
+	display: none;
+}

src/components/ThemePicker.vue

@@ -6,8 +6,8 @@
 					$colorMode.preference === 'dark' ? 'light' : 'dark'
 			"
 		>
-			<IconMoon v-if="$colorMode.preference !== 'dark'" />
-			<IconSun v-else />
+			<IconMoon class="light-mode-element" />
+			<IconSun class="dark-mode-element" />
 		</button>
 	</div>
 </template>

src/components/ToTodayLogo.vue

@@ -1,13 +1,13 @@
 <template>
 	<picture>
 		<nuxt-img
-			v-if="$colorMode.value != 'dark'"
+			class="light-mode-element"
 			src="/images/ToToday-Dark.svg"
 			alt="ToToday logo"
 			width="250"
 		/>
 		<nuxt-img
-			v-else
+			class="dark-mode-element"
 			src="/images/ToToday-Light.svg"
 			alt="ToToday logo"
 			width="250"