Fix(CMS, Page Builder): Preview Background Color and Rich Text Color on Dark Theme

[jarretmoses]

Related Issue

Closes #953

Your solution

There were a couple ways to fix this (I am not familiar with preferred standards), however I removed a collision the styled components were creating with enforced background colors that were still on the light theme but were redundant due to mdc-elevation--z${VALUE} styles. For the rich text editor I updated the value for the variable when the page is within the .dark-theme. Was debating updating --webiny-theme-color-surface instead of removing the styled css declarations.

How Has This Been Tested?

Manually (locally) checking before and after styles based on attached screens shots. Looked through the app also to see where else these styles may have been used.

Screenshots (if relevant):

[Pavel910]

Hi @jarretmoses looks great! I'm just not entirely sure we want to have the Page preview to also render in the dark mode, this image in particular:

@SvenAlHamad what do you think? This looks cool to me, but not sure if it's really usable. The site will rarely have dark mode 🤔

[jarretmoses]

@Pavel910 that is fine if not but if you look at the last image I attached, the viewer text is unintelligible for dark theme Does the viewer always want to be light? If so then perhaps the text styles for that need to be reflective. Even if rarely used I'd figure it should be readable no matter what

[Pavel910]

@jarretmoses actually that appears to be a bug, because even in dark mode, we always had the same styles in that Preview pane as in Light mode. I'll have to double check, but this does look great like this.

[SvenAlHamad]

It's been a while since I last looked at this: )

We have to be a bit careful here. The background colour on that section (PageBuilder page preview) is intentionally not connected with the admin dark theme. The reason is that the page template, that is the site theme, is responsible for both font styles, font colours as well as the background colour inside the preview and not the admin theme.

That being said, we can take the approach of saying that the page builder theme also has a "dark" mode, which is activated via the same way as the admin theme, by adding .dark-mode to the body class. This way when you have the admin in dark mode, the page builder theme will also activate its dark mode as it will inherit the body class.

One thing we want to ensure is that the page builder theme is not tightly coupled with the admin theme, this means you should not use the --mdc-theme-*variables inside the page builder theme.

That being said, I would suggest a few minor changes to this PR to make this work:

1. Revert the change on packages/app-page-builder-theme/src/styles/base.scss you don't need that change.
2. Inside packages/app-page-builder-theme/src/styles/variables.scss define all the dark theme variables inside the body.dark-theme but don't reference the --mdc-theme-* variables, instead provide fixed values to make the theme looks good.

Hope this helps. If you have any questions, let me know, happy to help.

[jarretmoses]

@SvenAlHamad Thanks for the feedback. Ive made the 2 suggested changes. @Pavel910

[SvenAlHamad]

@jarretmoses thanks for updating the PR. I had a quick look at 5a16a96 I believe you might be missing a definition for --webiny-theme-color-surface inside the body.dark-theme. Without that definition the bg colour of the page in the preview would I assume be white. I haven't tested this though, leaving that for your to confirm.

[jarretmoses]

@SvenAlHamad added. You are correct that it was white

[Pavel910]

@jarretmoses I'll review the PR this week and get back to you. We're caught in the maze of different tasks, difficult to stay prompt on all fronts. Hope you understand :)

Thanks for your time 🎉 🚀

[jarretmoses]

@Pavel910. Not a problem at all. Just here to help.

[Pavel910]

@jarretmoses can I ask you to do one more change? I'd like these to be actual variables, which are only set if they don't already exist.

Please add this, instead of hardcoded values:

// dark theme
$webiny-theme-dark-surface: #242424 !default;
$webiny-theme-dark-text-primary-on-background: rgba(255, 255, 255, 0.87) !default;

body.dark-theme {
  --webiny-theme-color-text-primary: #{$webiny-theme-dark-text-primary-on-background};
  --webiny-theme-color-surface: #{$webiny-theme-dark-surface};
}

Once this is done, I'm merging the PR. Thanks! 🚀

[jarretmoses]

@Pavel910 done

[Pavel910]

@jarretmoses merged! Thank you for your time! 👍 🚀