Remove dark mode support

Removes all theme switching functionality and dark mode styles. The app now only uses light mode. This includes removing the ThemeToggle component, useTheme hook, dark logo asset, and all dark CSS variables.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Author: caio-pizzol

package-lock.json

@@ -2,10 +2,7 @@ import { clsx } from "clsx";
 import { Menu, X } from "lucide-react";
 import { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
-import logoDark from "../assets/logo-dark.png";
-import logoLight from "../assets/logo-light.png";
-import { useTheme } from "../hooks/useTheme";
-import { ThemeToggle } from "./ThemeToggle";
+import logo from "../assets/logo.png";
 
 interface NavbarProps {
 	sticky?: boolean;
@@ -14,7 +11,6 @@ interface NavbarProps {
 
 export function Navbar({ sticky = false, maxWidth = false }: NavbarProps) {
 	const location = useLocation();
-	const { resolvedTheme } = useTheme();
 	const isDocsActive = location.pathname.startsWith("/docs");
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
@@ -28,7 +24,7 @@ export function Navbar({ sticky = false, maxWidth = false }: NavbarProps) {
 			<div className={clsx("flex items-center justify-between", maxWidth && "mx-auto max-w-6xl")}>
 				<Link to="/" className="flex shrink-0 items-center">
 					<img
-						src={resolvedTheme === "dark" ? logoDark : logoLight}
+						src={logo}
 						alt="ooxml.dev"
 						className="h-6"
 					/>
@@ -47,12 +43,10 @@ export function Navbar({ sticky = false, maxWidth = false }: NavbarProps) {
 							</span>
 						</span>
 					</NavLink>
-					<ThemeToggle />
 				</nav>
 
 				{/* Mobile menu button */}
 				<div className="flex items-center gap-2 sm:hidden">
-					<ThemeToggle />
 					<button
 						type="button"
 						onClick={() => setMobileMenuOpen(!mobileMenuOpen)}

src/assets/logo-dark.png

@@ -1,82 +1,40 @@
 @import "tailwindcss";
 
-/* ooxml.dev theme - Coral Light (with dark mode) */
+/* ooxml.dev theme - Coral Light */
 :root {
 	/* Coral accent */
 	--color-accent: #ea580c;
 	--color-accent-hover: #c2410c;
 	--color-accent-light: #fff7ed;
 
-	/* Light mode backgrounds */
+	/* Backgrounds */
 	--color-bg-primary: #ffffff;
 	--color-bg-secondary: #fafaf9;
 	--color-bg-tertiary: #f5f5f4;
 	--color-bg-code: #1c1917;
 
-	/* Light mode borders */
+	/* Borders */
 	--color-border: #e7e5e4;
 	--color-border-strong: #d6d3d1;
 
-	/* Light mode text */
+	/* Text */
 	--color-text-primary: #1c1917;
 	--color-text-secondary: #57534e;
 	--color-text-muted: #a8a29e;
 
-	/* Syntax highlighting (for light mode code blocks on dark bg) */
+	/* Syntax highlighting (for code blocks on dark bg) */
 	--color-syntax-tag: #22d3ee;
 	--color-syntax-attr: #c4b5fd;
 	--color-syntax-value: #86efac;
 	--color-syntax-comment: #71717a;
 }
 
-.dark {
-	/* Coral accent (slightly lighter for dark mode) */
-	--color-accent: #fb923c;
-	--color-accent-hover: #f97316;
-	--color-accent-light: #431407;
-
-	/* Dark mode backgrounds */
-	--color-bg-primary: #0c0a09;
-	--color-bg-secondary: #1c1917;
-	--color-bg-tertiary: #292524;
-	--color-bg-code: #1c1917;
-
-	/* Dark mode borders */
-	--color-border: #292524;
-	--color-border-strong: #44403c;
-
-	/* Dark mode text */
-	--color-text-primary: #fafaf9;
-	--color-text-secondary: #a8a29e;
-	--color-text-muted: #78716c;
-}
-
-html {
-	color-scheme: light;
-}
-
-html.dark {
-	color-scheme: dark;
-}
-
 body {
 	font-family: "Inter", system-ui, -apple-system, sans-serif;
 	background-color: var(--color-bg-primary);
 	color: var(--color-text-primary);
 	margin: 0;
 	min-height: 100vh;
-	transition:
-		background-color 0.2s ease,
-		color 0.2s ease;
-}
-
-/* Smooth transitions for theme changes */
-*,
-*::before,
-*::after {
-	transition:
-		background-color 0.2s ease,
-		border-color 0.2s ease;
 }
 
 /* Code syntax highlighting */
@@ -98,34 +56,18 @@ body {
 	background-color: #fef2f2;
 	border-color: #fecaca;
 }
-.dark .note-critical {
-	background-color: rgba(127, 29, 29, 0.3);
-	border-color: #7f1d1d;
-}
 
 .note-warning {
 	background-color: #fffbeb;
 	border-color: #fde68a;
 }
-.dark .note-warning {
-	background-color: rgba(120, 53, 15, 0.3);
-	border-color: #78350f;
-}
 
 .note-info {
 	background-color: #fff7ed;
 	border-color: #fed7aa;
 }
-.dark .note-info {
-	background-color: rgba(124, 45, 18, 0.3);
-	border-color: #7c2d12;
-}
 
 .note-tip {
 	background-color: #f0fdf4;
 	border-color: #bbf7d0;
 }
-.dark .note-tip {
-	background-color: rgba(20, 83, 45, 0.3);
-	border-color: #14532d;
-}

src/assets/logo-light.png src/assets/logo.pngsrc/assets/logo-light.png renamed to src/assets/logo.png

@@ -2,15 +2,12 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App";
-import { ThemeProvider } from "./hooks/useTheme";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
 	<StrictMode>
-		<ThemeProvider>
-			<BrowserRouter>
-				<App />
-			</BrowserRouter>
-		</ThemeProvider>
+		<BrowserRouter>
+			<App />
+		</BrowserRouter>
 	</StrictMode>,
 );