feat: update simulation colortheme when theme changes

michaelbrusegard · Jan 1, 2025 · a43b7f2 · a43b7f2
1 parent 3d6a877
commit a43b7f2
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 19 deletions.
diff --git a/src/components/layout/DarkModeButton.tsx b/src/components/layout/DarkModeButton.tsx
@@ -3,9 +3,11 @@
 import { useTheme } from 'next-themes';
 import { SunIcon } from '@/components/assets/SunIcon';
 import { MoonIcon } from '@/components/assets/MoonIcon';
+import { useSimulation } from '@/components/providers/SimulationProvider';
 
 function DarkModeButton() {
   const { resolvedTheme, setTheme } = useTheme();
+  const { updateColorTheme } = useSimulation();
 
   if (!resolvedTheme) return null;
 
@@ -19,6 +21,7 @@ function DarkModeButton() {
     } else {
       setTheme(resolvedTheme.replace('light', 'dark'));
     }
+    updateColorTheme();
   }
 
   const title = isDarkMode ? 'Switch to light mode' : 'Switch to dark mode';

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { m, Variants } from 'motion/react';
+import { m } from 'motion/react';
 import { fadeIn } from '../../utils/motion';
 import { Logo } from '@/components/assets/Logo';
 import { DarkModeButton } from '@/components/layout/DarkModeButton';
@@ -11,11 +11,7 @@ function Header() {
   return (
     <header className='fixed top-0 z-20 flex w-full items-center bg-secondary px-6 py-5 shadow-xl sm:px-11 md:px-16'>
       <div className='mx-auto flex w-full max-w-7xl select-none items-center justify-between'>
-        <m.div
-          variants={fadeIn('', '', 0, 1) as Variants}
-          initial='hidden'
-          animate='show'
-        >
+        <m.div variants={fadeIn('', '', 0, 1)} initial='hidden' animate='show'>
           <Link
             className='flex items-center gap-2'
             href='/'
@@ -31,7 +27,7 @@ function Header() {
         </m.div>
         <ul className='hidden flex-row gap-10 sm:flex'>
           <m.li
-            variants={fadeIn('down', '', 0.25, 1) as Variants}
+            variants={fadeIn('down', '', 0.25, 1)}
             initial='hidden'
             animate='show'
             whileHover={{ translateY: '-2px' }}
@@ -45,7 +41,7 @@ function Header() {
             </Link>
           </m.li>
           <m.li
-            variants={fadeIn('down', '', 0.5, 1) as Variants}
+            variants={fadeIn('down', '', 0.5, 1)}
             initial='hidden'
             animate='show'
             whileHover={{ translateY: '-2px' }}
@@ -59,7 +55,7 @@ function Header() {
             </Link>
           </m.li>
           <m.li
-            variants={fadeIn('down', '', 0.75, 1) as Variants}
+            variants={fadeIn('down', '', 0.75, 1)}
             initial='hidden'
             animate='show'
             whileHover={{ translateY: '-2px' }}
@@ -89,21 +85,13 @@ function Header() {
         </ul>
         <m.div
           className='flex flex-1 items-center justify-end sm:hidden'
-          variants={fadeIn('down', '', 0.25, 1) as Variants}
+          variants={fadeIn('down', '', 0.25, 1)}
           initial='hidden'
           animate='show'
         >
           {/* <MenuButton onClick={handleClick} isOpen={isOpen} /> */}
         </m.div>
       </div>
-      {/* <MobileMenu */}
-      {/*   isOpen={isOpen} */}
-      {/*   onClose={handleMenuItemClick} */}
-      {/*   isDarkMode={isDarkMode} */}
-      {/*   PaletteIcon={PaletteIcon} */}
-      {/*   SunIcon={SunIcon} */}
-      {/*   MoonIcon={MoonIcon} */}
-      {/* /> */}
     </header>
   );
 }

diff --git a/src/components/layout/ThemeButton.tsx b/src/components/layout/ThemeButton.tsx
@@ -2,9 +2,11 @@
 
 import { useTheme } from 'next-themes';
 import { PaletteIcon } from '@/components/assets/PaletteIcon';
+import { useSimulation } from '@/components/providers/SimulationProvider';
 
 function ThemeButton() {
   const { resolvedTheme, setTheme } = useTheme();
+  const { updateColorTheme } = useSimulation();
 
   if (!resolvedTheme) return null;
 
@@ -31,6 +33,7 @@ function ThemeButton() {
     const nextType = themeTypes[nextIndex];
 
     setTheme(`${mode}${nextType}`);
+    updateColorTheme();
   }
 
   const title = 'Change color theme';

diff --git a/src/components/providers/SimulationProvider.tsx b/src/components/providers/SimulationProvider.tsx
@@ -6,6 +6,7 @@ import { createContext, useContext, useEffect, useRef } from 'react';
 type SimulationContextType = {
   multipleSplats: (amount: number) => void;
   lowerBrightnessHover: (element: HTMLElement) => void;
+  updateColorTheme: () => void;
 };
 
 const SimulationContext = createContext<SimulationContextType | null>(null);
@@ -98,6 +99,18 @@ function SimulationProvider({ children }: { children: React.ReactNode }) {
     };
   }, []);
 
+  function updateColorTheme() {
+    setTimeout(() => {
+      simulation.current?.setConfig({
+        colorPalette: [
+          hslToHex(...getCSSColorValue('--primary')),
+          hslToHex(...getCSSColorValue('--secondary')),
+          hslToHex(...getCSSColorValue('--accent')),
+        ],
+      });
+    }, 0);
+  }
+
   function multipleSplats(amount: number) {
     simulation.current?.multipleSplats(amount);
   }
@@ -151,7 +164,7 @@ function SimulationProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <SimulationContext.Provider
-      value={{ multipleSplats, lowerBrightnessHover }}
+      value={{ multipleSplats, lowerBrightnessHover, updateColorTheme }}
     >
       <div className='fixed left-0 top-0 h-full w-full'>
         <div ref={containerRef} className='h-full w-full' />