From 7ebf14da29dfec8771c45d899cf9028aae69bca6 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 31 May 2025 14:00:24 +0200
Subject: [PATCH] set theme swap to have a better color for light theme

---
 src/components/ThemeSwap.vue | 25 +++++++++++-----
 src/styles/app.css           | 12 ++++----
 tailwind.config.js           | 58 ++++++++++++++++++------------------
 3 files changed, 54 insertions(+), 41 deletions(-)

diff --git a/src/components/ThemeSwap.vue b/src/components/ThemeSwap.vue
index b197e14..db793aa 100644
--- a/src/components/ThemeSwap.vue
+++ b/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
diff --git a/src/styles/app.css b/src/styles/app.css
index 477fca3..0e1b183 100644
--- a/src/styles/app.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 7d8d115..bfadbe2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,59 +1,59 @@
 /** @type {import('tailwindcss').Config} */
-const dotenv = require('dotenv')
+const dotenv = require("dotenv")
 
 dotenv.config()
 
 const defaultTitleStyles = Array.from(
   { length: 6 },
-  (_, k) => `h${k + 1}`
+  (_, k) => `h${k + 1}`,
 ).reduce(
   (acc, heading) => ({
     ...acc,
     [heading]: {
-      'margin-top': '0',
-      'margin-bottom': '0.5em'
-    }
+      "margin-top": "0",
+      "margin-bottom": "0.5em",
+    },
   }),
-  {}
+  {},
 )
 
 module.exports = {
-  content: ['./src/**/*.{vue,js,ts}'],
+  content: ["./src/**/*.{vue,js,ts}"],
   theme: {
     extend: {
       typography: () => ({
         DEFAULT: {
           css: {
-            'font-size': '13pt',
-            'font-family': '"Courier Prime", monospace',
+            "font-size": "13pt",
+            "font-family": '"Courier Prime", monospace',
             ...defaultTitleStyles,
             p: {
-              'margin-top': '0.8em',
-              'margin-bottom': '0.8em',
-              'text-align': 'justify'
+              "margin-top": "0.8em",
+              "margin-bottom": "0.8em",
+              "text-align": "justify",
             },
             img: {
-              'margin-top': 0,
-              'margin-bottom': 0,
-              'border-radius': '1rem'
+              "margin-top": 0,
+              "margin-bottom": 0,
+              "border-radius": "1rem",
             },
             a: {
-              'text-decoration': 'none',
-              color: 'var(--color-success)'
+              "text-decoration": "none",
+              color: "var(--color-contrast-content)",
             },
-            'a.btn-primary': {
-              color: 'var(--color-secondary-content)'
+            "a.btn-primary": {
+              color: "var(--color-secondary-content)",
             },
-            'a:hover': {
-              'text-decoration': 'underline'
+            "a:hover": {
+              "text-decoration": "underline",
             },
             li: {
-              'margin-top': 0,
-              'margin-bottom': 0
-            }
-          }
-        }
-      })
-    }
-  }
+              "margin-top": 0,
+              "margin-bottom": 0,
+            },
+          },
+        },
+      }),
+    },
+  },
 }