fix blur on safari for theme toggle

lewismorgan · May 3, 2024 · a763e5d · a763e5d
1 parent c6ee89f
commit a763e5d
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -34,7 +34,7 @@ export default function RootLayout({
     <html lang="en" className={`${source_code_pro.variable} ${exo_2.variable}`}>
       <body className="flex min-h-screen min-w-full flex-col font-sans ">
         <ThemeProvider attribute="class" defaultTheme="dark">
-          <div className="fixed bottom-20 right-2 h-fit w-fit backdrop-blur-sm md:right-10 md:top-10">
+          <div className="fixed bottom-20 right-2 h-fit w-fit md:right-10 md:top-10">
             <ThemeToggle />
           </div>
           <div className="mb-5 grow">{children}</div>

diff --git a/src/components/client/theme-toggle.tsx b/src/components/client/theme-toggle.tsx
@@ -25,7 +25,7 @@ export const ThemeToggle = () => {
     <Button
       aria-label="Toggle Theme"
       variant={'outline'}
-      className="bg-transparent p-3 focus:outline-none"
+      className="bg-transparent p-3 backdrop-blur-sm focus:outline-none"
       onClick={() => setTheme(isDark ? 'light' : 'dark')}
     >
       {isDark ? <LightSide /> : <DarkSide />}