From 512c9c824baf405efadeb0ecc707bc6948b97f4b Mon Sep 17 00:00:00 2001 From: jdarwood007 Date: Sun, 23 Aug 2026 15:06:14 -0700 Subject: [PATCH 1/2] [3.0] Enable dark mode in SCEditor Dark.css has elements added so we can recognize a call to the dark mode The default style sheet for sceditor needed to call variables The init of the editor needed to inject dark mode support and determine when we are running in system mode. --- Themes/default/css/dark.css | 4 +- .../default/css/jquery.sceditor.default.css | 38 +++++++++++-------- .../default/scripts/sceditor.plugins.smf.js | 18 +++++++++ 3 files changed, 43 insertions(+), 17 deletions(-) diff --git a/Themes/default/css/dark.css b/Themes/default/css/dark.css index 48b84a7d1a..ac0e365ea9 100644 --- a/Themes/default/css/dark.css +++ b/Themes/default/css/dark.css @@ -27,7 +27,9 @@ /* agree those values first and then check that each component reached for the /* right one. */ :root[data-mode="dark"], -:root[data-mode="system"] { +:root[data-mode="system"], +body[contenteditable="true"][data-mode="dark"], +body[contenteditable="true"][data-mode="system"] { /* The surfaces, from the page behind everything up to the topmost thing /* that floats above it, then the two hairline weights, the three text diff --git a/Themes/default/css/jquery.sceditor.default.css b/Themes/default/css/jquery.sceditor.default.css index d0ef17ccfc..510c021985 100644 --- a/Themes/default/css/jquery.sceditor.default.css +++ b/Themes/default/css/jquery.sceditor.default.css @@ -10,9 +10,12 @@ html { } body { flex: 1; - color: #111; + /* color: #111; background: #fff; - font: 13px / 1.5 Verdana, Arial, Helvetica, sans-serif; + font: 13px / 1.5 Verdana, Arial, Helvetica, sans-serif; */ + background: var(--body-bg); + font: var(--body-font-size)/150% var(--body-font-family); + color: var(--body-color); } ul, ol { @@ -23,7 +26,7 @@ ul, ol { } table, td { - border: 1px dotted #000; + border: var(--bbc-table-border-width) var(--bbc-table-border-style) var(--bbc-table-border-color); empty-cells: show; min-width: 0.5ch; } @@ -46,15 +49,18 @@ table td { .bbc_code { margin-top: 1.5em; position: relative; - background: #eee; - border: 1px solid #aaa; + background: var(--code-bg); + border-color: var(--code-border-color); + border-style: var(--code-border-style); + border-width: var(--code-border-width); + border-radius: var(--code-border-radius); white-space: pre-wrap; padding: .25em; display: block; } span.phpcode, font[face=monospace] { - background-color: rgba(127, 127, 127, 0.25); + background: var(--code-bg); padding: 0 0.2ch; display: inline; } @@ -62,21 +68,21 @@ span.phpcode, font[face=monospace] { blockquote { margin: 0 0 8px 0; padding: 6px 10px; - font-size: small; - border: 1px solid #d6dfe2; - border-left: 2px solid #aaa; - border-right: 2px solid #aaa; - background-color: #e0e6f6; + background-color: var(--quote-bg); + font-size: var(--quote-font-size); + border-color: var(--quote-border-color); + border-style: var(--quote-border-style); + border-width: var(--quote-border-width); } blockquote cite { display: block; - border-bottom: 1px solid #aaa; + border-bottom: var(--quote-cite-border-width) var(--quote-cite-border-style) var(--quote-cite-border-color); font-size: 0.9em; margin-bottom: 0.5em; } blockquote cite::before { - color: #aaa; + color: var(--bbc-cite-color); font-size: 22px; font-style: normal; content: '\275D'; @@ -157,7 +163,7 @@ img { } .bbc_details { - border: 1px dotted #aaa; + border: var(--bbc-details-border-width) var(--bbc-details-border-style) var(--bbc-details-border-color); } .bbc_summary, .bbc_details_content { @@ -165,8 +171,8 @@ img { } .bbc_details[open] .bbc_summary { padding-bottom: 5px; - border-bottom: 1px dotted #aaa; + border-bottom: var(--bbc-details-border-width) var(--bbc-details-border-style) var(--bbc-details-border-color); } .bbc_inline_spoiler { - outline: 2px dashed #aaa; + outline: var(--bbc-spoiler-outline-width) var(--bbc-spoiler-outline-style) var(--bbc-spoiler-outline-color); } \ No newline at end of file diff --git a/Themes/default/scripts/sceditor.plugins.smf.js b/Themes/default/scripts/sceditor.plugins.smf.js index d4a8b75c82..578e3fde8b 100644 --- a/Themes/default/scripts/sceditor.plugins.smf.js +++ b/Themes/default/scripts/sceditor.plugins.smf.js @@ -308,6 +308,24 @@ css += rule.cssText; } } + } else if (sheet.href?.includes('/dark')) { + const currentMode = document.documentElement.getAttribute('data-mode') ?? 'system'; + const runningDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)'); + + // If we are forcing dark mode or have it running on system, copy the rules. + if (currentMode === "dark" || (currentMode === "system" && runningDarkMode)) { + for (const rule of sheet.cssRules) { + css += rule.cssText; + } + iframe.contentDocument.body.setAttribute('data-mode', currentMode === "dark" || runningDarkMode.matches ? 'dark' : 'light'); + + // Attach a listener to see if we switch from dark to light mode. + if (currentMode === "system") { + runningDarkMode.addEventListener('change', e => { + iframe.contentDocument.body.setAttribute('data-mode', runningDarkMode.matches ? 'dark' : 'light'); + }); + } + } } } el.innerHTML = css; From d63bec94628745f773704a45f963f35805fbf387 Mon Sep 17 00:00:00 2001 From: jdarwood007 Date: Sun, 23 Aug 2026 15:07:11 -0700 Subject: [PATCH 2/2] Remove testing code --- Themes/default/css/jquery.sceditor.default.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/Themes/default/css/jquery.sceditor.default.css b/Themes/default/css/jquery.sceditor.default.css index 510c021985..401e5b939a 100644 --- a/Themes/default/css/jquery.sceditor.default.css +++ b/Themes/default/css/jquery.sceditor.default.css @@ -10,9 +10,6 @@ html { } body { flex: 1; - /* color: #111; - background: #fff; - font: 13px / 1.5 Verdana, Arial, Helvetica, sans-serif; */ background: var(--body-bg); font: var(--body-font-size)/150% var(--body-font-family); color: var(--body-color);