From bcbcd542485f39b20f2cd01308bd1749323459bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B9=E7=AC=91=E5=AF=92?= <renovamenzxh@gmail.com>
Date: Mon, 1 Jul 2024 19:52:55 -0400
Subject: [PATCH] feat: enhance toast dark mode theme

---
 site/src/app.vue                         |  5 +++--
 site/src/components/shared/Logo.vue      |  2 +-
 site/src/components/ui/sonner/Sonner.vue | 12 +++++++++---
 site/src/composables/monaco/setup.ts     |  4 ++--
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/site/src/app.vue b/site/src/app.vue
index bdaa22f0..4c890828 100644
--- a/site/src/app.vue
+++ b/site/src/app.vue
@@ -2,12 +2,13 @@
   <div class="font-ui">
     <VitePwaManifest />
     <NuxtPage />
-    <UiToaster rich-colors close-button />
+    <UiToaster close-button />
   </div>
 </template>
 
 <script setup lang="ts">
 const { t, locale } = useI18n();
+
 const colorMode = useColorMode();
 const preferredDark = usePreferredDark();
 
@@ -21,7 +22,7 @@ useHead({
     { property: "og:locale", content: locale },
     {
       name: "theme-color",
-      content: () => (colorMode?.preference === "dark" ? "#30343A" : "#F3F4F6")
+      content: () => (colorMode.value === "dark" ? "#30343A" : "#F3F4F6")
     }
   ],
   link: [
diff --git a/site/src/components/shared/Logo.vue b/site/src/components/shared/Logo.vue
index 18872feb..2359b968 100644
--- a/site/src/components/shared/Logo.vue
+++ b/site/src/components/shared/Logo.vue
@@ -3,7 +3,7 @@
     width="1.7em"
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
-    :fill="$colorMode?.preference === 'dark' ? '#e2e8f0' : '#1e293b'"
+    :fill="$colorMode.value === 'dark' ? '#e2e8f0' : '#1e293b'"
   >
     <circle cx="15.672" cy="15.184" r="11.544" fill-opacity="0.15" />
     <path
diff --git a/site/src/components/ui/sonner/Sonner.vue b/site/src/components/ui/sonner/Sonner.vue
index 671f380a..5b5b36ae 100644
--- a/site/src/components/ui/sonner/Sonner.vue
+++ b/site/src/components/ui/sonner/Sonner.vue
@@ -10,11 +10,17 @@ const props = defineProps<ToasterProps>();
     v-bind="props"
     :toast-options="{
       classes: {
-        toast:
-          'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:shadow-lg',
         description: 'group-[.toast]:text-muted-foreground',
         actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-        cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+        cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        closeButton:
+          'group-[.toast]:bg-background group-[.toast]:text-muted-foreground group-[.toaster]:border-border hover:(bg-background! text-foreground! border-foreground!)',
+        error:
+          'group-[.toaster]:text-destructive group-[.toaster]:border-destructive dark:group-[.toaster]:text-red-500',
+        success:
+          'group-[.toaster]:text-green-700 group-[.toaster]:border-green-700 dark:(group-[.toaster]:text-green-500 group-[.toaster]:border-green-600)',
+        info: 'group-[.toaster]:text-blue-700 group-[.toaster]:border-blue-700 dark:(group-[.toaster]:text-sky-500 group-[.toaster]:border-sky-600)'
       }
     }"
   />
diff --git a/site/src/composables/monaco/setup.ts b/site/src/composables/monaco/setup.ts
index a4219f7c..3916da7e 100644
--- a/site/src/composables/monaco/setup.ts
+++ b/site/src/composables/monaco/setup.ts
@@ -108,6 +108,6 @@ export const setupMonacoTheme = async (monaco: typeof Monaco) => {
 
   const colorMode = useColorMode();
 
-  setTheme(colorMode.preference);
-  watch(() => colorMode.preference, setTheme);
+  setTheme(colorMode.value);
+  watch(() => colorMode.value, setTheme);
 };