Hard code editor toggle in scenarios where background is also hard-coded

microsoft · Feb 26, 2025 · 965e660 · 965e660
1 parent 0ff8296
commit 965e660
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/theme/common.less b/theme/common.less
@@ -2651,6 +2651,30 @@ button.ui.button.hostmultiplayergame-button {
     }
 }
 
+#blocks-editor-field-div,
+.sound-effect-editor-widget {
+    // Header colors are hard-coded for field editors, so hard-code the toggle
+    // colors as well to ensure good contrast.
+    .common-editor-toggle {
+        border: 3px solid rgba(52, 73, 94, .2);
+        background: rgba(52, 73, 94, .4);
+
+        .common-editor-toggle-item {
+            &> .common-button {
+                color: #fff;
+            }
+
+            &.selected > .common-button {
+                color: #323130;
+            }
+        }
+
+        .common-editor-toggle-handle {
+            background: #fff;
+        }
+    }
+}
+
 .blocks-editor-field-overlay {
     position: absolute;
     z-index: @blocklyWidgetDivZIndex;

diff --git a/theme/soundeffecteditor.less b/theme/soundeffecteditor.less
@@ -53,7 +53,7 @@
     justify-content: center;
     align-items: center;
 
-    background-color: var(--pxt-primary-background);
+    background-color: #e30fc0; // Matches block color
 
     & > .common-button {
         position: absolute;