Add Christmas theme and snow effects for December

Introduces a Christmas theme that activates in December, including themed colors, subtle background patterns, and snowflake effects on loading screens. Adds a reusable SnowLoader component and utility for December detection. Updates layout and loading components to conditionally apply decorations and styles only during December.
2025-12-08 00:47:57 +00:00
parent 224342c410
commit e7fcfd63a2
10 changed files with 139 additions and 28 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,6 +7,7 @@ import { NotificationProvider } from "@/lib/notification-context"
 import { Metadata, Viewport } from "next"
 import KeepOnlineWrapper from "@/components/layout/KeepOnlineWrapper"
 import { ChristmasDecorations } from "@/components/christmas-decorations"
+import { isDecember } from "@/lib/utils/christmas"

 const inter = Inter({ subsets: ["latin"] })
  
@@ -70,12 +71,14 @@ export default function RootLayout({
 }: {
  children: React.ReactNode
 }) {
+  const isDec = isDecember()
+  
  return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className={isDec ? "christmas-theme" : ""}>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
          <NotificationProvider>
-            <ChristmasDecorations />
+            {isDec && <ChristmasDecorations />}
            <Toaster 
              theme="dark" 
              richColors