set theme swap to have a better color for light theme

src/components/ThemeSwap.vue

@@ -1,12 +1,23 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+const htmlElement = document.querySelector("html")
+const lightMode = htmlElement?.dataset.theme
+const darkMode = "coffee"
 
-const isDark = ref(JSON.parse(localStorage.getItem('is-dark') ?? 'false'))
-const toggle = (isChecked: boolean) => {
-  localStorage.setItem('is-dark', isChecked ? 'true' : 'false')
+const isInitiallyDark = JSON.parse(localStorage.getItem("is-dark") ?? "false")
+
+if (htmlElement) {
+  htmlElement.dataset.theme = isInitiallyDark ? darkMode : lightMode
 }
 
-const darkMode = 'coffee'
+const toggle = (isChecked: boolean) => {
+  localStorage.setItem("is-dark", isChecked ? "true" : "false")
+
+  if (!htmlElement) {
+    return
+  }
+
+  htmlElement.dataset.theme = isChecked ? darkMode : lightMode
+}
 </script>
 
 <template>
@@ -14,9 +25,9 @@ const darkMode = 'coffee'
     <input
       type="checkbox"
       :value="darkMode"
-      :checked="isDark"
+      :checked="isInitiallyDark"
       class="theme-controller"
-      @click="() => toggle(!isDark)"
+      @click="(e) => toggle((e.target as HTMLInputElement)?.checked)"
     />
 
     <svg

src/styles/app.css

@@ -12,6 +12,11 @@
   --light-link: lighten(#445fb9, 45%);
   --background-color: #ffffff;
   --note-width: 620px;
+  --color-contrast-content: var(--color-success);
+}
+
+[data-theme="valentine"] {
+  --color-contrast-content: var(--color-success-content);
 }
 
 @plugin "@tailwindcss/typography";
@@ -33,7 +38,6 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-
   *,
   ::after,
   ::before,
@@ -55,7 +59,6 @@ body {
 }
 
 @media screen and (min-width: 769px) {
-
   html,
   body {
     overflow-y: hidden;
@@ -120,7 +123,6 @@ a {
 }
 
 @media print {
-
   html,
   body {
     overflow-y: auto;
@@ -154,10 +156,10 @@ pre {
 }
 
 .markdown-alert-title svg path {
-  fill: var(--color-base-content)
+  fill: var(--color-base-content);
 }
 
 iframe {
   border-radius: 1rem;
   height: 400px;
-}
+}