From fc089deaef358b38f7b7ccfc88c06e04a3a2059c Mon Sep 17 00:00:00 2001 From: gravel Date: Fri, 21 Apr 2023 14:17:27 +0000 Subject: [PATCH] Add dark theme & toggle --- output/css/instructions.css | 16 +++++- output/{styles2.css => index.css} | 75 ++++++++++++++++++++++----- output/main.js | 11 ++++ output/qrcode-solid.svg | 2 +- sites/+components/tbl_communities.php | 4 +- sites/index.php | 10 +++- sites/instructions.php | 6 ++- 7 files changed, 105 insertions(+), 19 deletions(-) rename output/{styles2.css => index.css} (85%) diff --git a/output/css/instructions.css b/output/css/instructions.css index e31f6b2..c210325 100644 --- a/output/css/instructions.css +++ b/output/css/instructions.css @@ -1,7 +1,21 @@ +body { + background-color: black; + color: white; +} + header { text-align: center; } +a, .anchorstyle { + color: hsl(210, 100%, 60%); + text-decoration: underline; +} + +#language-selection-title, label[for^=language-selection] { + font-size: 1.2em; +} + #instructions { padding: 1em; } @@ -14,7 +28,7 @@ header { font-size: 1.25em; line-height: 1.5; padding: 2em; - background-color: silver; + background-color: hsl(0, 0%, 9%); border: 2px solid black; border-radius: 1em; } diff --git a/output/styles2.css b/output/index.css similarity index 85% rename from output/styles2.css rename to output/index.css index caf0aaa..dab7db6 100644 --- a/output/styles2.css +++ b/output/index.css @@ -1,5 +1,4 @@ :root { - --alternate-row-color: #e8e8e8; --body-margin: 8px; /* Default value in browsers */ --max-font-size-unitless: 18; @@ -36,8 +35,38 @@ --dynamic-columns-width: var(--expanded-dynamic-columns-width); } +html { + --primary-color: hsl(0, 0%, 100%); + --secondary-color: hsl(0, 0%, 0%); + --secondary-color-heading: hsl(0, 0%, 17%); + --secondary-color-shaded: hsl(0, 0%, 9%); +} + +html.light-theme { + --primary-color: hsl(0, 0%, 0%); + --secondary-color: hsl(0, 0%, 100%); + --secondary-color-heading: hsl(0, 0%, 83%); + --secondary-color-shaded: hsl(0, 0%, 91%); +} + +a, .anchorstyle { + color: hsl(210, 100%, 60%); + text-decoration: underline; +} + +html.light-theme :is(a, .anchorstyle) { + color: hsl(210, 100%, 40%); + text-decoration: underline; +} + +*, *::after, *::before { + transition: color 3s, background-color 2s; +} + html { font-size: clamp(10px, 2vw, var(--max-font-size-unitless) * 1px); + color: var(--primary-color); + background-color: var(--secondary-color); } body { @@ -52,11 +81,6 @@ html.js .noscript, .hidden { cursor: pointer; } -.anchorstyle { - color: rgb(0, 102, 204); - text-decoration: underline; -} - html:not(.js) .js-only { display: none; } @@ -70,6 +94,11 @@ header { padding-inline: var(--body-margin); } +#header-start, #header-end { + display: flex; + gap: 0.5em; +} + #headline { text-align: center; flex-grow: 1; @@ -133,16 +162,21 @@ header { } #tbl_communities th { - background-color: lightgray; + background-color: var(--secondary-color-heading); +} + +#tbl_communities tr { + background-color: var(--row-color); } #tbl_communities tr:nth-child(even) { - --row-color: white; + background-color: var(--secondary-color); + --row-color: var(--secondary-color); } #tbl_communities tr:nth-child(odd) { - --row-color: var(--alternate-row-color); - background-color: var(--alternate-row-color); + background-color: var(--secondary-color-shaded); + --row-color: var(--secondary-color-shaded); } /* Particular columns */ @@ -228,9 +262,21 @@ header { text-shadow: 0 0 0.5em #0003; } -a[href^="http:"] .protocol-indicator { background-color:lightgray } +a[href^="http:"] .protocol-indicator { + background-color: hsl(0, 0%, 17%); +} -a[href^="https:"] .protocol-indicator { background-color:lightblue } +html.light-theme a[href^="http:"] .protocol-indicator { + background-color: hsl(0, 0%, 83%); +} + +a[href^="https:"] .protocol-indicator { + background-color: hsl(195, 53%, 21%); +} + +html.light-theme a[href^="https:"] .protocol-indicator { + background-color: hsl(195, 53%, 79%) +} a[href^="http:"] .protocol-indicator::after { content: "HTTP"; @@ -317,7 +363,10 @@ a[href^="https:"] .protocol-indicator::after { .copy_button { font-size: 1.1em; + background-color: var(--secondary-color); + color: var(--primary-color); padding: var(--cell-padding); + border-radius: 10%; } /* --- Footer --- */ @@ -361,9 +410,11 @@ label[for=toggle-show-room-ids]::after { margin-right: auto; width: 50%; } + .qr-code-icon { cursor: pointer; } + .qr-code-modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ diff --git a/output/main.js b/output/main.js index 26e4884..0745c58 100644 --- a/output/main.js +++ b/output/main.js @@ -43,6 +43,7 @@ const transformJoinURL = (join_link) => { return element.button({ textContent: "Copy", className: "copy_button", + title: "Click here to copy the join URL", onclick: () => copyToClipboard(join_link) }); } @@ -68,6 +69,7 @@ function onLoad() { markSortableColumns(); addQRModalHandlers(); addServerIconInteractions(); + addThemeHandlers(); } function displayQRModal(communityID) { @@ -96,6 +98,15 @@ function addQRModalHandlers() { } } +function addThemeHandlers() { + document.getElementById("theme-switch").addEventListener( + 'click', + () => { + document.documentElement.classList.toggle('light-theme'); + } + ); +} + function createJoinLinkButtons() { const join_URLs = dom.join_urls(); Array.from(join_URLs).forEach((td_url) => { diff --git a/output/qrcode-solid.svg b/output/qrcode-solid.svg index 556a04c..ec99749 100644 --- a/output/qrcode-solid.svg +++ b/output/qrcode-solid.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/sites/+components/tbl_communities.php b/sites/+components/tbl_communities.php index 62590da..98ecbe5 100644 --- a/sites/+components/tbl_communities.php +++ b/sites/+components/tbl_communities.php @@ -118,8 +118,8 @@
- + - + Self-updating list of active Session communities
+ + Switch theme +

- Choose your language: - $file): ?> + + Choose your language: +
+ $file): ?>