feat: enhance toast dark mode theme

Renovamen · Jul 1, 2024 · bcbcd54 · bcbcd54
1 parent 7887a01
commit bcbcd54
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
 };