Merry Christmas

package.json

@@ -34,19 +34,21 @@
 		"nextra-theme-docs": "^4.6.1",
 		"react": "^19.2.3",
 		"react-dom": "^19.2.3",
+		"react-snowfall": "^2.4.0",
 		"sonner": "^2.0.7",
 		"viem": "^2.43.1"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.56.1",
-		"playwright": "^1.56.1",
 		"@react-native-async-storage/async-storage": "^2.1.2",
+		"@sparticuz/chromium": "^141.0.0",
+		"@sparticuz/chromium-min": "^141.0.0",
 		"@types/node": "18.11.10",
 		"@types/react": "^19.2.7",
 		"@types/react-dom": "^19.2.3",
 		"autoprefixer": "^10.4.23",
-		"cssnano": "^6.1.2",
 		"concurrently": "^9.1.2",
+		"cssnano": "^6.1.2",
 		"globby": "^14.1.0",
 		"husky": "^9.1.7",
 		"jest": "^29.7.0",
@@ -56,19 +58,18 @@
 		"next-sitemap": "^4.2.3",
 		"node-fetch": "^3.3.2",
 		"pagefind": "^1.3.0",
+		"pino-pretty": "^13.0.0",
+		"playwright": "^1.56.1",
 		"postcss": "^8.5.6",
 		"postcss-simple-vars": "^7.0.1",
 		"prettier": "^3.5.3",
 		"puppeteer": "^24.31.0",
+		"puppeteer-core": "^24.31.0",
 		"tailwindcss": "^4.1.18",
+		"terser": "^5.31.0",
 		"tsx": "^4.19.3",
 		"typescript": "^5.9.3",
-		"wait-on": "^9.0.1",
-		"puppeteer-core": "^24.31.0",
-		"pino-pretty": "^13.0.0",
-		"@sparticuz/chromium": "^141.0.0",
-		"@sparticuz/chromium-min": "^141.0.0",
-		"terser": "^5.31.0"
+		"wait-on": "^9.0.1"
 	},
 	"resolutions": {
 		"@istanbuljs/load-nyc-config/js-yaml": "3.14.2",

src/components/Logo/Logo.tsx

@@ -1,6 +1,8 @@
+import { ENABLE_CHRISTMAS_THEME } from '../../constants/featureFlags';
+
 export function Logo() {
 	return (
-		<svg width='84' viewBox='0 0 194 73' fill='none' xmlns='http://www.w3.org/2000/svg'>
+		<svg width='84' viewBox='0 0 194 73' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ overflow: 'visible' }}>
 			<path
 				fillRule='evenodd'
 				clipRule='evenodd'
@@ -19,13 +21,29 @@ export function Logo() {
 				d='M188.957 10.0863C191.722 10.0863 194 7.80873 194 5.04314C194 2.19621 191.722 0 188.957 0C186.191 0 183.913 2.19621 183.913 5.04314C183.913 7.80873 186.191 10.0863 188.957 10.0863ZM185.215 59.2975H192.861V19.5218H185.215V59.2975Z'
 				fill='currentColor'
 			/>
+			{/* Christmas Hat */}
+			{ENABLE_CHRISTMAS_THEME && (
+				<g transform='translate(30 0) rotate(-15) scale(1.5) translate(-36 0)'>
+					<path d='M20 -2 Q 36 -35 60 5 L 20 -2 Z' fill='#9E1F19' />
+					<circle cx='60' cy='5' r='5' fill='white' />
+					<rect x='18' y='-4' width='36' height='8' rx='4' fill='white' />
+				</g>
+			)}
 		</svg>
 	);
 }
 
 export function LogoMobile() {
 	return (
-		<svg width='32' height='32' viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'>
+		<svg width='32' height='32' viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ overflow: 'visible' }}>
+			{/* Christmas Hat */}
+			{ENABLE_CHRISTMAS_THEME && (
+				<g transform='translate(36 0) rotate(-15) scale(1.5) translate(-36 0)'>
+					<path d='M20 -2 Q 36 -35 60 5 L 20 -2 Z' fill='#9E1F19' />
+					<circle cx='60' cy='5' r='5' fill='white' />
+					<rect x='18' y='-4' width='36' height='8' rx='4' fill='white' />
+				</g>
+			)}
 			<path
 				fillRule='evenodd'
 				clipRule='evenodd'

src/components/Snowflakes/Snowflakes.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import React from 'react';
+import Snowfall from 'react-snowfall';
+
+export const Snowflakes = () => {
+	return (
+		<Snowfall
+			style={{
+				position: 'fixed',
+				width: '100vw',
+				height: '100vh',
+				zIndex: 50,
+				pointerEvents: 'none'
+			}}
+			snowflakeCount={200}
+		/>
+	);
+};

src/constants/featureFlags.ts

@@ -0,0 +1 @@
+export const ENABLE_CHRISTMAS_THEME = true;

src/providers/DocsProviders.tsx

@@ -9,6 +9,8 @@ import { Footer } from '../components/Footer/Footer';
 import { Theme } from '@radix-ui/themes';
 import { ThemeSwitch } from 'nextra-theme-docs';
 import { usePathname } from 'next/navigation';
+import { Snowflakes } from '../components/Snowflakes/Snowflakes';
+import { ENABLE_CHRISTMAS_THEME } from '../constants/featureFlags';
 
 // Defer Nextra Search until user clicks the trigger (client-only wrapper)
 const SearchDynamic = dynamic(() => import('../components/NextraSearch/NextraSearch'), { ssr: false, loading: () => <div /> });
@@ -85,6 +87,7 @@ export default function DocsProviders({ children, pageMap }) {
 				pageMap={pageMap}>
 				{isMobile && <ConditionalNavbar />}
 				<Theme accentColor='red' grayColor='gray' scaling='100%'>
+					{ENABLE_CHRISTMAS_THEME && <Snowflakes />}
 					{!isMobile && <ConditionalNavbar />}
 					{children}
 				</Theme>

yarn.lock

@@ -7705,6 +7705,11 @@ react-dom@^19.2.3:
   dependencies:
     scheduler "^0.27.0"
 
+react-fast-compare@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-is@^18.0.0:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
@@ -7734,6 +7739,13 @@ react-remove-scroll@^2.6.3:
     use-callback-ref "^1.3.3"
     use-sidecar "^1.1.3"
 
+react-snowfall@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-snowfall/-/react-snowfall-2.4.0.tgz#79ad34431f2353e842a87be1af3f1f5355e25806"
+  integrity sha512-KAPMiGnxt11PEgC2pTVrTQsvk5jt1kLUtG+ZamiKLphTZ7GiYT1Aa5kX6jp4jKWq1kqJHchnGT9CDm4g86A5Gg==
+  dependencies:
+    react-fast-compare "^3.2.2"
+
 react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"