feat: add 'matrix' theme with animated Matrix rain effect and corresponding styles

Author: bristledev

src/_includes/base.njk

@@ -15,7 +15,7 @@
 		<script>
 			// Initialize theme safely before body renders
 			const savedTheme = localStorage.getItem("theme");
-			const validThemes = ["dark", "light", "sepia"];
+			const validThemes = ["dark", "light", "sepia", "matrix"];
 			if (savedTheme && validThemes.includes(savedTheme)) {
 				document.documentElement.setAttribute("data-theme", savedTheme);
 			} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
@@ -94,8 +94,7 @@
 							<select id="theme-select" aria-label="Select color theme">
 								<option value="light">Light</option>
 								<option value="dark">Dark</option>
-								<option value="sepia">Sepia</option>
-							</select>
+								<option value="sepia">Sepia</option>							<option value="matrix">Matrix</option>							</select>
 						</li>
 					</ul>
 				</header>
@@ -157,6 +156,11 @@
 				const newTheme = e.target.value;
 				document.documentElement.setAttribute('data-theme', newTheme);
 				localStorage.setItem('theme', newTheme);
+				if (newTheme === 'matrix') {
+					startMatrixRain();
+				} else {
+					stopMatrixRain();
+				}
 			});
 
 			// Mobile Menu Toggle
@@ -205,6 +209,108 @@
 				}
 			});
 
+			// Matrix Rain Animation
+			let matrixAnimId = null;
+			let matrixCanvas = null;
+
+			function startMatrixRain() {
+				if (matrixCanvas) return; // already running
+
+				matrixCanvas = document.createElement('canvas');
+				matrixCanvas.id = 'matrix-canvas';
+				document.body.appendChild(matrixCanvas);
+
+				const ctx = matrixCanvas.getContext('2d');
+				let w, h, columns, drops;
+
+				// Half-width katakana + digits for that authentic Matrix look
+				const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789';
+
+				function resize() {
+					w = matrixCanvas.width = window.innerWidth;
+					h = matrixCanvas.height = window.innerHeight;
+					const fontSize = 16;
+					columns = Math.floor(w / fontSize);
+					// Preserve existing drop positions where possible
+					const oldDrops = drops;
+					drops = new Array(columns);
+					for (let i = 0; i < columns; i++) {
+						drops[i] = (oldDrops && oldDrops[i] != null) ? oldDrops[i] : Math.random() * -100;
+					}
+				}
+
+				resize();
+				window.addEventListener('resize', resize);
+
+				const fontSize = 16;
+				const frameInterval = 1000 / 12; // Cap at 12 FPS
+				let lastFrameTime = 0;
+
+				function draw(now) {
+					matrixAnimId = requestAnimationFrame(draw);
+
+					if (now - lastFrameTime < frameInterval) return;
+					lastFrameTime = now;
+
+					// Semi-transparent black to create fade trail
+					ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+					ctx.fillRect(0, 0, w, h);
+
+					ctx.fillStyle = '#00ff41';
+					ctx.font = fontSize + 'px monospace';
+
+					for (let i = 0; i < columns; i++) {
+						const char = chars[Math.floor(Math.random() * chars.length)];
+						const x = i * fontSize;
+						const y = drops[i] * fontSize;
+
+						// Bright leading character
+						if (y > 0 && y < h) {
+							ctx.fillStyle = '#aaffaa';
+							ctx.fillText(char, x, y);
+							ctx.fillStyle = '#00ff41';
+						}
+
+						// Main trail character (one step behind)
+						if (y - fontSize > 0) {
+							const trailChar = chars[Math.floor(Math.random() * chars.length)];
+							ctx.fillText(trailChar, x, y - fontSize);
+						}
+
+						drops[i]++;
+
+						// Reset drop to top with randomness for natural feel
+						if (drops[i] * fontSize > h && Math.random() > 0.975) {
+							drops[i] = 0;
+						}
+					}
+
+					matrixAnimId = requestAnimationFrame(draw);
+				}
+
+				matrixAnimId = requestAnimationFrame(draw);
+
+				// Store resize handler reference for cleanup
+				matrixCanvas._resizeHandler = resize;
+			}
+
+			function stopMatrixRain() {
+				if (matrixAnimId) {
+					cancelAnimationFrame(matrixAnimId);
+					matrixAnimId = null;
+				}
+				if (matrixCanvas) {
+					window.removeEventListener('resize', matrixCanvas._resizeHandler);
+					matrixCanvas.remove();
+					matrixCanvas = null;
+				}
+			}
+
+			// Start rain on load if matrix theme is active
+			if (initialTheme === 'matrix') {
+				startMatrixRain();
+			}
+
 			// Copy Code Button
 			const preBlocks = document.querySelectorAll('pre');
 			preBlocks.forEach((pre) => {

src/style.css

@@ -47,7 +47,7 @@
 }
 
 @media (prefers-color-scheme: light) {
-	:root:not([data-theme="dark"]):not([data-theme="sepia"]) {
+	:root:not([data-theme="dark"]):not([data-theme="sepia"]):not([data-theme="matrix"]) {
 		color-scheme: light;
 		--bg: #f0f4f8;
 		--text-color: #1f2937;
@@ -84,6 +84,32 @@
 	--pagefind-ui-border: var(--border);
 }
 
+:root[data-theme="matrix"] {
+	color-scheme: dark;
+	--bg: #000000;
+	--text-color: #00ff41;
+	--text-color-light: #00cc33;
+	--link-color: #7fff00;
+	--link-color-visited: #32cd32;
+	--accent: #00ff41;
+	--gray-light: #0a0a0a;
+	--gray-medium: #003b00;
+	--gray-dark: #000;
+	--surface: #0a0f0a;
+	--border: #003b00;
+
+	/* Pagefind Theming */
+	--pagefind-ui-scale: 0.8;
+	--pagefind-ui-primary: var(--accent);
+	--pagefind-ui-text: var(--text-color);
+	--pagefind-ui-background: var(--surface);
+	--pagefind-ui-border: var(--border);
+	--pagefind-ui-tag: var(--gray-medium);
+	--pagefind-ui-border-width: 1px;
+	--pagefind-ui-border-radius: 4px;
+	--pagefind-ui-font: 'JetBrains Mono', monospace;
+}
+
 * {
 	box-sizing: border-box;
 }
@@ -101,6 +127,48 @@ body {
 	background-size: 50px 50px;
 }
 
+/* Matrix theme overrides */
+:root[data-theme="matrix"] body {
+	background-image: none;
+	background-color: transparent;
+}
+
+:root[data-theme="matrix"] .app-layout {
+	position: relative;
+	z-index: 1;
+}
+
+:root[data-theme="matrix"] .sidebar {
+	background-color: rgba(0, 10, 0, 0.85);
+}
+
+:root[data-theme="matrix"] .container {
+	background-color: rgba(0, 0, 0, 0.8);
+}
+
+:root[data-theme="matrix"] .chapter-link:hover,
+:root[data-theme="matrix"] .chapter-link.active {
+	background-color: rgba(0, 60, 0, 0.4);
+}
+
+:root[data-theme="matrix"] pre[class*="language-"] {
+	background-color: rgba(0, 10, 0, 0.9);
+}
+
+:root[data-theme="matrix"] footer {
+	background-color: transparent;
+}
+
+#matrix-canvas {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 0;
+	pointer-events: none;
+}
+
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
 	width: 12px;