From f47c291332693c716294b1d476e047ffd31230c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dejan=20Leki=C4=87?= Date: Mon, 22 Dec 2025 17:28:09 +0000 Subject: [PATCH] Adds the button to toggle between dark/light themes, and adds the dark theme. --- site-defaults/web/skel.htt | 11 +- site-defaults/web/static/css/style.css | 138 ++++++++++++++++++++++++- site-defaults/web/static/js/dfeed.js | 5 + 3 files changed, 150 insertions(+), 4 deletions(-) diff --git a/site-defaults/web/skel.htt b/site-defaults/web/skel.htt index be37eb0..c5d82db 100644 --- a/site-defaults/web/skel.htt +++ b/site-defaults/web/skel.htt @@ -10,7 +10,15 @@ - +
@@ -23,6 +31,7 @@ +
diff --git a/site-defaults/web/static/css/style.css b/site-defaults/web/static/css/style.css index 808d058..e05496e 100644 --- a/site-defaults/web/static/css/style.css +++ b/site-defaults/web/static/css/style.css @@ -80,11 +80,13 @@ h3 { font-size: 1.25em; } #search-box { display: flex; gap: 0.25em; + align-items: center; } #search-box input, #search-box select, -#search-box button { +#search-box button, +#theme-toggle { padding: 0.4em 0.6em; border: 1px solid #ccc; border-radius: 3px; @@ -95,17 +97,147 @@ h3 { font-size: 1.25em; } width: 200px; } -#search-box button { +#search-box button, +#theme-toggle { background: #f5f5f5; color: #333; cursor: pointer; } -#search-box button:hover { +#search-box button:hover, +#theme-toggle:hover { background: #e6e6e6; color: #333; } +#theme-toggle { + display: flex; + align-items: center; + justify-content: center; + padding: 0.4em; + line-height: 1; +} + +/* ============== Dark Mode ============== */ + +body.dark-mode { + color: #ccc; + background: #1a1a1a; +} + +.dark-mode a { + color: #58a6ff; +} + +.dark-mode a:visited { + color: #a371f7; +} + +.dark-mode #top { + background: #21262d; + border-bottom: 1px solid #30363d; +} + +.dark-mode #search-box input, +.dark-mode #search-box select, +.dark-mode #search-box button, +.dark-mode #theme-toggle { + background: #0d1117; + color: #c9d1d9; + border-color: #30363d; +} + +.dark-mode #search-box button:hover, +.dark-mode #theme-toggle:hover { + background: #161b22; + border-color: #8b949e; +} + +.dark-mode .subnav { + background: #161b22; + border-right: 1px solid #30363d; +} + +.dark-mode tr.thread-row:nth-child(even), +.dark-mode tr.thread-post-row:nth-child(even) { + background: #0d1117; +} + +.dark-mode tr.thread-row:hover, +.dark-mode tr.thread-post-row:hover { + background: #161b22; +} + +.dark-mode .post { + background: #0d1117; + border: 1px solid #30363d; +} + +.dark-mode .post.focused { + border-color: #58a6ff; + box-shadow: 0 0 0 1px #58a6ff; +} + +.dark-mode .post-header { + background: #161b22; + border-bottom: 1px solid #30363d; +} + +.dark-mode .subnav > ul > li > ul { + border-left-color: #30363d; +} + +.dark-mode #footernav { + border-top-color: #30363d; + color: #8b949e; +} + +.dark-mode #copyright, +.dark-mode .smallprint { + color: #8b949e; +} + +.dark-mode input[type="text"], +.dark-mode input[type="email"], +.dark-mode input[type="password"], +.dark-mode input[type="search"], +.dark-mode textarea, +.dark-mode select { + background: #0d1117; + color: #c9d1d9; + border-color: #30363d; +} + +.dark-mode input:focus, +.dark-mode textarea:focus, +.dark-mode select:focus { + border-color: #58a6ff; + outline: none; + box-shadow: 0 0 0 1px #58a6ff; +} + +.dark-mode button { + background: #21262d; + color: #c9d1d9; + border: 1px solid #30363d; +} + +.dark-mode button:hover { + background: #30363d; + border-color: #8b949e; +} + +.dark-mode blockquote { + border-left-color: #30363d; + color: #8b949e; +} + +.dark-mode code, +.dark-mode pre { + background: #161b22; + color: #e6edf3; +} + /* ============== Main Layout ============== */ .container { diff --git a/site-defaults/web/static/js/dfeed.js b/site-defaults/web/static/js/dfeed.js index 9d93608..785a3ae 100644 --- a/site-defaults/web/static/js/dfeed.js +++ b/site-defaults/web/static/js/dfeed.js @@ -34,6 +34,11 @@ $(document).ready(function() { return false; }); + $('#theme-toggle').click(function() { + var isDark = $('body').toggleClass('dark-mode').hasClass('dark-mode'); + localStorage.setItem('theme', isDark ? 'dark' : 'light'); + }); + syntaxHighlight($(document)); });