Support Light and Dark mode

Magicherry · Magicherry · commit fb7b8ebe1e03 · 2026-03-21T06:12:21.000-04:00
diff --git a/src/App.js b/src/App.js
@@ -15,6 +15,50 @@ import AnimatedRoutes from "./components/MainFrame/AnimatedRoutes";
 function App() {
   const [load, upadateLoad] = useState(true);
   const preloaderTimerRef = useRef(null);
+  const [theme, setTheme] = useState(() => {
+    if (typeof window !== "undefined") {
+      if (window.localStorage && window.localStorage.getItem("theme")) {
+        return window.localStorage.getItem("theme");
+      }
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+        return "light";
+      }
+    }
+    return "dark";
+  });
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+    if (typeof window !== "undefined" && window.localStorage) {
+      window.localStorage.setItem("theme", theme);
+    }
+  }, [theme]);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: light)');
+    const handleChange = (e) => {
+      // Only auto-switch if user hasn't manually set a preference
+      if (typeof window !== "undefined" && window.localStorage && !window.localStorage.getItem("theme")) {
+        setTheme(e.matches ? "light" : "dark");
+      }
+    };
+    
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    } else if (mediaQuery.addListener) {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    document.documentElement.classList.add('theme-transition');
+    setTheme((prev) => prev === "dark" ? "light" : "dark");
+    setTimeout(() => {
+      document.documentElement.classList.remove('theme-transition');
+    }, 400);
+  }, []);
 
   const triggerPreloader = useCallback(() => {
     upadateLoad(true);
@@ -150,8 +194,8 @@ function App() {
       <Preloader load={load} />
       <div className="App" id={load ? "no-scroll" : "scroll"}>
         <div className="app-top-blur" aria-hidden="true" />
-        <Navbar triggerPreloader={triggerPreloader} />
-        <Particle />
+        <Navbar triggerPreloader={triggerPreloader} theme={theme} toggleTheme={toggleTheme} />
+        <Particle theme={theme} />
         <ScrollToTop />
         <div className="content-wrap">
           <AnimatedRoutes />
diff --git a/src/components/About/Techstack.js b/src/components/About/Techstack.js
@@ -11,14 +11,14 @@ const techStackIcons = [
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg" alt="JavaScript" style={{ width: "1em", height: "1em" }} />, name: "JavaScript", link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript" },
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg" alt="Python" style={{ width: "1em", height: "1em" }} />, name: "Python", link: "https://www.python.org/" },
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/django/django-plain.svg" alt="Django" style={{ width: "1em", height: "1em", filter: "brightness(3.5) contrast(1.2)" }} />, name: "Django", link: "https://www.djangoproject.com/" },
-    { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/flask/flask-original.svg" alt="Flask" style={{ width: "1em", height: "1em", filter: "invert(1)" }} />, name: "Flask", link: "https://flask.palletsprojects.com/" },
+    { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/flask/flask-original.svg" alt="Flask" style={{ width: "1em", height: "1em" }} className="theme-invert" />, name: "Flask", link: "https://flask.palletsprojects.com/" },
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/fastapi/fastapi-original.svg" alt="FastAPI" style={{ width: "1em", height: "1em", filter: "brightness(1.2) contrast(1.1)" }} />, name: "FastAPI", link: "https://fastapi.tiangolo.com/" },
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nodejs/nodejs-original.svg" alt="Node.js" style={{ width: "1em", height: "1em",filter: "brightness(1.2) contrast(1.0)" }} />, name: "Node.js", link: "https://nodejs.org/" },
 
     // Frontend
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg" alt="React" style={{ width: "1em", height: "1em" }} />, name: "React", link: "https://react.dev/" },
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vuejs/vuejs-original.svg" alt="Vue.js" style={{ width: "1em", height: "1em" }} />, name: "Vue.js", link: "https://vuejs.org/" },
-    { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nextjs/nextjs-original.svg" alt="Next.js" style={{ width: "1em", height: "1em", filter: "invert(1)" }} />, name: "Next.js", link: "https://nextjs.org/" },
+    { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nextjs/nextjs-original.svg" alt="Next.js" style={{ width: "1em", height: "1em" }} className="theme-invert" />, name: "Next.js", link: "https://nextjs.org/" },
 
     // Databases
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original.svg" alt="MySQL" style={{ width: "1em", height: "1em", filter: "brightness(1.8) contrast(1.2)" }} />, name: "MySQL", link: "https://www.mysql.com/" },
diff --git a/src/components/About/Toolstack.js b/src/components/About/Toolstack.js
@@ -3,7 +3,7 @@ import { Col, Row } from "react-bootstrap";
 
 const toolStackIcons = [
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/windows11/windows11-original.svg" alt="Windows" style={{ width: "1em", height: "1em", filter: "brightness(1.5) contrast(1.2)" }} />, name: "Windows", link: "https://www.microsoft.com/en-us/windows" },
-    { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/apple/apple-original.svg" alt="macOS" style={{ width: "1em", height: "1em", filter: "invert(1)" }} />, name: "macOS", link: "https://www.apple.com/macos/" },
+    { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/apple/apple-original.svg" alt="macOS" style={{ width: "1em", height: "1em" }} className="theme-invert" />, name: "macOS", link: "https://www.apple.com/macos/" },
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg" alt="Linux" style={{ width: "1em", height: "1em" }} />, name: "Linux", link: "https://ubuntu.com/desktop/" },
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/jupyter/jupyter-original.svg" alt="Jupyter" style={{ width: "1em", height: "1em" }} />, name: "Jupyter", link: "https://jupyter.org/" },
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vscode/vscode-original.svg" alt="VS Code" style={{ width: "1em", height: "1em" }} />, name: "Visual Studio Code", link: "https://code.visualstudio.com/" },
diff --git a/src/components/Home/Home2.js b/src/components/Home/Home2.js
@@ -82,15 +82,16 @@ function Home2() {
                                 />
                             </Tilt>
                             <div className="d-flex justify-content-center w-100 home-about-actions">
-                                <Button 
-                                    className="download-cv-button" 
-                                    variant="primary" 
+                                <a
                                     href={cvFile}
                                     target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="floating-nav-ghost-btn"
+                                    style={{ maxWidth: '200px' }}
                                 >
                                     <AiOutlineDownload />
-                                    &nbsp;Download CV
-                                </Button>
+                                    <span>Download CV</span>
+                                </a>
                             </div>
                         </div>
                     </Col>
diff --git a/src/components/MainFrame/Navbar.js b/src/components/MainFrame/Navbar.js
@@ -10,7 +10,7 @@ import {
   AiOutlineDownload,
   AiFillStar
 } from "react-icons/ai";
-import { MdWorkOutline } from "react-icons/md";
+import { MdWorkOutline, MdDarkMode, MdLightMode } from "react-icons/md";
 import { FiSidebar, FiMapPin, FiMail, FiPhone } from "react-icons/fi";
 import { FaLinkedinIn, FaWeixin } from "react-icons/fa";
 import { SiBilibili } from "react-icons/si";
@@ -155,7 +155,7 @@ function NavLinks({ items = NAV_ITEMS, linkClassName, iconClassName, onClick, na
   });
 }
 
-function NavBar({ triggerPreloader }) {
+function NavBar({ triggerPreloader, theme, toggleTheme }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const { isSideNavVisible, toggleSideNav } = useNavMode();
   const { isScrolled, isTopNavHidden, isBottomNavHidden } = useScrollHideNav({ isExpanded, setIsExpanded });
@@ -326,8 +326,16 @@ function NavBar({ triggerPreloader }) {
               </Navbar.Collapse>
             </div>
 
-            {/* Right Column: GitHub */}
-            <div className="navbar-right-col">
+            {/* Right Column: GitHub & Theme Toggle */}
+            <div className="navbar-right-col" style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+              <button
+                type="button"
+                className="theme-toggle-btn"
+                onClick={toggleTheme}
+                aria-label="Toggle Theme"
+              >
+                {theme === "dark" ? <MdLightMode /> : <MdDarkMode />}
+              </button>
               <a
                 href="https://github.com/Magicherry/Bits-of-Me"
                 target="_blank"
@@ -347,12 +355,18 @@ function NavBar({ triggerPreloader }) {
         <div className={`floating-nav-container ${isSideNavVisible ? "show" : ""}`}>
           <div className="floating-nav-panel">
             <div className="floating-nav-header">
-              <span className="floating-nav-brand" onClick={() => { navigate("/"); if (triggerPreloader) { triggerPreloader(); } }}>
-                Bits of Me
-              </span>
               <button type="button" className="floating-nav-close" onClick={toggleSideNav} aria-label="Collapse to top navigation">
                 <FiSidebar />
               </button>
+              <button
+                type="button"
+                className="theme-toggle-btn"
+                onClick={toggleTheme}
+                aria-label="Toggle Theme"
+                style={{ width: '40px', height: '40px', fontSize: '1.1rem' }}
+              >
+                {theme === "dark" ? <MdLightMode /> : <MdDarkMode />}
+              </button>
             </div>
 
             <div className="floating-nav-profile">
@@ -480,6 +494,16 @@ function NavBar({ triggerPreloader }) {
               />
             </Nav>
           </div>
+          
+          {/* Mobile Theme Toggle Button */}
+          <button
+            type="button"
+            className="mobile-theme-toggle-btn"
+            onClick={toggleTheme}
+            aria-label="Toggle Theme"
+          >
+            {theme === "dark" ? <MdLightMode /> : <MdDarkMode />}
+          </button>
         </div>
 
         <Modal show={showWechatModal} onHide={() => setShowWechatModal(false)} centered>
diff --git a/src/components/MainFrame/Particle.js b/src/components/MainFrame/Particle.js
@@ -2,11 +2,13 @@ import React, { useEffect, useMemo } from "react";
 import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadSlim } from "@tsparticles/slim";
 
-function Particle() {
+function Particle({ theme }) {
   useEffect(() => {
     initParticlesEngine(loadSlim);
   }, []);
 
+  const particleColor = theme === "light" ? "#0284c7" : "#38bdf8";
+
   const options = useMemo(
     () => ({
       fullScreen: {
@@ -21,13 +23,13 @@ function Particle() {
       fpsLimit: 120,
       particles: {
         color: {
-          value: "#38bdf8", // 科技蓝
+          value: particleColor,
         },
         links: {
-          color: "#38bdf8",
-          distance: 160, // 增加连线判定距离，让更多节点连接
+          color: particleColor,
+          distance: 160,
           enable: true,
-          opacity: 0.15, // 稍微提高连线可见度
+          opacity: 0.15,
           width: 1,
         },
         move: {
@@ -70,11 +72,11 @@ function Particle() {
       },
       detectRetina: true,
     }),
-    []
+    [particleColor]
   );
 
   return (
-    <Particles id="tsparticles" options={options} />
+    <Particles key={theme} id="tsparticles" options={options} />
   );
 }
 
diff --git a/src/components/Projects/Projects.js b/src/components/Projects/Projects.js
@@ -7,7 +7,6 @@ import { BsGridFill, BsListUl, BsChevronDown, BsCheck } from "react-icons/bs";
 import { projects } from "./ProjectData";
 
 const SORT_OPTIONS = [
-  { value: "default", label: "Default" },
   { value: "dateDesc", label: "Newest first" },
   { value: "dateAsc", label: "Oldest first" },
 ];
@@ -22,7 +21,7 @@ const Projects = () => {
   const [viewMode, setViewMode] = useState(getInitialViewMode);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
   const [selectedTags, setSelectedTags] = useState([]);
-  const [sortBy, setSortBy] = useState("default");
+  const [sortBy, setSortBy] = useState("dateDesc");
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -35,7 +34,6 @@ const Projects = () => {
     : projects.filter(p => selectedTags.every(tag => p.tags.includes(tag)));
 
   const sortedProjects = (() => {
-    if (sortBy === "default") return filteredProjects;
     const year = (p) => parseInt(p.date, 10) || 0;
     if (sortBy === "dateDesc") return [...filteredProjects].sort((a, b) => year(b) - year(a));
     if (sortBy === "dateAsc") return [...filteredProjects].sort((a, b) => year(a) - year(b));
@@ -147,7 +145,7 @@ const Projects = () => {
                   onClick={() => setIsSortDropdownOpen(!isSortDropdownOpen)}
                 >
                   <span className="filter-dropdown-label">
-                    Sort: {SORT_OPTIONS.find(o => o.value === sortBy)?.label ?? "Default"}
+                    Sort: {SORT_OPTIONS.find(o => o.value === sortBy)?.label ?? "Newest first"}
                   </span>
                   <BsChevronDown className="dropdown-icon" />
                 </button>
@@ -170,12 +168,12 @@ const Projects = () => {
                 )}
               </div>
 
-              {(selectedTags.length > 0 || sortBy !== "default") && (
+              {(selectedTags.length > 0 || sortBy !== "dateDesc") && (
                 <button
                   className="filter-clear-btn"
                   onClick={() => {
                     setSelectedTags([]);
-                    setSortBy("default");
+                    setSortBy("dateDesc");
                   }}
                 >
                   × Clear
diff --git a/src/components/Resume/ResumeNew.js b/src/components/Resume/ResumeNew.js
@@ -39,10 +39,16 @@ const LoadingError = ({ message }) => (
 
 const DownloadButton = () => (
     <div className="d-flex justify-content-center">
-        <Button className="download-cv-button" variant="primary" href={pdf} target="_blank">
+        <a
+            href={pdf}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="floating-nav-ghost-btn"
+            style={{ maxWidth: '200px' }}
+        >
             <AiOutlineDownload />
-            &nbsp;Download CV
-        </Button>
+            <span>Download CV</span>
+        </a>
     </div>
 );
 
diff --git a/src/css/style.css b/src/css/style.css
