Convert editor dark mode to presets

_locales/en/messages.json

@@ -110,6 +110,9 @@
   "reset": {
     "message": "Reset"
   },
+  "default": {
+    "message": "Default"
+  },
   "presets": {
     "message": "Presets"
   },

addons/color-picker/code-editor.js

@@ -57,7 +57,9 @@ export default async ({ addon, console, msg }) => {
       value: defaultColor || "#000000",
     });
     const saColorPickerText = Object.assign(document.createElement("input"), {
-      className: "sa-color-picker-text sa-color-picker-code-text",
+      className: addon.tab.scratchClass("input_input-form", {
+        others: "sa-color-picker-text sa-color-picker-code-text",
+      }),
       type: "text",
       pattern: "^#?([0-9a-fA-F]{3}){1,2}$",
       placeholder: msg("hex"),

addons/color-picker/style.css

@@ -28,30 +28,6 @@
 .sa-color-picker > .sa-color-picker-text {
   box-sizing: border-box;
   width: calc(150px - 3rem);
-}
-
-.sa-color-picker > .sa-color-picker-code-text {
-  border-radius: 0;
-  border-top-right-radius: 1rem;
-  border-bottom-right-radius: 1rem;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  box-sizing: border-box;
-  width: calc(150px - 3rem);
-  height: 2rem;
-  padding: 0 0.75rem;
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: bold;
-  transition: all 0.25s ease-out;
-}
-
-.sa-color-picker > .sa-color-picker-code-text:focus {
-  outline: none;
-  border-color: hsla(215, 100%, 65%, 1);
-  box-shadow: 0 0 0 0.25rem hsla(215, 100%, 65%, 0.35);
-}
-
-.sa-color-picker > .sa-color-picker-paint-text {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

addons/dark-www/addon.json

@@ -168,7 +168,7 @@
       "potentialValues": [
         {
           "id": "experimental-dark",
-          "name": "Experimental Dark"
+          "name": "\"Experimental\" Dark"
         }
       ],
       "default": "experimental-dark"

addons/dark-www/experimental_scratchwww.css

@@ -1,4 +1,4 @@
-html > body:not(.sa-body-editor):not(.monitor_monitor-container_2J9gl),
+html > body:not(.sa-body-editor),
 body:not(.sa-body-editor) h1,
 body:not(.sa-body-editor) h2,
 body:not(.sa-body-editor) h3,
@@ -23,10 +23,6 @@ body:not(.sa-body-editor) .join-flow-title,
 .initiatives-section .initiatives-tools .subsection-tag.collaborator {
   color: #fff;
 }
-.monitor_label_ci1ok {
-  /* For some strange reason, variable names inherit their color from the body, unlike list title names */
-  color: #575e75;
-}
 #view,
 .outer #projectBox,
 .tips-getting-started,
@@ -54,7 +50,8 @@ body:not(.sa-body-editor) .gender-radio-row,
 .project-remixes::before,
 .project-views::before,
 img.tips-icon,
-.tabs li:not(.active) .tab-icon {
+.tabs li:not(.active) .tab-icon,
+body:not(.sa-body-editor) .stage-header_stage-button-icon_3zzFK {
   filter: brightness(0) invert(1);
 }
 .project-loves.loved::before,
@@ -86,7 +83,8 @@ body:not(.sa-body-editor) .modal-content,
 .milestones-section .milestone-box,
 .supporters-section .comment-text,
 .card,
-.extension-landing .project-card {
+.extension-landing .project-card,
+body:not(.sa-body-editor) .stage-header_stage-button_hkl9B {
   background: #282828;
 }
 .comment-text::after {
@@ -134,7 +132,9 @@ input[type="checkbox"].formik-checkbox,
 .information-page .info-outer nav,
 .conf2020-panel,
 .extension-landing hr,
-.extension-landing .project-card {
+.extension-landing .project-card,
+body:not(.sa-body-editor) .stage_stage_1fD7k,
+body:not(.sa-body-editor) .stage-header_stage-button_hkl9B {
   border-color: #606060;
 }
 .box .box-header {
@@ -188,10 +188,8 @@ body:not(.sa-body-editor) .select select option,
   content: url(%addon-self-dir%/assets/waffle.png);
 }
 
-[class^="loader_background"] {
-  background-color: #252525;
-}
-
-.project-info-alert {
+.project-info-alert,
+.monitor_label_ci1ok, /* for some strange reason, variable names inherit their color from the body, unlike list title names */
+.monitor_list-empty_1UKsB {
   color: #575e75;
 }