ScratchAddons · mxmou · Nov 18, 2024 · Nov 8, 2024 · Nov 18, 2024
diff --git a/addons/editor-theme3/addon.json b/addons/editor-theme3/addon.json
@@ -163,6 +163,19 @@
         "g": 0.7,
         "b": 0.7
       }
+    },
+    {
+      "name": "commentTopBar",
+      "value": {
+        "type": "multiply",
+        "source": {
+          "type": "settingValue",
+          "settingId": "comment-color"
+        },
+        "r": 0.9,
+        "g": 0.9,
+        "b": 0.9
+      }
     }
   ],
   "dynamicEnable": true,

diff --git a/addons/editor-theme3/black_text.css b/addons/editor-theme3/black_text.css
@@ -1,9 +1,11 @@
+.categoryBubble::after,
 .scratchCategoryItemBubble::after {
   /* block-palette-icons */
   filter: brightness(0);
 }
 
-.blocklyEditableText > text {
+.blocklyEditableText > text,
+.scratch-renderer.default-theme .blocklyEditableField > text {
   fill: var(--editorTheme3-inputColor-blackText);
 }
 .sa-theme3-editable-label .blocklyHtmlInput {
@@ -12,15 +14,18 @@
 }
 
 .blocklyDropDownDiv .goog-menuitem,
+.blocklyDropDownDiv .blocklyMenuItem,
 .blocklyNumPadButton {
   color: black;
 }
-.blocklyDropDownDiv .blocklyText {
+.blocklyDropDownDiv .blocklyText,
+.blocklyDropDownDiv.scratch-renderer.default-theme .blocklyText {
   /* "Play note" dropdown */
   fill: black;
 }
 .blocklyDropDownDiv .goog-menuitem-highlight,
 .blocklyDropDownDiv .goog-menuitem-hover,
+.blocklyDropDownDiv .blocklyMenu .blocklyMenuItem:hover,
 .sa-contextmenu-colored .blocklyContextMenu .goog-menuitem-highlight {
   background-color: var(--editorTheme3-hoveredItem, rgba(255, 255, 255, 0.3));
 }

diff --git a/addons/editor-theme3/color_on_black.css b/addons/editor-theme3/color_on_black.css
@@ -4,24 +4,33 @@
 .u-dropdown-searchbar:focus {
   background-color: var(--editorTheme3-hoveredItem);
 }
-.blocklyDropDownDiv .goog-menuitem-checkbox {
+.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
   filter: brightness(0) invert(1);
 }
 
 .scratchCommentRect {
   fill: #282828;
 }
 .scratchCommentBody,
-.scratchCommentTextarea {
+.scratchCommentTextarea,
+.blocklyComment .blocklyTextarea {
   background-color: #282828;
 }
 .scratchWorkspaceCommentBorder {
   stroke: var(--editorTheme3-commentColor);
 }
-.scratchCommentTextarea::placeholder {
+.blocklyComment {
+  --colour-commentBorder: var(--editorTheme3-commentColor);
+}
+.blocklyCommentTopbarBackground {
+  fill: #202020;
+}
+.scratchCommentTextarea::placeholder,
+.blocklyCommentText::placeholder {
   color: rgba(255, 255, 255, 0.5);
 }
-.scratchCommentText {
+.scratchCommentText,
+.scratch-renderer.default-theme .blocklyComment .blocklyTextarea {
   fill: #ffffff;
   color: #ffffff;
 }

diff --git a/addons/editor-theme3/color_on_white.css b/addons/editor-theme3/color_on_white.css
@@ -1,3 +1,4 @@
+.categoryBubble::after,
 .scratchCategoryItemBubble::after {
   /* block-palette-icons */
   filter: brightness(0);
@@ -11,13 +12,28 @@
 .u-dropdown-searchbar,
 .u-dropdown-searchbar:focus,
 .blocklyDropDownDiv .goog-menuitem,
+.blocklyDropDownDiv .blocklyMenuItem,
 .blocklyNumPadButton {
   color: #575e75;
 }
+.blocklyDropDownDiv .blocklyText,
+.blocklyDropDownDiv.scratch-renderer.default-theme .blocklyText {
+  /* "Play note" dropdown */
+  fill: #575e75;
+}
 .u-dropdown-searchbar:focus {
   background-color: var(--editorTheme3-hoveredItem);
 }
 
+.blocklyAngleGauge,
+.blocklyAngleCenterPoint {
+  fill: black;
+}
+.blocklyAngleLine,
+.blocklyAngleMarks,
+.blocklyAngleCenterPoint {
+  stroke: black;
+}
 .blocklyAngleDragHandle {
   stroke: black;
   stroke-opacity: 0.15;
@@ -28,16 +44,24 @@
   fill: #feffff;
 }
 .scratchCommentBody,
-.scratchCommentTextarea {
+.scratchCommentTextarea,
+.blocklyComment .blocklyTextarea {
   background-color: #ffffff;
 }
 .scratchWorkspaceCommentBorder {
   stroke: var(--editorTheme3-commentColor);
 }
+.blocklyComment {
+  --colour-commentBorder: var(--editorTheme3-commentColor);
+}
+.blocklyCommentTopbarBackground {
+  fill: #e9eef2;
+}
 .scratchCommentTextarea::placeholder {
   color: rgba(0, 0, 0, 0.5);
 }
-.scratchCommentText {
+.scratchCommentText,
+.scratch-renderer.default-theme .blocklyComment .blocklyTextarea {
   fill: #575e75;
   color: #575e75;
 }

diff --git a/addons/editor-theme3/theme3.css b/addons/editor-theme3/theme3.css
@@ -1,18 +1,28 @@
-.blocklyEditableText > text {
+/* Styles for .high-contrast-theme aren't necessary
+   because the addon sets the theme name to "default". */
+
+.blocklyEditableText > text,
+.scratch-renderer.default-theme .blocklyEditableField > text {
   fill: var(--editorTheme3-inputColor-text);
 }
-.blocklyHtmlInput {
+.blocklyHtmlInput,
+.scratch-renderer.default-theme .blocklyHtmlInput {
   /* Hide the HTML input so that only the SVG part is visible.
      This is needed for transparent inputs. */
   background-color: transparent;
   color: transparent;
   caret-color: var(--editorTheme3-inputColor-text);
 }
 .sa-theme3-editable-label .blocklyHtmlInput {
-  /* Labels in custom block editor */
+  /* Labels in custom block editor (focused state) */
   background-color: var(--editorTheme3-inputColor-editableLabel);
   color: var(--editorTheme3-inputColor-text);
 }
+.scratch-renderer.default-theme .blocklyEditableField > rect:not(.blocklyDropdownRect) {
+  /* Labels in custom block editor.
+     In the new Blockly version, they currently look like normal text inputs. */
+  fill: var(--editorTheme3-inputColor);
+}
 
 /* Override Scratch's high contrast theme */
 .blocklyDropDownDiv .goog-menuitem {
@@ -24,6 +34,7 @@
 }
 .blocklyDropDownDiv .goog-menuitem-highlight,
 .blocklyDropDownDiv .goog-menuitem-hover,
+.blocklyDropDownDiv .blocklyMenu .blocklyMenuItem:hover,
 .sa-contextmenu-colored .blocklyContextMenu .goog-menuitem-highlight {
   background-color: var(--editorTheme3-hoveredItem, rgba(0, 0, 0, 0.2));
 }
@@ -32,16 +43,25 @@
   fill: var(--editorTheme3-commentColor);
 }
 .scratchCommentBody,
-.scratchCommentTextarea {
+.scratchCommentTextarea,
+.blocklyComment .blocklyTextarea {
   background-color: var(--editorTheme3-commentColor);
 }
 .scratchWorkspaceCommentBorder {
   stroke: var(--editorTheme3-commentBorder);
 }
-.scratchCommentTextarea::placeholder {
+.blocklyComment {
+  --colour-commentBorder: var(--editorTheme3-commentBorder);
+}
+.blocklyCommentTopbarBackground {
+  fill: var(--editorTheme3-commentTopBar);
+}
+.scratchCommentTextarea::placeholder,
+.blocklyCommentText::placeholder {
   color: var(--editorTheme3-commentTextTransparent);
 }
-.scratchCommentText {
+.scratchCommentText,
+.scratch-renderer.default-theme .blocklyComment .blocklyTextarea {
   fill: var(--editorTheme3-commentText);
   color: var(--editorTheme3-commentText);
 }