From a80b64dc4a4972a5da3a0b2ee9bcad4fcca50ce7 Mon Sep 17 00:00:00 2001
From: Nathan Lamy <nathan.lamycharrier@gmail.com>
Date: Wed, 30 Jul 2025 18:45:17 +0200
Subject: [PATCH] ui: fix sonner theme

---
 app/app.css                       | 8 ++++++++
 app/components/theme-provider.tsx | 8 +++++---
 app/components/ui/sonner.tsx      | 4 ----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/app.css b/app/app.css
index 28942ec..04ce1f3 100644
--- a/app/app.css
+++ b/app/app.css
@@ -127,3 +127,11 @@ html,
 body {
   @apply w-full h-full;
 }
+
+[data-sonner-toast][data-styled='true'] [data-description] {
+  color: var(--primary) !important;
+}
+
+[data-sonner-toaster][data-sonner-theme='dark'] [data-description] {
+  color: var(--primary) !important;
+}
diff --git a/app/components/theme-provider.tsx b/app/components/theme-provider.tsx
index 1dd6834..38e5209 100644
--- a/app/components/theme-provider.tsx
+++ b/app/components/theme-provider.tsx
@@ -84,14 +84,16 @@ export const useTheme = () => {
   return context;
 };
 
+const isWindowAvailable = () => {
+  return typeof window !== "undefined" && window !== null;
+}
+
 export const useDisplayedTheme = () => {
   const { theme, setTheme } = useTheme();
 
   if (theme === "system") {
     return {
-      theme: window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "light",
+      theme: isWindowAvailable() && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
       setTheme,
     };
   }
diff --git a/app/components/ui/sonner.tsx b/app/components/ui/sonner.tsx
index d00fe49..7f7bab7 100644
--- a/app/components/ui/sonner.tsx
+++ b/app/components/ui/sonner.tsx
@@ -1,12 +1,8 @@
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  // TODO: Use theme hook
-  const { theme = "system" } = {};
-
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
       className="toaster group"
       style={
         {