jimeh/commonflow.org
1
0
Fork 0
mirror of https://github.com/jimeh/commonflow.org.git synced 2026-02-19 05:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: remove dark mode theme switching

Browse Source 
SVG diagrams use hardcoded black text that doesn't render correctly
on dark backgrounds. Simplified to light theme only.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jim Myhrberg
2026-01-13 06:48:47 +00:00
parent 868e67ad4b
commit cd659d7b4f
13 changed files with 15 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Sidebar.astro
View File

@@ -1,6 +1,5 @@
---
import { config } from "../config";
import ThemeToggle from "./ThemeToggle.astro";
interface Props {
currentVersion?: string;
@@ -59,7 +58,6 @@ const { currentVersion } = Astro.props;
clip-rule="evenodd"></path>
</svg>
</a>
<ThemeToggle />
</div>
</div>

102
src/components/ThemeToggle.astro
View File

@@ -1,102 +0,0 @@
---
// Theme toggle component - sun/moon icon to switch between light and dark mode
---
<button
id="theme-toggle"
type="button"
class="p-2 text-[color:var(--color-text-muted)] hover:text-white
transition-colors duration-200"
aria-label="Toggle dark mode"
>
<!-- Sun icon (shown in dark mode) -->
<svg
id="sun-icon"
class="hidden w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343
6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16
12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<!-- Moon icon (shown in light mode) -->
<svg
id="moon-icon"
class="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003
9.003 0 008.354-5.646z"></path>
</svg>
</button>
<script>
function initTheme() {
const toggle = document.getElementById("theme-toggle");
const sunIcon = document.getElementById("sun-icon");
const moonIcon = document.getElementById("moon-icon");
function updateIcons(isDark: boolean) {
if (isDark) {
sunIcon?.classList.remove("hidden");
moonIcon?.classList.add("hidden");
} else {
sunIcon?.classList.add("hidden");
moonIcon?.classList.remove("hidden");
}
}
function getTheme(): "dark" | "light" {
const stored = localStorage.getItem("theme");
if (stored === "dark" || stored === "light") {
return stored;
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
}
function setTheme(theme: "dark" | "light") {
localStorage.setItem("theme", theme);
document.documentElement.classList.toggle("dark", theme === "dark");
updateIcons(theme === "dark");
}
// Initialize
const currentTheme = getTheme();
setTheme(currentTheme);
// Toggle handler
toggle?.addEventListener("click", () => {
const isDark = document.documentElement.classList.contains("dark");
setTheme(isDark ? "light" : "dark");
});
// Listen for system preference changes
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => {
if (!localStorage.getItem("theme")) {
setTheme(e.matches ? "dark" : "light");
}
});
}
// Run on initial load
initTheme();
// Re-run on Astro page transitions
document.addEventListener("astro:after-swap", initTheme);
</script>

13
src/layouts/Default.astro
View File

@@ -44,19 +44,6 @@ const fullTitle = title === config.title ? title : `${title} | ${config.title}`;
rel="stylesheet"
/>
<!-- Prevent flash of wrong theme -->
<script is:inline>
(function () {
const theme = localStorage.getItem("theme");
if (
theme === "dark" ||
(!theme &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
}
})();
</script>
</head>
<body>
<div id="layout">

46
src/styles/global.css
View File

@@ -14,13 +14,6 @@
--color-bg-code-inline: rgba(27, 31, 35, 0.05);
--color-border: #333;
/* Dark mode colors */
--color-dark-text-primary: #e5e5e5;
--color-dark-text-secondary: #a0a0a0;
--color-dark-bg-primary: #0d0d0d;
--color-dark-bg-code: #1a1a1a;
--color-dark-bg-code-inline: rgba(255, 255, 255, 0.1);
/* Fonts */
--font-sans: "Open Sans", Helvetica, Arial, sans-serif;
--font-heading: "Open Sans Condensed", Helvetica, Arial, sans-serif;
@@ -46,11 +39,6 @@
background-color: var(--color-bg-primary);
}
.dark body {
color: var(--color-dark-text-primary);
background-color: var(--color-dark-bg-primary);
}
h1,
h2,
h3,
@@ -62,15 +50,6 @@
color: #333;
}
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
color: #e5e5e5;
}
h1 {
font-size: 2.5em;
line-height: 1.2;
@@ -102,10 +81,6 @@
padding: 0.3em 0.4em 0.1em 0.4em;
}
.dark code {
background-color: var(--color-dark-bg-code-inline);
}
pre {
background-color: var(--color-bg-code);
border-radius: 3px;
@@ -113,10 +88,6 @@
padding: 16px;
}
.dark pre {
background-color: var(--color-dark-bg-code);
}
pre > code {
background-color: transparent !important;
border-radius: 0;
@@ -145,10 +116,6 @@
border-bottom: 1px solid #eee;
}
.dark .spec-content h2 {
border-bottom-color: #333;
}
.spec-content h3 {
margin-top: 1.5em;
margin-bottom: 0.5em;
@@ -177,10 +144,6 @@
text-decoration: underline;
}
.dark .spec-content a {
color: #4da6e8;
}
.spec-content img {
max-width: 100%;
height: auto;
@@ -194,18 +157,9 @@
color: #666;
}
.dark .spec-content blockquote {
border-left-color: #444;
color: #aaa;
}
.spec-content hr {
margin: 2em 0;
border: none;
border-top: 1px solid #eee;
}
.dark .spec-content hr {
border-top-color: #333;
}
}