[3.0] Theme split (wave 7) — let the colour mode into the editor itself - #9557
Open
albertlast wants to merge 1 commit into
Open
[3.0] Theme split (wave 7) — let the colour mode into the editor itself#9557albertlast wants to merge 1 commit into
albertlast wants to merge 1 commit into
Conversation
The toolbar around the editor followed the colour mode from wave 5, but the surface you actually type on did not: it is an iframe with its own document, so nothing the page declares reaches it, and it stayed white text-on-white in the middle of a dark forum. The plugin already copies the theme's tokens into that document, so the mechanism was there and two things were missing from it. It matched `selectorText == ':root'`, and the colour mode blocks are `:root[data-mode="dark"]` and friends, so it walked straight past them. And nothing set data-mode inside the iframe, so even copied they would have selected nothing. 'system' is resolved to the mode it currently means rather than passed through. Outside, that mode works by asking the browser through a media attribute on the stylesheet, and there is no such attribute on anything in here; left as 'system', the rules would match the reader's own setting, so the editor would go dark on a forum deliberately kept light. A reader on 'system' can also change their mind while the editor is open, so the resolution is re-run on that. The sixteen literal colours in the iframe's own stylesheet become tokens, seeded with the values they replace. They are named for the editing surface rather than pointed at the tokens the rendered post uses, because the two are different contexts - what you type into has no post background behind it - even where the values happen to coincide today. Verified in all three modes on a running forum. Light is unchanged: computed colours, borders, outlines, shadows and sizes of every element on five pages *and inside the editor's own document*, before and after - 1805 records, 34 of them from inside the iframe, no differences. In dark the surface, quotes and code blocks now match the forum. On 'system' with the browser asking for dark, the editor resolves to dark alongside the page; on 'light' with the same browser still asking for dark, it correctly stays light. Signed-off-by: Mathias Alberts <mathiaspapealbert@hotmail.com> Signed-off-by: albertlast <mathiaspapealbert@hotmail.com>
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Wave 5 got the colour mode as far as the editor's toolbar and stopped there. The surface you actually type on is an iframe with its own document, so nothing the page declares reaches it — it stayed white text-on-white in the middle of a dark forum.
The mechanism was already there
sceditor.plugins.smf.jsalready copies the theme's tokens into that document, insignalReady(). Two things were missing from it:selectorText == ':root', and the colour mode blocks are:root[data-mode="dark"]and friends, so it walked straight past them;data-modeinside the iframe, so even copied they would have selected nothing.So this is a small change to code that was already doing most of the work, rather than a new way of feeding the editor its stylesheets.
Why
systemis resolved rather than passed throughOutside, that mode works by asking the browser through a
(prefers-color-scheme: dark)media attribute on the stylesheet. There is no such attribute on anything inside the iframe. Left assystem, the copied rules would match the reader's own setting — so the editor would go dark on a forum deliberately kept light.It is therefore resolved to the mode it currently means before being written in. A reader on
systemcan also change their mind while the editor is open, so the resolution is re-run on that.The stylesheet
The sixteen literal colours in
jquery.sceditor.default.cssbecome tokens, seeded with the values they replace. They are named for the editing surface (--editor-content-*) rather than pointed at the tokens the rendered post uses, because the two are genuinely different contexts — what you type into has no post background behind it — even where the values happen to coincide today.Verification
All three modes, on a running forum.
Light is unchanged. Computed colours, borders, outlines, shadows and sizes of every element on five pages and inside the editor's own document, before and after:
Dark — the surface, quotes and code blocks now match the forum:
rgb(255,255,255)onrgb(17,17,17)textrgb(30,36,41)onrgb(210,215,218)rgb(35,44,52)rgb(24,28,32)system, browser asking for dark — page dark, editor resolves to dark alongside it.light, same browser still asking for dark — editor correctly stays#fff. This is the case the resolution exists for; without it the editor would contradict the forum.Part of wave 7 of the #7933 split, and the last place the colour mode could not reach.
Issues References (Fixes|Related|Closes)
Related #7933