Hi all, hi Christian, I'm attaching a bunch of patches for Worg. One adds a dark theme, and others improve things a bit regarding a11y.
Let me know if they look okay and/or if anything needs to be tweaked. Thanks! -- Bastien
>From f827397dd03ea85269008d9c1fcc0a0de39288f4 Mon Sep 17 00:00:00 2001 From: Bastien <[email protected]> Date: Tue, 24 Feb 2026 14:34:39 +0100 Subject: [PATCH 1/5] style/worg.css: Use rem instead of pt --- style/worg.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/style/worg.css b/style/worg.css index 4989e228..d0578f3a 100644 --- a/style/worg.css +++ b/style/worg.css @@ -52,7 +52,7 @@ position: absolute; top:0; display:block; - font-size: 10pt; + font-size: 0.625rem; right:0pt; text-align: right; padding: .2em 1em; @@ -77,13 +77,13 @@ #table-of-contents { z-index: 1; margin-top: 80px; - font-size: 10pt; + font-size: 0.625rem; font-family:sans-serif; position: fixed; right: 0em; top: 0em; background: white; - line-height: 12pt; + line-height: 1.2; text-align: right; box-shadow: 0 0 1em #777777; -webkit-box-shadow: 0 0 1em #777777; @@ -106,7 +106,7 @@ } } #table-of-contents h2 { - font-size: 13pt; + font-size: 0.8125rem; max-width: 9em; border: 0; font-weight: normal; @@ -421,7 +421,7 @@ #org-info-js_console-label { - font-size:10px; + font-size:0.625rem; font-weight:bold; white-space:nowrap; } @@ -1030,7 +1030,7 @@ #postamble { font-size: 75%; max-width: 80%; - line-height: 14pt; + line-height: 1.2; margin-left: 20px; margin-top: 10px; padding: .2em; -- 2.51.0
>From 416f122ebb7b24a78b0630f60feb15102f81cb67 Mon Sep 17 00:00:00 2001 From: Bastien <[email protected]> Date: Tue, 24 Feb 2026 14:35:40 +0100 Subject: [PATCH 2/5] style/worg.css: Increase color contrast to improve a11y --- style/worg.css | 91 ++++++++++++++++++++++++++------------------------ 1 file changed, 48 insertions(+), 43 deletions(-) diff --git a/style/worg.css b/style/worg.css index d0578f3a..01656be5 100644 --- a/style/worg.css +++ b/style/worg.css @@ -139,7 +139,7 @@ } h2 { - color: #587e72; + color: #3d5a50; border-bottom: 1px solid #ddd; margin-top: 1.5em; padding-bottom: 8px; @@ -150,7 +150,7 @@ } h3 { - color: #587e72; + color: #3d5a50; margin-left: 0.6em; } @@ -161,7 +161,7 @@ } h4 { - color: #587e72; + color: #3d5a50; margin-left: 1.2em; } @@ -172,14 +172,19 @@ a { color: black; font-weight: 400; - text-decoration: underline #587e72; + text-decoration: underline #3d5a50; } a:visited { font-weight: 400; - text-decoration: purple; + text-decoration: underline purple; } a:hover { - color: #587e72; + color: #3d5a50; + } + a:focus, + a:focus-visible { + outline: 2px solid #3d5a50; + outline-offset: 2px; } .todo { @@ -271,11 +276,11 @@ .builtin { /* font-lock-builtin-face */ - color: #f4a460; + color: #8a5d2e; } .comment { /* font-lock-comment-face */ - color: #737373; + color: #636363; } .comment-delimiter { /* font-lock-comment-delimiter-face */ @@ -283,15 +288,15 @@ } .constant { /* font-lock-constant-face */ - color: #db7093; + color: #a3425e; } .doc { /* font-lock-doc-face */ - color: #b3b3b3; + color: #636363; } .function-name { /* font-lock-function-name-face */ - color: #5f9ea0; + color: #3a7678; } .headline { /* headline-face */ @@ -300,7 +305,7 @@ font-weight: bold; } .blindtext { - color: #aaaaaa; + color: #636363; } .infobox, .highlightbox, .warningbox { clear:both; @@ -315,7 +320,7 @@ } .highlightbox { font-size: 120%; - color: #337f67; + color: #276252; } .warningbox, .inlinetask { background-color: #fcf2f2; @@ -380,7 +385,7 @@ } .string { /* font-lock-string-face */ - color: #ccc79a; + color: #6e6a3a; } .subtitle { font-size: 1.5em; @@ -394,7 +399,7 @@ } .variable-name { /* font-lock-variable-name-face */ - color: #ff6a6a; + color: #c0392b; } .warning { /* font-lock-warning-face */ @@ -478,7 +483,7 @@ } .org-builtin { /* font-lock-builtin-face */ - color: #da70d6; + color: #8b3d87; } .org-button { /* button */ @@ -510,7 +515,7 @@ } .org-constant { /* font-lock-constant-face */ - color: #5f9ea0; + color: #3a7678; } .org-cursor { /* cursor */ @@ -527,7 +532,7 @@ } .org-doc { /* font-lock-doc-face */ - color: #bc8f8f; + color: #8b5e5e; } .org-escape-glyph { /* escape-glyph */ @@ -535,7 +540,7 @@ } .org-file-name-shadow { /* file-name-shadow */ - color: #7f7f7f; + color: #595959; } .org-fixed-pitch { } @@ -615,8 +620,8 @@ } .org-isearch { /* isearch */ - color: #b0e2ff; - background-color: #cd00cd; + color: #ffffff; + background-color: #8b008b; } .org-italic { /* italic */ @@ -656,7 +661,7 @@ } .org-message-header-name { /* message-header-name */ - color: #6495ed; + color: #3a6bc5; } .org-message-header-newsgroups { /* message-header-newsgroups */ @@ -749,11 +754,11 @@ } .org-org-archived { /* org-archived */ - color: #7f7f7f; + color: #595959; } .org-org-code { /* org-code */ - color: #7f7f7f; + color: #595959; } .org-org-column { /* org-column */ @@ -781,7 +786,7 @@ } .org-org-ellipsis { /* org-ellipsis */ - color: #b8860b; + color: #8a6508; text-decoration: underline; } .org-org-formula { @@ -790,7 +795,7 @@ } .org-org-headline-done { /* org-headline-done */ - color: #bc8f8f; + color: #8b5e5e; } .org-org-hide { /* org-hide */ @@ -806,7 +811,7 @@ } .org-org-level-2 { /* org-level-2 */ - color: #b8860b; + color: #8a6508; } .org-org-level-3 { /* org-level-3 */ @@ -822,15 +827,15 @@ } .org-org-level-6 { /* org-level-6 */ - color: #5f9ea0; + color: #3a7678; } .org-org-level-7 { /* org-level-7 */ - color: #da70d6; + color: #8b3d87; } .org-org-level-8 { /* org-level-8 */ - color: #bc8f8f; + color: #8b5e5e; } .org-org-link { /* org-link */ @@ -853,7 +858,7 @@ } .org-org-special-keyword { /* org-special-keyword */ - color: #bc8f8f; + color: #8b5e5e; } .org-org-table { /* org-table */ @@ -869,7 +874,7 @@ } .org-org-time-grid { /* org-time-grid */ - color: #b8860b; + color: #8a6508; } .org-org-todo { /* org-todo */ @@ -881,7 +886,7 @@ } .org-org-verbatim { /* org-verbatim */ - color: #7f7f7f; + color: #595959; text-decoration: underline; } .org-org-warning { @@ -895,7 +900,7 @@ } .org-outline-2 { /* outline-2 */ - color: #b8860b; + color: #8a6508; } .org-outline-3 { /* outline-3 */ @@ -911,15 +916,15 @@ } .org-outline-6 { /* outline-6 */ - color: #5f9ea0; + color: #3a7678; } .org-outline-7 { /* outline-7 */ - color: #da70d6; + color: #8b3d87; } .org-outline-8 { /* outline-8 */ - color: #bc8f8f; + color: #8b5e5e; } .outline-text-1, .outline-text-2, .outline-text-3, .outline-text-4, .outline-text-5, .outline-text-6 { /* Add more spacing between section. Padding, so that folding with org-info.js works as expected. */ @@ -928,12 +933,12 @@ .org-preprocessor { /* font-lock-preprocessor-face */ - color: #da70d6; + color: #8b3d87; } .org-query-replace { /* query-replace */ - color: #b0e2ff; - background-color: #cd00cd; + color: #ffffff; + background-color: #8b008b; } .org-regexp-grouping-backslash { /* font-lock-regexp-grouping-backslash */ @@ -959,7 +964,7 @@ } .org-shadow { /* shadow */ - color: #7f7f7f; + color: #595959; } .org-show-paren-match { /* show-paren-match */ @@ -972,7 +977,7 @@ } .org-string { /* font-lock-string-face */ - color: #bc8f8f; + color: #8b5e5e; } .org-texinfo-heading { /* texinfo-heading */ @@ -1002,7 +1007,7 @@ } .org-variable-name { /* font-lock-variable-name-face */ - color: #b8860b; + color: #8a6508; } .org-variable-pitch { } -- 2.51.0
>From ecae997d5393ddd6d33173ba3141e3a7a372bedf Mon Sep 17 00:00:00 2001 From: Bastien <[email protected]> Date: Tue, 24 Feb 2026 14:36:54 +0100 Subject: [PATCH 3/5] style/worg.css: Use focus-within instead of hover for the TOC Using focus-within ensures the Table of Contents (TOC) is accessible and functional across all input methods, hover is limited to mouse. --- style/worg.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style/worg.css b/style/worg.css index 01656be5..4fab4076 100644 --- a/style/worg.css +++ b/style/worg.css @@ -118,7 +118,8 @@ #table-of-contents #text-table-of-contents { display: none; text-align: left; } - #table-of-contents:hover #text-table-of-contents { + #table-of-contents:hover #text-table-of-contents, + #table-of-contents:focus-within #text-table-of-contents { display: block; padding: 0.5em; margin-top: -1.5em; } -- 2.51.0
>From 2bdb0f58d8bc277abaaf5c8a9730cb0ffc8a36b8 Mon Sep 17 00:00:00 2001 From: Bastien <[email protected]> Date: Tue, 24 Feb 2026 14:44:44 +0100 Subject: [PATCH 4/5] style/worg.css: Remove unused class --- style/worg.css | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/style/worg.css b/style/worg.css index 4fab4076..f327c293 100644 --- a/style/worg.css +++ b/style/worg.css @@ -252,18 +252,6 @@ border: 0; } - .share img { - opacity: .4; - -moz-opacity: .4; - filter: alpha(opacity=40); - } - - .share img:hover { - opacity: 1; - -moz-opacity: 1; - filter: alpha(opacity=100); - } - pre { font-family: Droid Sans Mono, Monaco, Consolas, "Lucida Console", monospace; color: black; -- 2.51.0
>From 4470bf5dd1efa67e9cf4f9ea6bdf9ec8c64af1f7 Mon Sep 17 00:00:00 2001 From: Bastien <[email protected]> Date: Tue, 24 Feb 2026 14:47:05 +0100 Subject: [PATCH 5/5] style/worg.css: Add a dark theme --- style/worg.css | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) diff --git a/style/worg.css b/style/worg.css index f327c293..121f304d 100644 --- a/style/worg.css +++ b/style/worg.css @@ -1035,3 +1035,101 @@ } /* END OF @media all */ +@media (prefers-color-scheme: dark) { + html { + background-color: #1a1a2e; + } + body { + color: #e0e0e0; + } + body #content { + background-color: #1a1a2e; + } + body #support { + background: #2a2a3e; + color: #e0e0e0; + } + h2, h3, h4 { + color: #8fbcaa; + } + a { + color: #c0c0c0; + text-decoration-color: #8fbcaa; + } + a:visited { + text-decoration-color: #b393d3; + } + a:hover { + color: #8fbcaa; + } + a:focus, + a:focus-visible { + outline-color: #8fbcaa; + } + pre { + background-color: #252540; + color: #e0e0e0; + } + code { + color: #e0e0e0; + } + #table-of-contents { + background: #1a1a2e; + box-shadow: 0 0 1em #000000; + } + #postamble { + background-color: #1a1a2e; + color: #999; + } + #license { + background-color: #252540; + } + .infobox { + background-color: #252540; + } + .warningbox, .inlinetask { + background-color: #3a2020; + } + .highlightbox { + color: #8fbcaa; + } + .todo { + color: #ff6b6b; + } + .done { + color: #4ecdc4; + } + .builtin, .org-builtin { color: #c9a0dc; } + .comment, .org-comment { color: #8b9dc3; } + .comment-delimiter, .org-comment-delimiter { color: #8b9dc3; } + .string, .org-string { color: #c9b89a; } + .doc, .org-doc { color: #a0a0a0; } + .function-name, .org-function-name { color: #7ec8ca; } + .keyword, .org-keyword { color: #7aa2d4; } + .constant, .org-constant { color: #7ec8ca; } + .variable-name, .org-variable-name { color: #d4a76a; } + .org-org-level-1, .org-outline-1 { color: #6b9bff; } + .org-org-level-2, .org-outline-2 { color: #d4a76a; } + .org-org-level-3, .org-outline-3 { color: #c9a0dc; } + .org-org-level-4, .org-outline-4 { color: #d47272; } + .org-org-level-5, .org-outline-5 { color: #72d4a0; } + .org-org-level-6, .org-outline-6 { color: #7ec8ca; } + .org-org-level-7, .org-outline-7 { color: #c9a0dc; } + .org-org-level-8, .org-outline-8 { color: #c9b89a; } + .org-org-hide { color: #1a1a2e; } + .org-org-code, .org-org-verbatim { color: #a0a0a0; } + .org-info-search-highlight, + .org-info-js_search-highlight { + background-color: #8a8a00; + color: #ffffff; + } + .headline, .todo-comment { + color: #e0e0e0; + background-color: #333355; + } + .warning, .org-warning { + background-color: #8b3333; + color: #ffffff; + } +} + -- 2.51.0
