From 99dcadcf6b96883baef41152ecbb4441f67c5431 Mon Sep 17 00:00:00 2001
From: Sergiy Dybskiy <sergiy.dybskiy@sentry.io>
Date: Sat, 1 Aug 2026 16:56:21 +0000
Subject: [PATCH 1/2] fix(theme-toggle): Add TooltipProvider for SSR safety

---
 src/components/theme-toggle.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index 0adfb3a7b4326..377d1de3a2dad 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -1,5 +1,6 @@
 'use client';
 import {MoonIcon, SunIcon} from '@radix-ui/react-icons';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import {IconButton, Tooltip} from '@radix-ui/themes';
 import {useTheme} from 'next-themes';
 import {Fragment} from 'react';
@@ -22,6 +23,7 @@ export function ThemeToggle({
      }
    `}</style>
 
+      <TooltipPrimitive.Provider delayDuration={300}>
       <Tooltip className="radix-themes-custom-fonts" content="Toggle theme">
         <IconButton
           size="3"
@@ -48,6 +50,7 @@ export function ThemeToggle({
           />
         </IconButton>
       </Tooltip>
+      </TooltipPrimitive.Provider>
     </Fragment>
   );
 }

From ddf9ed36bfa9eb173c7ba1dbbbd9d7e6e27f1de1 Mon Sep 17 00:00:00 2001
From: Sergiy Dybskiy <sergiy.dybskiy@sentry.io>
Date: Sat, 1 Aug 2026 16:57:12 +0000
Subject: [PATCH 2/2] fix(components): Add TooltipProvider to ThemeToggle

---
 src/components/theme-toggle.tsx | 52 ++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index 377d1de3a2dad..8fdcea8f191e5 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -24,32 +24,32 @@ export function ThemeToggle({
    `}</style>
 
       <TooltipPrimitive.Provider delayDuration={300}>
-      <Tooltip className="radix-themes-custom-fonts" content="Toggle theme">
-        <IconButton
-          size="3"
-          variant="ghost"
-          color="gray"
-          onClick={() => {
-            // Set 'system' theme if the next theme matches the system theme
-            const resolvedTheme = theme === 'system' ? systemTheme : theme;
-            const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
-            const newThemeMatchesSystem = newTheme === systemTheme;
-            setTheme(newThemeMatchesSystem ? 'system' : newTheme);
-          }}
-          {...props}
-        >
-          <SunIcon
-            width="16"
-            height="16"
-            style={{display: 'var(--theme-toggle-sun-icon-display)'}}
-          />
-          <MoonIcon
-            width="16"
-            height="16"
-            style={{display: 'var(--theme-toggle-moon-icon-display)'}}
-          />
-        </IconButton>
-      </Tooltip>
+        <Tooltip className="radix-themes-custom-fonts" content="Toggle theme">
+          <IconButton
+            size="3"
+            variant="ghost"
+            color="gray"
+            onClick={() => {
+              // Set 'system' theme if the next theme matches the system theme
+              const resolvedTheme = theme === 'system' ? systemTheme : theme;
+              const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
+              const newThemeMatchesSystem = newTheme === systemTheme;
+              setTheme(newThemeMatchesSystem ? 'system' : newTheme);
+            }}
+            {...props}
+          >
+            <SunIcon
+              width="16"
+              height="16"
+              style={{display: 'var(--theme-toggle-sun-icon-display)'}}
+            />
+            <MoonIcon
+              width="16"
+              height="16"
+              style={{display: 'var(--theme-toggle-moon-icon-display)'}}
+            />
+          </IconButton>
+        </Tooltip>
       </TooltipPrimitive.Provider>
     </Fragment>
   );