improvement:darkmode

Author: murisans

css/style.css

@@ -17,14 +17,27 @@
   --radius-lg: 0.75rem;
 }
 
+[data-theme="dark"] {
+  --bg-light: #0f172a;
+  --bg-white: #1e293b;
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --border-color: #334155;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 html {
   scroll-behavior: smooth;
+  background-color: var(--bg-light);
 }
 
 body {
@@ -38,6 +51,10 @@ body {
   flex-direction: column;
 }
 
+* {
+  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
+}
+
 #root {
   flex: 1;
   display: flex;
@@ -120,6 +137,39 @@ nav {
   justify-content: space-between;
   align-items: center;
   padding: 1.25rem 0;
+  gap: 1rem;
+}
+
+.dark-mode-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background-color: var(--bg-light);
+  color: var(--text-primary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dark-mode-toggle:hover {
+  background-color: var(--primary-color);
+  color: white;
+  transform: scale(1.05);
+}
+
+.dark-mode-toggle:active {
+  transform: scale(0.95);
+}
+
+.dark-mode-toggle i {
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dark-mode-toggle:hover i {
+  transform: rotate(15deg);
 }
 
 .logo {

js/app.js

@@ -13,6 +13,16 @@ const DevPanel = ({ onToggle }) => {
 
 const App = () => {
   const [currentPage, setCurrentPage] = useState('home');
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    const initialDark = savedTheme === 'dark' || (savedTheme === null && prefersDark);
+    setIsDark(initialDark);
+    document.documentElement.setAttribute('data-theme', initialDark ? 'dark' : 'light');
+  }, []);
 
   useEffect(() => {
     const handlePopState = () => {
@@ -37,6 +47,13 @@ const App = () => {
     Config.setMode(!Config.isDevelopment);
   };
 
+  const handleToggleDarkMode = () => {
+    const newDark = !isDark;
+    setIsDark(newDark);
+    document.documentElement.setAttribute('data-theme', newDark ? 'dark' : 'light');
+    localStorage.setItem('theme', newDark ? 'dark' : 'light');
+  };
+
   const renderPage = () => {
     switch (currentPage) {
       case 'works':
@@ -53,7 +70,7 @@ const App = () => {
   return (
     <div className="app">
       {Config.isDevelopment && <DevPanel onToggle={handleToggleMode} />}
-      <Header currentPage={currentPage} onNavigate={handleNavigate} />
+      <Header currentPage={currentPage} onNavigate={handleNavigate} isDark={isDark} onToggleDarkMode={handleToggleDarkMode} />
       {renderPage()}
       <Footer />
     </div>

js/components/DarkModeToggle.js

@@ -0,0 +1,15 @@
+const DarkModeToggle = ({ isDark, onToggle }) => {
+  return (
+    <button
+      onClick={onToggle}
+      className="dark-mode-toggle"
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {isDark ? (
+        <i className="fa-solid fa-sun" style={{ fontSize: '1.25rem' }}></i>
+      ) : (
+        <i className="fa-solid fa-moon" style={{ fontSize: '1.25rem' }}></i>
+      )}
+    </button>
+  );
+};

js/components/Header.js

@@ -1,4 +1,4 @@
-const Header = ({ currentPage, onNavigate }) => {
+const Header = ({ currentPage, onNavigate, isDark, onToggleDarkMode }) => {
   const navItems = [
     { id: 'home', label: 'Home' },
     { id: 'works', label: 'Works' },
@@ -24,6 +24,17 @@ const Header = ({ currentPage, onNavigate }) => {
               </li>
             ))}
           </ul>
+          <button
+            onClick={onToggleDarkMode}
+            className="dark-mode-toggle"
+            aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+          >
+            {isDark ? (
+              <i className="fa-solid fa-sun" style={{ fontSize: '1.25rem' }}></i>
+            ) : (
+              <i className="fa-solid fa-moon" style={{ fontSize: '1.25rem' }}></i>
+            )}
+          </button>
         </nav>
       </div>
     </header>