Add Dark Theme (and fix a few theming bugs) (#6343)

This adds a dark theme for micro:bit and fixes a few theming bugs along the way. While doing this work, I found a few places in the micro:bit styles.less that were hard-coded to light-theme-specific values. I themed them when I could and moved the rest into overrides.

Author: thsparks

theme/blockly-toolbox.less

@@ -4,7 +4,7 @@
 *******************************/
 
 div.blocklyTreeRow {
-    box-shadow: inset 0 -1px 0 0 #ecf0f1;
+    box-shadow: inset 0 -1px 0 0 var(--pxt-target-stencil3);
 
     margin-bottom: 0px !important;
 
@@ -20,14 +20,15 @@ span.blocklyTreeLabel {
     font-weight: 200;
 }
 
-.blocklyToolboxDiv, .monacoToolboxDiv {
-    background-color: white !important;
-    box-shadow: 4px 0px 2px -4px rgba(0,0,0,0.12), 4px 0px 2px -4px rgba(0,0,0,0.24);
+.blocklyToolbox, .monacoToolboxDiv {
+    background-color: var(--pxt-target-background3) !important;
+    color: var(--pxt-target-foreground3);
+    box-shadow: 4px 0px 2px -4px var(--pxt-neutral-alpha10), 4px 0px 2px -4px var(--pxt-neutral-alpha20);
 }
 
 /* Mobile */
 @media only screen and (max-width: @largestMobileScreen) {
-    .blocklyToolboxDiv, .monacoToolboxDiv {
+    .blocklyToolbox, .monacoToolboxDiv {
         border-left: 0 !important;
     }
     div.blocklyTreeRoot {
@@ -37,7 +38,7 @@ span.blocklyTreeLabel {
 
 /* Tablet */
 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-    .blocklyToolboxDiv, .monacoToolboxDiv {
+    .blocklyToolbox, .monacoToolboxDiv {
         border-left: 0 !important;
     }
     div.blocklyTreeRoot {

theme/color-themes/microbit-dark.json

@@ -0,0 +1,122 @@
+{
+    "id": "microbit-dark",
+    "name": "Dark",
+    "weight": 60,
+    "monacoBaseTheme": "vs-dark",
+    "overrideFiles": [
+        "/overrides/microbit-dark-overrides.css"
+    ],
+    "colors": {
+        "pxt-header-background": "#181818",
+        "pxt-header-foreground": "#ffffff",
+        "pxt-header-background-hover": "#252525",
+        "pxt-header-foreground-hover": "#ffffff",
+        "pxt-header-stencil": "#323232",
+
+        "pxt-primary-background": "#0078D4",
+        "pxt-primary-foreground": "#ffffff",
+        "pxt-primary-background-hover": "#026EC1",
+        "pxt-primary-foreground-hover": "#ffffff",
+        "pxt-primary-accent": "#005ba1",
+
+        "pxt-secondary-background": "#63276d",
+        "pxt-secondary-foreground": "#f3f2f1",
+        "pxt-secondary-background-hover": "#742e80",
+        "pxt-secondary-foreground-hover": "#f3f2f1",
+        "pxt-secondary-accent": "#411a47",
+
+        "pxt-tertiary-background": "#0078d4",
+        "pxt-tertiary-foreground": "#ffffff",
+        "pxt-tertiary-background-hover": "#026EC1",
+        "pxt-tertiary-foreground-hover": "#ffffff",
+        "pxt-tertiary-accent": "#0894ff",
+
+        "pxt-target-background1": "#2d2d2d",
+        "pxt-target-foreground1": "#f3f2f1", 
+        "pxt-target-background1-hover": "#202020",
+        "pxt-target-foreground1-hover": "#ffffff",
+        "pxt-target-stencil1": "#3b3a39",
+
+        "pxt-target-background2": "#181818",
+        "pxt-target-foreground2": "#ffffff",
+        "pxt-target-background2-hover": "#252525",
+        "pxt-target-foreground2-hover": "#ffffff",
+        "pxt-target-stencil2": "#323232",
+
+        "pxt-target-background3": "#1F1F1F",
+        "pxt-target-foreground3": "#ffffff",
+        "pxt-target-background3-hover": "#252525",
+        "pxt-target-foreground3-hover": "#ffffff",
+        "pxt-target-stencil3": "#323232",
+
+        "pxt-neutral-background1": "#1F1F1F",
+        "pxt-neutral-foreground1": "#f3f2f1",
+        "pxt-neutral-background1-hover": "#2c2c2c",
+        "pxt-neutral-foreground1-hover": "#ffffff",
+        "pxt-neutral-stencil1": "#3b3a39",
+
+        "pxt-neutral-background2": "#181818",
+        "pxt-neutral-foreground2": "#ffffff",
+        "pxt-neutral-background2-hover": "#252525",
+        "pxt-neutral-foreground2-hover": "#ffffff",
+        "pxt-neutral-stencil2": "#3b3a39",
+
+        "pxt-neutral-background3": "#202020",
+        "pxt-neutral-foreground3": "#f3f2f1",
+        "pxt-neutral-background3-hover": "#131313",
+        "pxt-neutral-foreground3-hover": "#ffffff",
+        "pxt-neutral-stencil3": "#070707",
+        "pxt-neutral-background3-alpha90": "#202020e6",
+
+        "pxt-neutral-base": "rgba(180, 180, 180, 1)",
+        "pxt-neutral-alpha0": "rgba(180, 180, 180, 0)",
+        "pxt-neutral-alpha10": "rgba(180, 180, 180, 0.1)",
+        "pxt-neutral-alpha20": "rgba(180, 180, 180, 0.2)",
+        "pxt-neutral-alpha50": "rgba(180, 180, 180, 0.5)",
+        "pxt-neutral-alpha80": "rgba(180, 180, 180, 0.8)",
+
+        "pxt-link": "#479ef5",
+        "pxt-link-hover": "#62abf5",
+        "pxt-focus-border": "#5caae5",
+
+        "pxt-colors-purple-background": "#63276d",
+        "pxt-colors-purple-foreground": "#f3f2f1",
+        "pxt-colors-purple-hover": "#742e80",
+        "pxt-colors-purple-alpha10": "#63276d19",
+
+        "pxt-colors-orange-background": "#7a2101",
+        "pxt-colors-orange-foreground": "#ffffff",
+        "pxt-colors-orange-hover": "#932801",
+        "pxt-colors-orange-alpha10": "#7a210119",
+
+        "pxt-colors-brown-background": "#50301a",
+        "pxt-colors-brown-foreground": "#ffffff",
+        "pxt-colors-brown-hover": "#633c20",
+        "pxt-colors-brown-alpha10": "#50301a19",
+
+        "pxt-colors-blue-background": "#0078D4",
+        "pxt-colors-blue-foreground": "#ffffff",
+        "pxt-colors-blue-hover": "#026EC1",
+        "pxt-colors-blue-alpha10": "#0078D419",
+
+        "pxt-colors-green-background": "#27ae60",
+        "pxt-colors-green-foreground": "#ffffff",
+        "pxt-colors-green-hover": "#1e8449",
+        "pxt-colors-green-alpha10": "#27ae6019",
+
+        "pxt-colors-red-background": "#e74c3c",
+        "pxt-colors-red-foreground": "#ffffff",
+        "pxt-colors-red-hover": "#c0392b",
+        "pxt-colors-red-alpha10": "#e74c3c19",
+
+        "pxt-colors-teal-background": "#1abc9c",
+        "pxt-colors-teal-foreground": "#ffffff",
+        "pxt-colors-teal-hover": "#16a085",
+        "pxt-colors-teal-alpha10": "#1abc9c19",
+
+        "pxt-colors-yellow-background": "#fde300",
+        "pxt-colors-yellow-foreground": "#000000",
+        "pxt-colors-yellow-hover": "#e4cc00",
+        "pxt-colors-yellow-alpha10": "#fde30019"
+    }
+}

theme/color-themes/overrides/microbit-dark-overrides.css

@@ -0,0 +1,85 @@
+
+#langmodal #availablelocales .langoption .header {
+    /* Better contrast than default, which is purple */
+    color: var(--pxt-neutral-foreground1);
+}
+
+.pxtToolbox span.blocklyTreeLabel,
+.pxtToolbox .blocklyTreeSelected span.blocklyTreeLabel,
+.pxtToolbox .blocklyTreeSelected .blocklyTreeIcon {
+    /* Better contrast in toolbox */
+    color: var(--pxt-target-foreground3);
+}
+
+.pxtToolbox #advanced > .blocklyTreeRow {
+    /* Better contrast for advanced section color */
+    border-color: var(--pxt-neutral-alpha80);
+}
+.pxtToolbox #advanced > .blocklyTreeRow .blocklyTreeIcon {
+    /* Better contrast for advanced section arrow icon */
+    color: var(--pxt-neutral-alpha80);
+}
+
+.pxtToolbox #serial .blocklyTreeIcon,
+.tutorial-container .serial span.docs.inlineblock {
+    /* Better contrast in toolbox & tutorial block colors, but try to preserve some of the icon color */
+    filter: brightness(1.2) saturate(2);
+}
+
+.pxtToolbox #control .blocklyTreeIcon,
+.tutorial-container .control span.docs.inlineblock {
+    /* Better contrast in toolbox & tutorial block colors, but try to preserve some of the icon color */
+    filter: brightness(1.2) saturate(2);
+}
+
+#mainmenu {
+    /* Some parts of the app use the same color as a background. This keeps the menu from blending in */
+    border-bottom: 1px solid var(--pxt-header-stencil);
+}
+
+.projectsdialog .ui.card:hover {
+    /* Neutral and target colors are the same in dark theme, so it helps to have a clearer border when hovering over cards. */
+    border-color: var(--pxt-focus-border) !important;
+}
+
+#simulator #editorSidebar.editor-sidebar {
+    /* Need a lighter background for sidebar to make the simulator stand out, since it's black on black otherwise */
+    background-color: var(--pxt-target-background1);
+}
+
+.fullscreensim #boardview {
+    /* Gradient background is a little too intense in dark mode. Use a solid color instead */
+    background: var(--pxt-target-background2);
+}
+
+/* 
+ * Inverted image colors
+ */
+.barcharticon,
+.blockly-ws-search-next-btn,
+.blockly-ws-search-previous-btn,
+.blockly-ws-search-close-btn {
+    filter: invert(1);
+}
+
+.modals .ui.button.immersive-reader-button,
+#mainmenu .immersive-reader-button.ui.item,
+#simulator .editor-sidebar .immersive-reader-button.ui.item {
+    background-image: url("/static/icons/immersive-reader-light.svg") !important;
+}
+
+.carouselarrow {
+    /* Better contrast, especially against images in carousels */
+    opacity: 0.9;
+}
+
+/* For inverted buttons, it almost always looks better to have the background be dark instead of light (even though non-inverted has a light foreground) */
+button.ui.button.inverted:not(.teaching-bubble-button),
+button.common-button.inverted:not(.teaching-bubble-button) {
+    background-color: var(--pxt-neutral-background2) !important;
+}
+
+button.ui.button.inverted:hover:not(.teaching-bubble-button),
+button.common-button.inverted:hover:not(.teaching-bubble-button) {
+    background-color: var(--pxt-neutral-background2-hover) !important;
+}

theme/color-themes/overrides/microbit-light-overrides.css

@@ -6,3 +6,47 @@
 .theme-preview-microbit-light .theme-preview-sim-button {
     background-color: var(--pxt-neutral-background2) !important;
 }
+
+#filelist, #editortools {
+    /* Special textured backgrounds, but we only have assets for light theme */
+    background: #fff url("/static/logo_texture.png") 0 0 repeat !important;
+}
+
+/*
+ * Adjustments to match the original micro:bit theme
+ */
+path.blocklyFlyoutBackground {
+    fill: #4b4949 !important;
+}
+
+.monacoFlyout {
+    background: #4b4949 !important;
+}
+
+#simulator .editor-sidebar .filemenu {
+    background: var(--pxt-secondary-background);
+    color: var(--pxt-secondary-foreground);
+}
+
+#simulator .editor-sidebar .filemenu .item:hover, #simulator .editor-sidebar .filemenu .link.item:hover {
+    background: var(--pxt-secondary-background-hover) !important;
+    color: var(--pxt-secondary-foreground-hover) !important;
+}
+
+#simulator .ui.button.play-button .icon.play {
+    color: var(--pxt-colors-green-background) !important;
+}
+
+.simtoolbar .ui.button.icon {
+    background-color: #e0e1e2;
+    color: rgba(0,0,0,.6);
+}
+
+.simtoolbar .ui.button.icon:hover {
+    filter: none;
+    background-color: rgb(224, 225, 226);
+}
+
+#serialPreview .label {
+    border-color: var(--pxt-primary-background);
+}

