Add Theme Support 🎨

[thsparks]

Overview

This is a first pass at adding color theme support for arcade (and other targets in the future).

See the theme README.md file (theme\color-themes\README.md) for details on what each theme variable is for. They are loosely based on fluentUI, though of course, we have a much smaller set to deal with.

Upload Target: https://arcade.makecode.com/app/8ff7826fe1b820f3793c301c11dabf0ce5bcfdc0-0927214d31

Key Areas

Most of this change is just updating colors, but here are a few spots that deserve special attention:

1. react-common\components\theming\themeManager.ts - this is what handles actual theme-related operations
2. cli\cli.ts - this is where theme json is added to the target bundle
3. webapp\src\app.tsx & pxtlib\auth.ts -> loading / saving themes
4. react-common\components\theming\ThemePickerModal.tsx & related elements

How It Works

In short, when a user changes themes, we swap out the variable definitions and apply any override css directly on a theme-override style element in the document head (we create it if it does not exist). See the ThemeManager for implementation.

A Few Shortcuts I Took

1. I considered going through and scanning all uses of @ color variables, but it was too much. I'm planning to just address these as bug fixes if/when we notice issues.
2. I considered doing away with the color css classes too (red/green/teal/etc…) just because they seem so tightly integrated with semantic ui and run vaguely counter to the idea of theming in general…but I think they are actually quite helpful in some scenarios, so I've left them in and overridden them instead. (Also, it'd be infeasible and likely undesirable to go through each one and create bespoke classes related to the specific component.)
3. A proper high contrast theme in this new infrastructure will require taking all the .hc and .high-contrast css adjustments and putting them into the overrides file. This will be a significant chunk of work, so for now I've added a workaround that just add those css classes when switching to the hc theme specifically.

Additional Notes

1. The term "theme" is used all over the codebase, so I've used "color theme" when I felt there was a risk of confusion.
2. We decided to go with all css theme variables (as opposed to less) so they can be swapped out at runtime, no need for less compilation.
3. Since semantic UI has its own way of theming that is less flexible for switching at runtime, I had to override quite a lot of semantic UI styling. I've tried to encapsulate all of this in a single react-common\styles\semantic-ui-overrides.less file. I think this was still less work than removing semantic UI altogether. But it certainly isn't tidy. I didn't want to use !important all over the place, so I've opted for using weirdly specific css selectors instead.
4. I don't love adding a "tertiary" type alongside primary/secondary, but there were enough places where one version of the app used primary and another used secondary that it made sense to create a third option which accounted for that. The alternative was a adding bunch of css overrides to maintain consistency with existing styles, which seemed less ideal to me.
5. I haven't made any changes for kiosk, but I also didn't notice any issues testing locally, so I'm planning to leave it as-is for now.

Remaining Work (after PR)

1. Better dark theme. Toolbox color contrast will also be a challenge here...
2. Make high contrast theme work without hc/high-contrast root classes

[abchatra]

Awesome to see this. Ok to assign copilot to review this change (I am curious what it will do) ?

[thsparks]

Awesome to see this. Ok to assign copilot to review this change (I am curious what it will do) ?

Sure, I'll assign it

[Copilot]

Copilot reviewed 106 out of 120 changed files in this pull request and generated 1 comment.

Files not reviewed (14)

• react-common/styles/controls/Button.less: Language not supported
• react-common/styles/controls/Card.less: Language not supported
• react-common/styles/controls/DraggableGraph.less: Language not supported
• react-common/styles/controls/Dropdown.less: Language not supported
• react-common/styles/controls/EditorToggle.less: Language not supported
• react-common/components/controls/TeachingBubble.tsx: Evaluated as low risk
• react-common/components/controls/Modal.tsx: Evaluated as low risk
• react-common/components/profile/SignInModal.tsx: Evaluated as low risk
• react-common/components/Notification.tsx: Evaluated as low risk
• pxtlib/auth.ts: Evaluated as low risk
• react-common/components/share/ShareInfo.tsx: Evaluated as low risk
• pxteditor/editorcontroller.ts: Evaluated as low risk
• pxtservices/editorDriver.ts: Evaluated as low risk
• gulpfile.js: Evaluated as low risk

Comments suppressed due to low confidence (1)

react-common/components/theming/themeManager.ts:115

• The use of DOMPurify.sanitize on the programmatically generated CSS string is unnecessary and might strip out necessary CSS rules. Consider removing this sanitization step.

css = DOMPurify.sanitize(css);