Add dark mode

haydenlinder · Feb 20, 2024 · fbdb748 · fbdb748
1 parent a974c7f
commit fbdb748
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 32 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="dark" lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -1,11 +1,11 @@
 import { useRef } from 'react'
 import Model from './Model'
 import { useFrame, useThree } from '@react-three/fiber'
-import { Html, Text3D, useAspect } from '@react-three/drei'
+import { Html, useAspect } from '@react-three/drei'
 import state from '../state'
 import { Vector3 } from 'three/src/math/Vector3'
 import { Box } from '@react-three/flex'
-import { Group, MeshBasicMaterial } from 'three'
+import { Group } from 'three'
 import Text from './Text'
 
 const About = ({ }) => {
@@ -70,7 +70,7 @@ const About = ({ }) => {
                             <planeBufferGeometry args={[3.5,0.6]}/>
                             <meshBasicMaterial color='black' opacity={0.3} transparent/>
                         </mesh>
-                        <Text position={[-1.3,-0.15,0]} color='white' size={0.2}  thickness={0.2}>
+                        <Text immune position={[-1.3,-0.15,0]} color='white' size={0.2}  thickness={0.2}>
                             San Francisco
                         </Text>
                     </group>

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -3,16 +3,18 @@ import { Box } from '@react-three/flex'
 import Model from './Model'
 import { useFrame } from '@react-three/fiber'
 import { useRef } from 'react'
-import { Group, Vector2, Vector3 } from 'three'
+import { Group, Vector3 } from 'three'
+import { ColoredMaterial } from './ColoredMaterial'
 
-const physicalMaterial = <meshPhysicalMaterial />
 const Calendar = ({ }) => {
     const paperRef = useRef<Group>(null)
     useFrame(() => {
         const paper = paperRef.current
         if (!paper) return
         paper.rotation.y += 0.01
     })
+
+    const material = <ColoredMaterial/>
     return (
         <Box
             height='100%'
@@ -22,7 +24,7 @@ const Calendar = ({ }) => {
             <group scale={new Vector3(15,15,15)} position={[0, -10, 0]}>
                 <mesh receiveShadow castShadow rotation={[0, Math.PI / 4, 0]}>
                     <boxBufferGeometry args={[1, 1, 1]} />
-                    {physicalMaterial}
+                    {material}
                 </mesh>
                 <Html center position={[0, 1.6, 0]} scale={150}>
                     <a

diff --git a/src/components/ColoredMaterial.tsx b/src/components/ColoredMaterial.tsx
@@ -0,0 +1,32 @@
+import { useFrame } from "@react-three/fiber"
+import { useRef } from "react"
+import { isDark } from "../utils/darkMode"
+import { BackSide, Color, MeshPhysicalMaterial } from "three"
+
+export const ColoredMaterial = () => {
+    const ref = useRef<MeshPhysicalMaterial>(null)
+    useFrame(() => {
+        if (isDark() && !ref.current?.color.equals(new Color('black'))) {
+            ref.current?.setValues?.({color: 'black'})
+            if (ref.current?.color) ref.current.color = new Color('black')
+        } else if (!isDark() && ref.current?.color.equals(new Color('black'))) {
+           ref.current?.setValues?.({color: 'white'})
+           if (ref.current?.color) ref.current.color = new Color('white')
+        }
+})  
+return <meshPhysicalMaterial ref={ref}/>
+}
+
+export const ColoredMaterialBackSide = () => {
+    const ref = useRef<MeshPhysicalMaterial>(null)
+    useFrame(() => {
+        if (isDark() && !ref.current?.color.equals(new Color('black'))) {
+            ref.current?.setValues?.({color: 'black'})
+            if (ref.current?.color) ref.current.color = new Color('black')
+        } else if (!isDark() && ref.current?.color.equals(new Color('black'))) {
+            ref.current?.setValues?.({color: 'white'})
+            if (ref.current?.color) ref.current.color = new Color('white')
+        }
+    })  
+    return <meshPhysicalMaterial ref={ref} transparent opacity={0.7} side={BackSide} />
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -2,7 +2,7 @@ import state from '../state'
 import { Html } from '@react-three/drei'
 import { useThree, useFrame } from '@react-three/fiber'
 import { useAspect } from '@react-three/drei'
-import React, { MouseEventHandler, useRef } from 'react'
+import { MouseEventHandler, useRef } from 'react'
 
 const Header = () => {
     const menuRef = useRef<HTMLDivElement>(null)
@@ -43,6 +43,7 @@ const Header = () => {
                     }}
                     >
                     <div
+                    className='dark op'
                         style={{
                             display: 'flex',
                             flexDirection: 'column',
@@ -60,21 +61,29 @@ const Header = () => {
                         </div>
                         <div>Web Developer</div>
                     </div>
+                    {/* MENU */}
                     <div
                         ref={menuRef}
+                        className='menu'
                         style={{
                             padding: '10px',
                             border: '1px solid black',
                             borderRadius: 10,
                             cursor: 'pointer',
                             right: '20px',
-                            background: 'white',
                             height: 'fit-content'
                         }}
                         onClick={handleClick}
                     >
                         Menu
                     </div>
+                    {/* SWITCH */}
+                    <div>
+                    <label className="switch">
+                        <input type="checkbox" onClick={()=>document.querySelector('html')?.classList.toggle('dark')}/>
+                    <span className="slider round"></span>
+                    </label>
+                    </div>
                 </nav>
             </header>
         </Html>

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
@@ -1,16 +1,15 @@
 import { Box } from '@react-three/flex'
 import { useFrame } from '@react-three/fiber'
 import { useRef } from 'react'
-import { Plane, Text3D, useFont } from '@react-three/drei'
+import { Plane } from '@react-three/drei'
 import Model from './Model'
 import state from '../state'
-import { BackSide, BoxGeometry, Group, Mesh, MeshBasicMaterial, SphereGeometry, Vector3 } from 'three'
+import { Group, Mesh, Vector3 } from 'three'
+import { ColoredMaterial, ColoredMaterialBackSide } from './ColoredMaterial'
+import Text from './Text'
 
 
 
-const physicalMaterial = <meshPhysicalMaterial transparent opacity={0.7} />
-const physicalMaterialBackSide = <meshPhysicalMaterial transparent opacity={0.7} side={BackSide} />
-
 type Props = React.PropsWithChildren<{
     spin?: boolean;
     text: string;
@@ -74,6 +73,9 @@ const MenuItem = ({
         onPointerUp: handlePointerUp,
     }
 
+    let material = <ColoredMaterial/>
+    let materialBackSide = <ColoredMaterialBackSide/>
+
     return (
         <Box 
             centerAnchor 
@@ -83,19 +85,19 @@ const MenuItem = ({
             >
                 <group ref={boxRef} {...listeners}>
                     <Plane args={[12,12]}  receiveShadow>
-                        {physicalMaterial}
+                        {material}
                     </Plane> 
                     <Plane args={[12,12]} rotation={[Math.PI/2,0,0]} position={[0,6,6]} receiveShadow>
-                        {physicalMaterial}
+                        {material}
                     </Plane> 
                     <Plane args={[12,12]} rotation={[Math.PI/2,0,0]} position={[0,-6,6]} receiveShadow>
-                        {physicalMaterialBackSide}
+                        {materialBackSide}
                     </Plane> 
                     <Plane args={[12,12]} rotation={[0,Math.PI/2,0]} position={[-6,0,6]} receiveShadow>
-                        {physicalMaterial}
+                        {material}
                     </Plane> 
                     <Plane args={[12,12]} rotation={[0,Math.PI/2,0]} position={[6,0,6]} receiveShadow>
-                        {physicalMaterialBackSide}
+                        {materialBackSide}
                     </Plane> 
                 </group>
                 <group 
@@ -107,10 +109,10 @@ const MenuItem = ({
                             <Model {...modelProps} />
                         </group>
                     }
-                    <group position={new Vector3(-2,-1,0)}>
-                        <Text3D castShadow up={new Vector3(10,10,10)} material={new MeshBasicMaterial({ color: 'black' })} font={'/fonts/helvetiker_regular.typeface.json'} position={[0,-3,0]}>
+                    <group position={new Vector3(-0.4*text.length,-4,0)}>
+                        <Text hAlign='center' vAlign='center' size={0.7} thickness={1}>
                             {text}
-                        </Text3D>
+                        </Text>
                     </group>
                 </group>
             </group>

diff --git a/src/components/Model.tsx b/src/components/Model.tsx
@@ -22,7 +22,6 @@ const Model = ({
 
   model.scene.traverse((child) => {
     const c = child as Mesh;
-    console.log({c})
       if (c.isMesh && !Array.isArray(c.material)) {
           c.castShadow = true
           c.receiveShadow = true

diff --git a/src/components/ProjectItem.tsx b/src/components/ProjectItem.tsx
@@ -22,7 +22,7 @@ const ProjectItem = ({
         <group position={[0, 0.5, 0]} ref={groupRef}>
             <Html center scale={20} zIndexRange={[999,0]} >       
                 <div ref={htmlRef} style={{ display: 'flex', fontSize: 25, flexDirection: 'column', alignItems: 'center', margin: 10, textAlign: 'center'}}>
-                    <div style={{ background: 'rgb(255,255,2550)', border: '1px solid black', borderRadius: 5, padding: 20}}>
+                    <div className='dark' style={{ background: 'rgb(255,255,2550)', border: '1px solid black', borderRadius: 5, padding: 20}}>
                         <a href={link} target='_blank' style={{fontWeight: 'bold'}}>{title}</a>
                         <div>{description}</div>
                     </div>

diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
@@ -7,7 +7,9 @@ import ProjectItem from './ProjectItem'
 import { Box } from '@react-three/flex'
 import Atom from './Atom'
 import { Group, Vector3 } from 'three'
-const physicalMaterial = <meshPhysicalMaterial />
+import { ColoredMaterial } from './ColoredMaterial'
+const physicalMaterial = <ColoredMaterial />
+
 
 const Projects = ({ }) => {
     const panRef = useRef<Group>(null)

diff --git a/src/components/Resume.tsx b/src/components/Resume.tsx
@@ -3,7 +3,7 @@ import { Html } from '@react-three/drei'
 import { Box } from '@react-three/flex'
 import state from '../state'
 import { Vector3 } from 'three'
-const physicalMaterial = <meshPhysicalMaterial />
+import { ColoredMaterial } from './ColoredMaterial'
 
 const handleClick =( e: React.MouseEvent) => {
     state.top = state.vpHeight * 4
@@ -34,7 +34,7 @@ const Resume = ({}) => {
             <group scale={new Vector3(15,15,15)} position={[0,-10,0]}>
                 <mesh receiveShadow castShadow rotation={[0,Math.PI/4,0]}>
                     <boxBufferGeometry args={[1,1,1]}/>
-                    {physicalMaterial}
+                    <ColoredMaterial/>
                 </mesh>
                 <Html center position={[0,1.6,0]} scale={150}> 
                     <a 

diff --git a/src/components/Text.tsx b/src/components/Text.tsx
@@ -1,10 +1,11 @@
-import React, { useMemo } from "react"
+import { useMemo, useRef } from "react"
 import * as data from "../helvetiker_regular.typeface.json"
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
-import { Object3DNode, extend } from '@react-three/fiber'
+import { Object3DNode, extend, useFrame } from '@react-three/fiber'
 
-import { Vector3 } from 'three'
+import { Color, MeshPhysicalMaterial } from 'three'
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
+import { isDark } from "../utils/darkMode"
 extend({ TextGeometry })
 declare module "@react-three/fiber" {
     interface ThreeElements {
@@ -18,6 +19,7 @@ const Text = ({
     size = 1,
     thickness = 2,
     color = "#000000",
+    immune = false,
     ...props
 }) => {
     const config = useMemo(() => {
@@ -34,12 +36,24 @@ const Text = ({
             // bevelSegments: 8,
         })
     }, [])
+
+    const ref = useRef<MeshPhysicalMaterial>(null)
+    useFrame(() => {
+        if (immune) return
+        if (isDark() && ref.current?.color.equals(new Color('black'))) {
+            ref.current?.setValues?.({color: 'white'})
+            if (ref.current?.color) ref.current.color = new Color('white')
+        } else if (!isDark() && !ref.current?.color.equals(new Color('black'))) {
+            ref.current?.setValues?.({color: 'black'})
+            if (ref.current?.color) ref.current.color = new Color('black')
+        }
+    }) 
 
     return (
         <group {...props} scale={[0.1 * size, 0.1 * size, 0.1]}>
-            <mesh >
+            <mesh castShadow={true}>
                 <textGeometry args={[children, config]} />
-                <meshPhysicalMaterial color={color} />
+                <meshPhysicalMaterial ref={ref}  />
             </mesh>
         </group>
     )

diff --git a/src/index.css b/src/index.css
@@ -24,6 +24,89 @@ body,
   /* color: white; */
 }
 
+html.dark {
+  background-color: rgb(41, 41, 41) ;
+  color: white;
+}
+
+html.dark .dark {
+  background-color: black !important;
+  color: white;
+}
+
+html.dark .menu {
+  color: white !important;
+  border: 1px solid white !important;
+}
+
+html.dark .dark.op {
+  background-color: rgba(0, 0, 0, 0.486) !important;
+  color: white;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
 #root * {
   box-sizing: border-box;
 }