ui: fix sonner theme

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;
+}

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
+      theme: isWindowAvailable() && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
-        ? "dark"
-        : "light",
       setTheme,
     };
   }

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={
         {