fix: smooth blur circle transition, default to dark mode

- Add animation-fill-mode: forwards to view transition pseudo-elements
  to prevent flash when library removes injected style element
- Increase blur circle duration to 600ms for smoother finish
- Default to dark mode when no user preference is stored
- Simplify FOUC script to match (dark unless explicitly light)

Author: helliott-redactbox

client/index.html

@@ -12,11 +12,10 @@
     <link rel="manifest" href="/site.webmanifest" />
     <title>Prunerr</title>
     <script>
-      // Prevent flash of wrong theme (FOUC) - runs before CSS loads
+      // Prevent flash of wrong theme (FOUC) - default to dark
       document.documentElement.classList.toggle(
         'dark',
-        localStorage.theme === 'dark' ||
-          (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        localStorage.theme !== 'light'
       );
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com">

client/src/contexts/ThemeContext.tsx

@@ -25,8 +25,8 @@ function resolveTheme(theme: Theme): ResolvedTheme {
 function getInitialTheme(): Theme {
   const stored = localStorage.getItem('theme') as Theme | null;
   if (stored === 'light' || stored === 'dark' || stored === 'system') return stored;
-  if (!('theme' in localStorage)) return 'system';
-  return 'system';
+  // Default to dark mode when no preference is stored
+  return 'dark';
 }
 
 function updateMetaThemeColor(isDark: boolean) {
@@ -48,7 +48,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   const { ref, toggleSwitchTheme, isDarkMode } = useModeAnimation({
     isDarkMode: resolvedTheme === 'dark',
     animationType: ThemeAnimationType.BLUR_CIRCLE,
-    duration: 500,
+    duration: 600,
     blurAmount: 6,
     easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
     globalClassName: 'dark',

client/src/index.css

@@ -115,6 +115,20 @@
 
 }
 
+/* View Transition: prevent flash at end of blur circle animation */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-fill-mode: forwards !important;
+}
+
+::view-transition-old(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root) {
+  z-index: 9999;
+}
+
 @layer components {
   /* Glass card effect */
   .glass {