Fix Loading Screen Color (#6410)

thsparks · web-flow · commit d8631090ba74 · 2025-06-27T14:48:24.000-07:00
Make default fully opaque so it never partially overlays the rest of the app, which is what made it look bad on other themes, then allow for overrides of non-loading dimmer and just override back to light-blue on micro:bit.
diff --git a/theme/color-themes/overrides/microbit-light-overrides.css b/theme/color-themes/overrides/microbit-light-overrides.css
@@ -49,4 +49,9 @@ path.blocklyFlyoutBackground {
 
 #serialPreview .label {
     border-color: var(--pxt-primary-background);
+}
+
+.ui.dimmer {
+    /* Matches color specified in dimmer.variables, but with partial transparency */
+    background-color: rgba(52, 84, 209, 0.4) !important;
 }
diff --git a/theme/site/modules/dimmer.variables b/theme/site/modules/dimmer.variables
@@ -2,4 +2,4 @@
     User Variable Overrides
 *******************************/
 
-@backgroundColor: fade(@blue, 40%);
+@backgroundColor: #B4BFED;

Original file line number	Diff line number	Diff line change
`@@ -49,4 +49,9 @@ path.blocklyFlyoutBackground {`
`49`	`49`
`50`	`50`	`#serialPreview .label {`
`51`	`51`	`border-color: var(--pxt-primary-background);`
	`52`	`+}`
	`53`	`+`
	`54`	`+.ui.dimmer {`
	`55`	`+ /* Matches color specified in dimmer.variables, but with partial transparency */`
	`56`	`+ background-color: rgba(52, 84, 209, 0.4) !important;`
`52`	`57`	`}`