Skip to content

[3.0] Theme split (wave 5, part 3) — let the colour mode reach the post editor #9498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jdarwood007 merged 2 commits into from
Aug 23, 2026
+93 −24
Merged

[3.0] Theme split (wave 5, part 3) — let the colour mode reach the post editor #9498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
68e7727
Lets the colour mode reach the post editor
albertlast Aug 11, 2026
0ae132e
Tokenises the editor colours a property-name regex missed
albertlast Aug 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions Themes/default/css/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -464,6 +464,44 @@
--overlay-bg: var(--dark-bg-3);
--overlay-bg-image: linear-gradient(to bottom, hsl(var(--primary-color-hue), 14%, 20%) 0%, hsl(var(--primary-color-hue), 14%, 17%) 95%);

/* The editor's chrome only. The surface you actually type on lives in an
/* iframe with its own document and its own stylesheet, which has no tokens
/* in scope, so it is not reachable from here and is left for its own change.
/* That surface is only shown to members who have turned the rich editor on;
/* the default is the source view, which is an ordinary textarea on this
/* page and does follow the mode. */
/** Editor **/
--editor-border-color: var(--dark-line-strong);
--editor-button-bg_active: hsl(var(--primary-color-hue), 20%, 26%);
--editor-button-bg_pressed: hsl(var(--primary-color-hue), 20%, 30%);
--editor-button-box-shadow_active: inset 1px 1px 0 rgba(0, 0, 0, 0.5), inset -1px 0 rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
--editor-button-box-shadow_pressed: inset 1px 1px 0 rgba(0, 0, 0, 0.5), inset -1px 0 rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(0, 0, 0, 0.5);
--editor-dnd-bg: rgba(255, 255, 255, 0.08);
--editor-dnd-border-color: var(--dark-line-strong);
--editor-dnd-color: var(--dark-ink-dim);
--editor-dropdown-bg: var(--dark-bg-3);
--editor-dropdown-border-color: var(--dark-line-strong);
--editor-dropdown-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
--editor-dropdown-label-color: var(--dark-ink);
--editor-dropdown-link-bg_hover: hsl(var(--primary-color-hue), 25%, 26%);
--editor-dropdown-link-color: var(--dark-ink-bright);
--editor-grip-border-color: var(--dark-line);
--editor-group-border-color: var(--dark-line);
--editor-icon-fill: var(--dark-ink);
--editor-icon-fill_disabled: var(--dark-ink-dim);
--editor-grip-bg: linear-gradient(#0000 0, hsl(var(--primary-color-hue), 10%, 40%) 2px, #0000 3px, hsl(var(--primary-color-hue), 10%, 40%) 5px, #0000 6px, hsl(var(--primary-color-hue), 10%, 40%) 8px, #0000 9px);
/* The sprite is a mix: most icons are near-black line art, but a few carry
/* their own colour - the YouTube mark, the coloured letters. Inverting alone
/* would light the line art and wreck those, so the hue rotation puts the
/* coloured ones back roughly where they started while the greys, which have
/* no hue to rotate, stay inverted. */
--editor-icon-filter: invert(1) hue-rotate(180deg);
--editor-group-bg: var(--dark-bg-3);
--editor-popup-bg: rgba(0, 0, 0, 0.65);
--editor-popup-container-bg: var(--dark-bg-3);
--editor-tablegrid-bg_active: hsl(var(--primary-color-hue), 40%, 45%);
--editor-tablegrid-border-color: var(--dark-line-strong);

/** Auto Suggest **/
--autosuggest-border-color: var(--dark-line-strong);
--autosuggest-item-bg: var(--dark-bg-3);
Expand Down
52 changes: 28 additions & 24 deletions Themes/default/css/jquery.sceditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,28 @@
* https://opensource.org/licenses/mit-license.php
*/
.sceditor-grip {
border-top: 1px solid #bbb;
border-top: 1px solid var(--editor-grip-border-color);
cursor: s-resize;
padding-block: 4px;
text-align: center;
line-height: 0;
}
.sceditor-grip::before {
background: linear-gradient(#0000 0, #bbb 2px, #0000 3px, #bbb 5px, #0000 6px, #bbb 8px, #0000 9px);
background: var(--editor-grip-bg);
content: "";
display: inline-block;
height: 9px;
width: 64px;
}
/* Every toolbar icon is cut from one raster sprite, so none of them can be
recoloured the way an icon font or an SVG could. The filter is the only lever
a colour mode has over them; it is `none` here and stays that way. */
.sceditor-button div {
background-image: url("../images/icons/editor_sprite.png");
background-repeat: no-repeat;
width: 16px;
height: 16px;
filter: var(--editor-icon-filter);
}
.sceditor-button-youtube div {
background-position: 0px 0px;
Expand Down Expand Up @@ -152,7 +156,7 @@
position: relative;
display: flex;
flex-direction: column;
border: 1px solid #bbb;
border: 1px solid var(--editor-border-color);
}
.sceditor-container iframe,
.sceditor-container textarea {
Expand All @@ -171,12 +175,12 @@ div.sceditor-dnd-cover {
left: 0;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.2);
border: 5px dashed #aaa;
background: var(--editor-dnd-bg);
border: 5px dashed var(--editor-dnd-border-color);
z-index: 200;
font-size: 2em;
text-align: center;
color: #aaa;
color: var(--editor-dnd-color);
}
div.sceditor-dnd-cover p {
position: relative;
Expand Down Expand Up @@ -215,11 +219,11 @@ body.sceditor-maximize {
}
.sceditor-dropdown {
position: absolute;
border: 1px solid #ccc;
background: #fff;
border: 1px solid var(--editor-dropdown-border-color);
background: var(--editor-dropdown-bg);
z-index: 4000;
border-radius: 2px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--editor-dropdown-box-shadow);
}
.sceditor-dropdown:not(.sceditor-font-picker, .sceditor-item-picker) > div {
display: grid;
Expand All @@ -238,15 +242,15 @@ body.sceditor-maximize {
}
.sceditor-dropdown label {
display: block;
color: #3c3c3c;
color: var(--editor-dropdown-label-color);
padding: 4px 0;
}
.sceditor-dropdown a:hover {
background: #eee;
background: var(--editor-dropdown-link-bg_hover);
text-decoration: none;
}
.sceditor-dropdown a {
color: #222;
color: var(--editor-dropdown-link-color);
display: block;
line-height: 1;
padding: 7px 10px;
Expand All @@ -269,10 +273,10 @@ body.sceditor-maximize {
}
.sceditor-group {
display: inline-block;
background: #ddd;
background: var(--editor-group-bg);
padding: 1px 2px;
margin: 2px 4px;
border-bottom: 1px solid #aaa;
border-bottom: 1px solid var(--editor-group-border-color);
border-radius: 3px;
}
.sceditor-button {
Expand All @@ -287,13 +291,13 @@ body.sceditor-maximize {
.sceditor-button:not(.disabled):hover,
.sceditor-button:active,
.sceditor-button.active {
background: #fff;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
background: var(--editor-button-bg_active);
box-shadow: var(--editor-button-box-shadow_active);
}

.sceditor-button:active {
background: #fff;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
background: var(--editor-button-bg_pressed);
box-shadow: var(--editor-button-box-shadow_pressed);
}
.sceditor-button.disabled {
cursor: default;
Expand All @@ -303,12 +307,12 @@ body.sceditor-maximize {
height: 16px;
width: 16px;
margin: 2px 0;
fill: #111;
fill: var(--editor-icon-fill);
pointer-events: none;
line-height: 1;
}
.sceditor-button.disabled svg {
fill: #888;
fill: var(--editor-icon-fill_disabled);
}
.sceditor-button div {
margin: 2px 0;
Expand Down Expand Up @@ -401,14 +405,14 @@ body.sceditor-maximize {
}
.sceditor-insert-table-grid span {
opacity: 0.5;
border: 1px solid #85a1b7;
border: 1px solid var(--editor-tablegrid-border-color);
}
.sceditor-insert-table-grid .active {
background: #85a1b7;
background: var(--editor-tablegrid-bg_active);
}

#popup {
background: #568d;
background: var(--editor-popup-bg);
height: 100%;
width: 100%;
position: fixed;
Expand All @@ -426,7 +430,7 @@ body.sceditor-maximize {
transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}
#popup-container {
background: #f5f5f5;
background: var(--editor-popup-container-bg);
border-radius: 0.4em;
margin: 0 auto;
padding: 1rem;
Expand Down
27 changes: 27 additions & 0 deletions Themes/default/css/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -765,4 +765,31 @@

/** Embedded Video **/
--video-bg: black;

/** Editor **/
--editor-border-color: #bbb;
--editor-button-bg_active: #fff;
--editor-button-bg_pressed: #fff;
--editor-button-box-shadow_active: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
--editor-button-box-shadow_pressed: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
--editor-dnd-bg: rgba(255, 255, 255, 0.2);
--editor-dnd-border-color: #aaa;
--editor-dnd-color: #aaa;
--editor-dropdown-bg: #fff;
--editor-dropdown-border-color: #ccc;
--editor-dropdown-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
--editor-dropdown-label-color: #3c3c3c;
--editor-dropdown-link-bg_hover: #eee;
--editor-dropdown-link-color: #222;
--editor-icon-filter: none;
--editor-grip-border-color: #bbb;
--editor-group-border-color: #aaa;
--editor-icon-fill: #111;
--editor-icon-fill_disabled: #888;
--editor-grip-bg: linear-gradient(#0000 0, #bbb 2px, #0000 3px, #bbb 5px, #0000 6px, #bbb 8px, #0000 9px);
--editor-group-bg: #ddd;
--editor-popup-bg: #568d;
--editor-popup-container-bg: #f5f5f5;
--editor-tablegrid-bg_active: #85a1b7;
--editor-tablegrid-border-color: #85a1b7;
}