diff --git a/output/about.html b/output/about.html index 0929886..14c031d 100644 --- a/output/about.html +++ b/output/about.html @@ -3,7 +3,7 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - + About Me @@ -193,6 +193,7 @@ .org-svg { } +
@@ -235,7 +236,7 @@ I'm building a personal site using Emacs, Org-mode, and Cloudfl
-

Created: 2025-08-06 Wed 14:52

+

Created: 2025-08-06 Wed 15:20

Validate

diff --git a/output/index.html b/output/index.html index cefb7a0..d36f6f3 100644 --- a/output/index.html +++ b/output/index.html @@ -3,7 +3,7 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - + Welcome to My Org Website @@ -193,6 +193,7 @@ .org-svg { } +
@@ -245,7 +246,7 @@ Feel free to reach out on GitHub: http
-

Created: 2025-08-06 Wed 14:52

+

Created: 2025-08-06 Wed 15:20

Validate

diff --git a/output/output/style.css b/output/output/style.css new file mode 100644 index 0000000..115bc83 --- /dev/null +++ b/output/output/style.css @@ -0,0 +1,58 @@ +:root { + --bg: #ffffff; + --fg: #000000; + --link: #1a0dab; + --heading: #004c99; + --code-bg: #f0f0f0; +} + +body.dark { + --bg: #121212; + --fg: #e0e0e0; + --link: #8ab4f8; + --heading: #7baaf7; + --code-bg: #1e1e1e; +} + +body { + font-family: sans-serif; + max-width: 700px; + margin: 2rem auto; + padding: 1rem; + line-height: 1.6; + background-color: var(--bg); + color: var(--fg); + transition: background-color 0.3s, color 0.3s; +} + +h1, h2, h3 { + color: var(--heading); +} + +a { + color: var(--link); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +pre, code { + background: var(--code-bg); + padding: 0.2em 0.4em; + border-radius: 4px; + font-family: monospace; +} + +/* Toggle button */ +#theme-toggle { + position: fixed; + top: 1rem; + right: 1rem; + padding: 0.4em 0.8em; + background: var(--code-bg); + border: none; + border-radius: 5px; + cursor: pointer; +} diff --git a/output/style.css b/output/style.css index 22cfd01..115bc83 100644 --- a/output/style.css +++ b/output/style.css @@ -1,19 +1,36 @@ +:root { + --bg: #ffffff; + --fg: #000000; + --link: #1a0dab; + --heading: #004c99; + --code-bg: #f0f0f0; +} + +body.dark { + --bg: #121212; + --fg: #e0e0e0; + --link: #8ab4f8; + --heading: #7baaf7; + --code-bg: #1e1e1e; +} + body { font-family: sans-serif; max-width: 700px; margin: 2rem auto; padding: 1rem; line-height: 1.6; - background-color: #f9f9f9; - color: #333; + background-color: var(--bg); + color: var(--fg); + transition: background-color 0.3s, color 0.3s; } h1, h2, h3 { - color: #004c99; + color: var(--heading); } a { - color: #0066cc; + color: var(--link); text-decoration: none; } @@ -22,8 +39,20 @@ a:hover { } pre, code { - background: #eee; + background: var(--code-bg); padding: 0.2em 0.4em; border-radius: 4px; font-family: monospace; } + +/* Toggle button */ +#theme-toggle { + position: fixed; + top: 1rem; + right: 1rem; + padding: 0.4em 0.8em; + background: var(--code-bg); + border: none; + border-radius: 5px; + cursor: pointer; +} diff --git a/output/theme-toggle.js b/output/theme-toggle.js new file mode 100644 index 0000000..c3e736a --- /dev/null +++ b/output/theme-toggle.js @@ -0,0 +1,34 @@ +function setTheme(mode) { + if (mode === 'dark') { + document.body.classList.add('dark'); + localStorage.setItem('theme', 'dark'); + } else { + document.body.classList.remove('dark'); + localStorage.setItem('theme', 'light'); + } +} + +function toggleTheme() { + const current = document.body.classList.contains('dark') ? 'dark' : 'light'; + setTheme(current === 'dark' ? 'light' : 'dark'); +} + +window.addEventListener('DOMContentLoaded', () => { + const saved = localStorage.getItem('theme'); + + // Auto-detect system preference if no saved preference + if (!saved) { + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + setTheme('dark'); + } + } else if (saved === 'dark') { + setTheme('dark'); + } + + // Add the toggle button + const button = document.createElement('button'); + button.id = 'theme-toggle'; + button.innerText = 'Toggle Theme'; + button.onclick = toggleTheme; + document.body.appendChild(button); +});