chore: default to dark theme and remove toggle

davidbingmann · davidbingmann · commit dc788df8b38a · 2026-02-07T00:07:40.000+01:00
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
@@ -10,20 +10,6 @@
       href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"
       rel="stylesheet"
     />
-    <script>
-      (() => {
-        try {
-          const stored = localStorage.getItem('theme');
-          const resolved =
-            stored === 'dark' || stored === 'light'
-              ? stored
-              : window.matchMedia?.('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light';
-          document.documentElement.dataset.theme = resolved;
-        } catch {}
-      })();
-    </script>
     <title>David Bingmann</title>
   </head>
   <body>
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -3,7 +3,6 @@ import githubIcon from '../assets/icons/github.svg';
 import linkedinIcon from '../assets/icons/linkedin.svg';
 import xIcon from '../assets/icons/x.svg';
 import mailIcon from '../assets/icons/mail.svg';
-import { useTheme } from '../hooks/useTheme.js';
 
 const navItems = [
   { to: '/', label: 'home' },
@@ -40,37 +39,23 @@ const socialLinks = [
 
 export default function Layout() {
   const currentYear = new Date().getFullYear();
-  const { theme, toggleTheme } = useTheme();
 
   return (
     <div className="shell">
       <header className="header">
-        <div className="header-row">
-          <nav className="nav-tabs" aria-label="Main navigation">
-            {navItems.map((item) => (
-              <NavLink
-                key={item.to}
-                to={item.to}
-                className={({ isActive }) =>
-                  `nav-link${isActive ? ' nav-link--active' : ''}`
-                }
-              >
-                {item.label}
-              </NavLink>
-            ))}
-          </nav>
-
-          <button
-            type="button"
-            className="theme-toggle"
-            onClick={toggleTheme}
-            aria-pressed={theme === 'dark'}
-            aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
-            title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
-          >
-            theme: {theme}
-          </button>
-        </div>
+        <nav className="nav-tabs" aria-label="Main navigation">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) =>
+                `nav-link${isActive ? ' nav-link--active' : ''}`
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
         <div className="nav-divider" />
       </header>
 
diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js
diff --git a/src/styles.css b/src/styles.css
@@ -75,15 +75,7 @@ p {
   align-items: center;
 }
 
-.header-row {
-  width: min(900px, 100%);
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-}
-
 .nav-tabs {
-  grid-column: 2;
   display: flex;
   gap: 2.5rem;
   flex-wrap: wrap;
@@ -93,28 +85,6 @@ p {
   letter-spacing: 0.05em;
 }
 
-.theme-toggle {
-  grid-column: 3;
-  justify-self: end;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: 0.45rem 0.85rem;
-  font: inherit;
-  font-size: 0.85rem;
-  letter-spacing: 0.04em;
-  text-transform: lowercase;
-  color: var(--muted);
-  background: var(--surface);
-  cursor: pointer;
-  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
-}
-
-.theme-toggle:hover,
-.theme-toggle:focus-visible {
-  color: var(--text);
-  border-color: var(--accent);
-}
-
 .nav-link {
   color: var(--muted);
   padding-bottom: 0.5rem;
@@ -408,21 +378,6 @@ p {
 }
 
 @media (max-width: 720px) {
-  .header-row {
-    grid-template-columns: 1fr;
-    justify-items: center;
-    gap: 1.5rem;
-  }
-
-  .nav-tabs {
-    grid-column: 1;
-  }
-
-  .theme-toggle {
-    grid-column: 1;
-    justify-self: center;
-  }
-
   .hero {
     height: 60vh;
     min-height: 320px;
