adding a dark mode

src/App.css

@@ -33,6 +33,30 @@ header {
   border-bottom: 3px solid var(--border-color);
   padding-bottom: 1rem;
 }
+header h3 {
+  display: flex;
+  justify-content: space-between;
+}
+header button {
+  display: flex;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+header .icon {
+  filter: invert(23%) sepia(11%) saturate(749%) hue-rotate(145deg) brightness(92%) contrast(92%);
+  height: 1.5rem;
+}
+.dark header .icon {
+  filter: invert(90%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(90%);
+}
+header .icon:hover {
+  transform: scale(1.02);
+}
+header .icon:active {
+  transform: scale(0.98);
+}
 /* CENTER */
 main {
   display: flex;

src/App.js

@@ -1,21 +1,34 @@
 import './App.css';
 import clones from './clones.js';
-import React from 'react';
+import React, { useState } from 'react';
 import Project from './components/project';
 import About from './components/about';
 import Connect from './components/connect';
+import switchModeIcon from './assets/dark-mode.png';
 
 function getRandomClone() {
   const randomIndex = Math.floor(Math.random() * clones.clonesList.length);
   return clones.clonesList[randomIndex];
 }
 
 function App() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+    document.body.classList.toggle('dark', !isDarkMode);
+  };
+
   return (
     <div className="layout">
       <header>
         <h1>Wylie Fisher</h1>
-        <h3>Front-End Web Developer</h3>
+        <h3>
+          Front-End Web Developer
+          <button title="switch color mode" onClick={toggleDarkMode}>
+            <img src={switchModeIcon} alt="switch mode" className="icon" />
+          </button>
+        </h3>
       </header>
       <main>
         <About />

src/components/about.js

@@ -1,11 +1,23 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import './about.css';
 import Portrait from '../assets/portrait-no-bg-color.png';
+import DarkPortrait from '../assets/portrait-dark-no-bg-color.png';
 
 const About = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  useEffect(() => {
+    const checkDarkMode = () => {
+      setIsDarkMode(document.body.classList.contains('dark'));
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <section className="about">
-      <p><img src={Portrait} alt="portrait" />Ahoy! I’m a developer with extensive front-end experience, strong problem-solving skills, and a focus on clean, standards-based code. I try to stay current with web trends, am open to emerging technologies, and am committed to continuous learning.</p>
+      <p><img src={isDarkMode ? DarkPortrait : Portrait} alt="portrait" />Ahoy! I’m a developer with extensive front-end experience, strong problem-solving skills, and a focus on clean, standards-based code. I try to stay current with web trends, am open to emerging technologies, and am committed to continuous learning.</p>
       <p>Outside of work, I’m a dad, partner, artist, and animal lover (with a dog, two cats, and a state-fair goldfish—and hopes of having chickens someday!). I’m happiest outdoors—reading, hiking, kayaking, or enjoying a campfire—and love to play with Lego and create art. Grounded by values of social justice, generosity, honesty, curiosity, and adaptability, I thrive in collaborative environments, bringing strong communication skills and adaptability to every project.</p>
     </section>
   );

src/components/connect.css

@@ -11,6 +11,10 @@
   height: 2.25rem;
   fill: var(--fill-color);
   transition: all .1s;
+  filter: invert(23%) sepia(11%) saturate(749%) hue-rotate(145deg) brightness(92%) contrast(92%);
+}
+.dark .connect .icon {
+  filter: invert(90%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(90%);
 }
 .connect .icon:hover {
   transform: scale(1.02);

src/components/project.css

@@ -15,6 +15,9 @@
   background: var(--background-contrast-color);
   transition: all .1s;
 }
+.dark .projects .project {
+  background: var(--background-dark-contrast-color);
+}
 .projects a {
   text-decoration: none;
 }

src/index.css

@@ -10,22 +10,35 @@
   --theme-color-1: #EED595;
   --theme-color-2: #F6B179;
   --theme-color-3: #264653;
-
+  
   --background-color: var(--theme-color-1);
   --background-contrast-color: var(--theme-color-2);
   --border-color: var(--theme-color-2);
   --text-color: var(--theme-color-3);
   --text-color-link: var(--theme-color-3);
   --text-color-link-hover: var(--theme-color-3);
   --fill-color: var(--theme-color-3);
-
+  
   --fontSize-h1: 3rem;
   --fontSize-h2: 1.75rem;
   --fontSize-h3: 1.25rem;
   --fontSize-primary: 1rem;
   --fontSize-secondary: .875rem;
   --fontSize-body: 1.25rem;
   --gap: 1rem;
+
+  /* dark theme */
+  --theme-dark-color-1: #06112e;
+  --theme-dark-color-2: #094e86;
+  --theme-dark-color-3: #EED595;
+
+  --background-dark-color: var(--theme-dark-color-1);
+  --background-dark-contrast-color: var(--theme-dark-color-2);
+  --border-dark-color: var(--theme-dark-color-2);
+  --text-dark-color: var(--theme-dark-color-3);
+  --text-dark-color-link: var(--theme-dark-color-3);
+  --text-dark-color-link-hover: var(--theme-dark-color-3);
+  --fill-dark-color: var(--theme-dark-color-3);
 }
 * {
   font-size: 16px;
@@ -38,6 +51,11 @@ body {
   -moz-osx-font-smoothing: grayscale;
   color: var(--text-color);
   font-size: var(--fontSize-primary);
+  transition: all .5s;
+}
+body.dark {
+  color: var(--text-dark-color);
+  background-color: var(--theme-dark-color-1);
 }
 h1, h2, h3, p {
   margin: 0;
@@ -67,3 +85,10 @@ a {
 a:hover {
   color: var(--text-color-link-hoverhover);
 }
+.dark a {
+  color: var(--text-dark-color-link);
+  font-size: inherit;
+}
+.dark a:hover {
+  color: var(--text-dark-color-link-hoverhover);
+}