From ca98af60e71d8e507eac2840976757dfa198f8e8 Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Thu, 14 Mar 2024 20:44:54 -0300
Subject: [PATCH 1/2] fix(www): themes toggle

---
 apps/website/src/app/globals.css          | 93 +++++++++--------------
 apps/website/src/components/provider.tsx  |  4 +-
 apps/website/src/components/ui/sonner.tsx |  2 +-
 3 files changed, 38 insertions(+), 61 deletions(-)

diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
index 3051e8e..4cd0093 100644
--- a/apps/website/src/app/globals.css
+++ b/apps/website/src/app/globals.css
@@ -3,29 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 72.22% 50.59%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5% 64.9%;
-    --radius: 0.5rem;
-  }
-
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
@@ -46,30 +23,43 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
+
+    .code-example-light {
+      display: none;
+    }
+    .code-example-dark {
+      display: unset;
+    }
   }
-}
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+  .light {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+    --radius: 0.5rem;
+
+    .code-example-light {
+      display: unset;
+    }
+    .code-example-dark {
+      display: none;
+    }
   }
 }
 
@@ -117,19 +107,6 @@
   animation: move-overlay 4s ease-out forwards;
   animation-delay: 3s;
 }
-.code-example-light {
-}
-.code-example-dark {
-  display: none;
-}
-@media (prefers-color-scheme: dark) {
-  .code-example-light {
-    display: none;
-  }
-  .code-example-dark {
-    display: unset;
-  }
-}
 
 @media (prefers-reduced-motion: reduce) {
   .code-example-overlay {
diff --git a/apps/website/src/components/provider.tsx b/apps/website/src/components/provider.tsx
index 2dd3702..71cf1df 100644
--- a/apps/website/src/components/provider.tsx
+++ b/apps/website/src/components/provider.tsx
@@ -8,10 +8,10 @@ export function AppProvider({
 }: React.PropsWithChildren<{}>) {
   return (
     <ThemeProvider
-      attribute="class"
-      defaultTheme="system"
       enableSystem
       disableTransitionOnChange
+      attribute="class"
+      defaultTheme="system"
     >
       {children}
     </ThemeProvider>
diff --git a/apps/website/src/components/ui/sonner.tsx b/apps/website/src/components/ui/sonner.tsx
index 62367a2..05245c3 100644
--- a/apps/website/src/components/ui/sonner.tsx
+++ b/apps/website/src/components/ui/sonner.tsx
@@ -6,7 +6,7 @@ import { Toaster as Sonner } from 'sonner'
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme()
+  const { theme } = useTheme()
 
   return (
     <Sonner

From c6196379ba2671b0d64dac9545cde36cde511e5c Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Thu, 14 Mar 2024 20:49:09 -0300
Subject: [PATCH 2/2] chore(www): revert sooner useTheme change

---
 apps/website/src/components/ui/sonner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/components/ui/sonner.tsx b/apps/website/src/components/ui/sonner.tsx
index 05245c3..62367a2 100644
--- a/apps/website/src/components/ui/sonner.tsx
+++ b/apps/website/src/components/ui/sonner.tsx
@@ -6,7 +6,7 @@ import { Toaster as Sonner } from 'sonner'
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme } = useTheme()
+  const { theme = 'system' } = useTheme()
 
   return (
     <Sonner