Add lava animation themes

Author: escherlies

src/App.tsx

@@ -1,14 +1,29 @@
 import { startLavaAnimation } from "./lava/app"
 import { createEffect } from 'solid-js';
+import { useThemeStore, colorSchemes } from './stores/theme';
 
 function App() {
-  createEffect(() => startLavaAnimation())
+  const { currentTheme, cycleTheme } = useThemeStore();
+
+  createEffect(() => {
+    const cleanup = startLavaAnimation(colorSchemes[currentTheme()]);
+    return cleanup;
+  });
 
   return (
     <>
       {/* Background. Mounting point for lava animation */}
       <canvas id="background" class="fixed inset-0 w-screen h-screen" />
 
+      {/* Theme toggle button */}
+      <button
+        onClick={cycleTheme}
+        class="fixed top-4 right-4 z-10 px-4 py-2 bg-white/10 backdrop-blur-sm rounded-lg 
+               hover:bg-white/20 transition-colors text-white font-medium"
+      >
+        Theme: {currentTheme()}
+      </button>
+
       {/* Content */}
       <div class="relative min-h-screen text-white">
         {/* Hero section */}

src/lava/app.js

@@ -8,10 +8,16 @@ import fragmentShader from './glsl/fragment.glsl';
  * The animation uses spherical coordinates to position the camera and renders
  * a full-screen quad with custom shaders.
  * 
+ * @param {Object} options Configuration options
+ * @param {number[]} [options.backgroundColor=[0.4, 0.1, 0.4]] Background color as RGB array
+ * @param {number[]} [options.lavaColor=[2.0, 0.8, -0.6]] Lava color as RGB array
  * @returns {Function} A cleanup function that cancels the animation frame when called
  * @throws {Error} If WebGL context cannot be obtained or shader compilation fails
  */
-export function startLavaAnimation() {
+export function startLavaAnimation({ 
+  backgroundColor = [0.4, 0.1, 0.4],
+  lavaColor = [2.0, 0.8, -0.6]
+} = {}) {
   // Calculate camera position
   // based on THREE.Vector3.setFromSphericalCoords(radius, phi, theta)
   const DEG_TO_RAD = Math.PI / 180;
@@ -52,6 +58,8 @@ export function startLavaAnimation() {
         uTime: time * 0.001,
         uResolution: [canvasWidth, canvasHeight],
         uCameraPosition: cameraPosition,
+        uBackgroundColor: backgroundColor,
+        uLavaColor: lavaColor,
       };
 
       gl.useProgram(programInfo.program);

src/lava/glsl/fragment.glsl

@@ -3,9 +3,8 @@ precision mediump float;
 uniform float uTime;
 uniform vec2 uResolution;
 uniform vec3 uCameraPosition;
-
-vec3 backgroundColor = vec3(0.4, 0.1, 0.4);
-vec3 lavaColor = vec3(2.0, 0.8, -0.6);
+uniform vec3 uBackgroundColor;
+uniform vec3 uLavaColor;
 
 // Based on https://www.shadertoy.com/view/fsKXDm
 
@@ -119,8 +118,8 @@ void main() {
 
   gl_FragColor = vec4(
     mix(
-      backgroundColor,
-      lavaColor,
+      uBackgroundColor,
+      uLavaColor,
       col
     ),
     1.0

src/stores/theme.ts

@@ -0,0 +1,55 @@
+import { createSignal } from 'solid-js';
+
+type ThemeName = 'Lambda Nix' | 'Nix Blue' | 'Lava' | 'Ocean' | 'Acid';
+
+export const colorSchemes: Record<ThemeName, { backgroundColor: number[], lavaColor: number[] }> = {
+  'Lambda Nix': {
+    backgroundColor: [0.15, 0.05, 0.25],  // More purple-dominant dark base
+    lavaColor: [0.72, 0.89, 1.22]      // Slightly darker blue tint
+  },
+  'Nix Blue': {
+    backgroundColor: [0.126, 0.194, 0.314],  // Darker blue-purple tint (80% of #324D7D)
+    lavaColor: [0.72, 0.89, 1.22]      // Slightly darker blue tint
+  },
+  'Lava': {
+    backgroundColor: [0.4, 0.1, 0.4],    // Original purple-tinted background
+    lavaColor: [2.0, 0.8, -0.6]
+  },
+  'Ocean': {
+    backgroundColor: [0.05, 0.08, 0.25],  // Added cyan-blue tint
+    lavaColor: [0.0, 1.2, 2.0]
+  },
+  'Acid': {
+    backgroundColor: [0.08, 0.15, 0.05],  // Added yellowish-green tint
+    lavaColor: [0.8, 1.5, 0.0]
+  }
+};
+
+const themes: ThemeName[] = ['Lambda Nix', 'Nix Blue', 'Lava', 'Ocean', 'Acid'];
+
+// Get initial theme from localStorage or default to 'Lava'
+const savedTheme = localStorage.getItem('theme') as ThemeName;
+const initialTheme: ThemeName = themes.includes(savedTheme) ? savedTheme : 'Lava';
+
+const [currentTheme, setCurrentTheme] = createSignal<ThemeName>(initialTheme);
+
+export const useThemeStore = () => {
+  const cycleTheme = () => {
+    const current = currentTheme();
+    const currentIndex = themes.indexOf(current);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    const newTheme = themes[nextIndex];
+    
+    localStorage.setItem('theme', newTheme);
+    setCurrentTheme(newTheme);
+  };
+
+  return {
+    currentTheme,
+    setTheme: (theme: ThemeName) => {
+      localStorage.setItem('theme', theme);
+      setCurrentTheme(theme);
+    },
+    cycleTheme
+  };
+};