💄 🩹 Fix dark mode logic to respect the user's system theme and update…

… focus-visible style 🩹 💄

src/context/theme/index.tsx

@@ -25,7 +25,7 @@ function ThemeProvider({ children }: Readonly<ThemeProviderProps>) {
   const isTheSystemThemeDarkMode = systemTheme.matches // return true if the system theme is dark mode
   const isTheLocalStorageThemeDarkMode = getTheme() === THEME.dark
   const isDefaultThemeDarkMode =
-    isTheSystemThemeDarkMode || isTheLocalStorageThemeDarkMode
+    isTheSystemThemeDarkMode && isTheLocalStorageThemeDarkMode
 
   const [isDarkMode, setIsDarkMode] = useState(isDefaultThemeDarkMode)
 

src/storage/theme/getTheme.ts

@@ -4,7 +4,7 @@ import { APP_THEME } from '../storageConfig'
 export function getTheme() {
   const response = localStorage.getItem(APP_THEME)
 
-  const theme = response ? JSON.parse(response) : THEME.light
+  const theme = response ? JSON.parse(response) : THEME.dark
 
   return theme as ITheme
 }

src/theme/global.css

@@ -5,7 +5,7 @@
 
 @layer base {   
     :focus-visible {
-        @apply ring-4 ring-purple-200 outline-none
+        @apply ring-4 dark:ring-purple-300 ring-purple-200 outline-none
       }
 
     ::selection {