theme/style.less

@@ -27,35 +27,33 @@
 }
 
 .ui.button.download-button {
-    &:extend(.ui.purple.button all);
+    background-color: var(--pxt-primary-background);
+    color: var(--pxt-primary-foreground);
 }
 
 .ui.button.hw-button {
-    background-color: darken(@purple, 10%);
+    background-color: var(--pxt-primary-accent) !important;
+    color: var(--pxt-primary-foreground) !important;
 }
 
 .docs.inlinebutton.ui.button.download-button:hover {
-    &:extend(.ui.purple.button all);
+    background-color: var(--pxt-primary-background);
+    color: var(--pxt-primary-foreground);
 }
 
-.ui.button.play-button.play-button-full {
-    &:extend(.ui.inverted.button all);
-}
-
-.ui.button.getting-started-btn {
-    &:extend(.ui.orange.button all);
-}
-
-.ui.button.editortools-btn {
-    &:extend(.ui.blue.button all);
-}
+#editortools .ui.button.editortools-btn, .simtoolbar .ui.button.icon {
+    background-color: var(--pxt-secondary-background);
+    color: var(--pxt-secondary-foreground);
 
-.ui.button.exit-tutorial-btn {
-    &:extend(.ui.inverted.button all);
+    &:hover {
+        filter: none;
+        background-color: var(--pxt-secondary-background-hover);
+        color: var(--pxt-secondary-foreground-hover);
+    }
 }
 
-#filelist, #editortools {
-    background: #fff data-uri("../docs/static/logo_texture.png") 0 0 repeat !important;
+#simulator .ui.button.play-button .icon.play {
+    color: var(--pxt-secondary-foreground) !important;
 }
 
 #downloadArea {
@@ -112,6 +110,10 @@
     }
 }
 
+.sound-effect-header {
+    background-color: rgb(230, 48, 34); // Match block color
+}
+
 /* Mobile */
 @media only screen and (max-width: @largestMobileScreen) {
     #filelist {