Use SCSS to derive theme colors from a smaller set of variables

[adamerose]

I am trying to give CKEditor5 a dark theme and am finding the process difficult, the guide links to a list of customizable colors which includes 67 different CSS variables controlling various colors. To give CKEditor5 a custom dark theme I will have to manually adjust a lot of those.

📝 Description of the improvement

Could a possible improvement on CKEditor5 theming be to use SCSS and have more variables derived from base colors? For example given the first snippet below, I would have to manually pick and update all 5 colors to effectively change the color of buttons. But if it was instead SCSS like in the 2nd snippet I would only need to change a single variable.

--ck-color-base-action: hsl(104, 44%, 48%);
--ck-color-button-action-background: var(--ck-color-base-action);
--ck-color-button-action-hover-background: hsl(104, 44%, 43%);
--ck-color-button-action-active-background: hsl(104, 44%, 41%);
--ck-color-button-action-active-shadow: hsl(104, 44%, 36%);
--ck-color-button-action-disabled-background: hsl(104, 44%, 58%);

$ck-color-base-action: hsl(104, 44%, 48%);
--ck-color-base-action: $ck-color-base-action;
--ck-color-button-action-background: $ck-color-base-action;
--ck-color-button-action-hover-background: darken($ck-color-base-action, 5);
--ck-color-button-action-active-background: darken($ck-color-base-action, 7);
--ck-color-button-action-active-shadow: darken($ck-color-base-action, 12);
--ck-color-button-action-disabled-background: lighten($ck-color-base-action, 10);

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[adamerose]

In my own project I had to mostly rewrite _colors.css myself to because otherwise it was impossible to manage making a dark theme. I took the 67 variables in _colors.css and the various other color variables scattered throughout other files (which this PR consolidates into _colors.css) and fiddled with them while watching devtools to figure out what they all did, and I ended up grouping it all into 17 color theme variables I could more easily work with so I could make the dark theme shown below:
https://github.com/adamerose/markdown-editor/blob/master/media/markdownEditorStyles.css

/*  Main theming variables ----------------------------------------------------------------- */
/* This is the base color for all text and icons outside the editor body */
--foreground: var(--vscode-editor-foreground);
/* This is the background color for the editor body */
--background-1: var(--vscode-editor-background);
/* This is the background color for the toolbar */
--background-2: var(--vscode-editorWidget-background);
--background-3: var(--vscode-dropdown-background);
--background-4: var(--vscode-badge-background);
/* From darkest to lightest */
--shadow-1: rgba(0, 0, 0, 20%);
--shadow-2: rgba(2, 1, 1, 0.1);
--shadow-3: rgba(26, 13, 13, 0.05);
/* Other */
--border: var(--background-4);
--focus: var(--vscode-focusBorder);
--focus-dark: var(--vscode-quickInputList-focusBackground);
--semantic-good: hsl(104, 44%, 48%);
--semantic-good-dark: hsl(104, 44%, 30%);
--semantic-warning: orange;
--semantic-bad: hsl(15, 100%, 43%);
--semantic-bad-dark: hsla(9, 100%, 56%, 0.3);
--ck-color-base-action: hsl(104, 44%, 48%);

I was planning on potentially submitting a PR with the above CSS changes once my project is more polished.

[AnnaTomanek]

cc @oleq

[oleq]

Thanks for pointing this out. We are aware that theming CKEditor 5 is not an easy feat. Just for clarity, we went with PostCSS mainly because SASS is incapable of handling the complex, modular architecture of the editor and resolve CSS dependencies in such a way no CSS code is duplicated. The way CKEditor 5 is built is uncommon and popular CSS processors such as SASS or Less fail to handle all the corner cases. It took us a lot of time and research to figure it out.

Anyway, now that you posted your snippet @adamerose 

$ck-color-base-action: hsl(104, 44%, 48%);
--ck-color-base-action: $ck-color-base-action;
--ck-color-button-action-background: $ck-color-base-action;
--ck-color-button-action-hover-background: darken($ck-color-base-action, 5);
--ck-color-button-action-active-background: darken($ck-color-base-action, 7);
--ck-color-button-action-active-shadow: darken($ck-color-base-action, 12);
--ck-color-button-action-disabled-background: lighten($ck-color-base-action, 10);

what prevents you from using SASS in your project and this exact snippet to generate overrides for CKEditor 5 default custom properties? If you wrap these in :root {} and load them later in DOM than CKEditor 5, they will override anything the editor comes with out of the box.

[adamerose]

The way CKEditor 5 is built is uncommon and popular CSS processors such as SASS or Less fail to handle all the corner cases. It took us a lot of time and research to figure it out.

Okay that's understandable.

what prevents you from using SASS in your project and this exact snippet to generate overrides for CKEditor 5 default custom properties? If you wrap these in :root {} and load them later in DOM than CKEditor 5, they will override anything the editor comes with out of the box.

This is possible but still requires manually adjusting all 67 variables in _colors.css, my goal for this issue was to make it easier for future users to not have to do that.

For example in _colors.css there is this snippet:

--ck-color-button-on-background: 						hsl(0, 0%, 87%);
--ck-color-button-on-hover-background: 						hsl(0, 0%, 77%);
--ck-color-button-on-active-background: 					hsl(0, 0%, 73%);
--ck-color-button-on-active-shadow: 						hsl(0, 0%, 63%);
--ck-color-button-on-disabled-background: 					hsl(0, 0%, 87%);

Those required me to fiddle around in dev tools to see where those colors show up and how they look and then translate them into 5 new colors for my own theme. I went through this process myself and eventually ended up with CSS like below (that's from my project linked above) where I could play around with those main variables to design my theme.

--ck-color-button-on-background: 						var(--ck-color-base-action);
--ck-color-button-on-hover-background: 						var(--semantic-good);
--ck-color-button-on-active-background: 					var(--semantic-good);
--ck-color-button-on-active-shadow: 						var(--semantic-good-dark);
--ck-color-button-on-disabled-background: 					var(--semantic-good);

However, in order to boil all the different colors down to the smaller number of main theming variables in my previous comment's snippet without using SASS I had to get rid of some distinct colors like making --ck-color-button-on-hover-background and --ck-color-button-on-active-background the same.

It would be possible to use SASS to accurately derive every color in _colors.css from the main variables I created, the only reason I didn't do this is because I wanted to base my theme on VS Code runtime CSS variables which can't be assigned to SASS variables. Maybe a future user can do this and post their results.

---

Can the PostCSS implementation used by CKEditor5 do things like darken and lighten? If so then my suggestion of deriving more colors from primary variables would still be a potential addition even without SASS. If not, this can probably be closed.

[Reinmar]

Disclaimer: If I misunderstood the issue, ignore my comment

Correct me if I'm wrong, @oleq, but we used relative colors in the beginning but that wasn't actually helping with recolorization because in a different theme (especially bright vs dark) the dependencies between colors were changing. We dropped that when introducing the dark theme guide, am I right?

[Whip]

67 variables are simply too much. Makes the use of variables pretty moot IMO. Atleast don't define them on :root because its polluting the space for my own variables. I don't think any project needs 67 different color values, it would be great if you could consolidate them into fewer variables or if they are not used frequently, don't use variables at all or see if :root can be spared from this variable shotgun.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).