Dak theme updates

theme/color-themes/arcade-dark.json

@@ -8,93 +8,93 @@
     "colors": {
         "pxt-header-background": "#181818",
         "pxt-header-foreground": "#ffffff",
-        "pxt-header-background-hover": "#4b4b4b",
+        "pxt-header-background-hover": "#252525",
         "pxt-header-foreground-hover": "#ffffff",
         "pxt-header-stencil": "#323232",
 
-        "pxt-primary-background": "#0078d4",
+        "pxt-primary-background": "#0078D4",
         "pxt-primary-foreground": "#ffffff",
-        "pxt-primary-background-hover": "#005a9e",
+        "pxt-primary-background-hover": "#026EC1",
         "pxt-primary-foreground-hover": "#ffffff",
-        "pxt-primary-accent": "#004578",
+        "pxt-primary-accent": "#005ba1",
 
-        "pxt-secondary-background": "#5c2d91",
+        "pxt-secondary-background": "#63276d",
         "pxt-secondary-foreground": "#f3f2f1",
-        "pxt-secondary-background-hover": "#4b2578",
+        "pxt-secondary-background-hover": "#742e80",
         "pxt-secondary-foreground-hover": "#f3f2f1",
-        "pxt-secondary-accent": "#7539b8",
+        "pxt-secondary-accent": "#63276d",
 
         "pxt-tertiary-background": "#0078d4",
         "pxt-tertiary-foreground": "#ffffff",
-        "pxt-tertiary-background-hover": "#005a9e",
+        "pxt-tertiary-background-hover": "#026EC1",
         "pxt-tertiary-foreground-hover": "#ffffff",
         "pxt-tertiary-accent": "#0894ff",
 
-        "pxt-target-background1": "#1b1a19",
-        "pxt-target-foreground1": "#f3f2f1",
-        "pxt-target-background1-hover": "#292828",
+        "pxt-target-background1": "#1F1F1F",
+        "pxt-target-foreground1": "#f3f2f1", 
+        "pxt-target-background1-hover": "#2c2c2c",
         "pxt-target-foreground1-hover": "#ffffff",
         "pxt-target-stencil1": "#3b3a39",
 
-        "pxt-target-background2": "#1b1a19",
-        "pxt-target-foreground2": "#f3f2f1",
-        "pxt-target-background2-hover": "#292828",
+        "pxt-target-background2": "#181818",
+        "pxt-target-foreground2": "#ffffff",
+        "pxt-target-background2-hover": "#252525",
         "pxt-target-foreground2-hover": "#ffffff",
-        "pxt-target-stencil2": "#3b3a39",
+        "pxt-target-stencil2": "#323232",
 
-        "pxt-target-background3": "#1b1a19",
-        "pxt-target-foreground3": "#f3f2f1",
-        "pxt-target-background3-hover": "#292828",
+        "pxt-target-background3": "#181818",
+        "pxt-target-foreground3": "#ffffff",
+        "pxt-target-background3-hover": "#252525",
         "pxt-target-foreground3-hover": "#ffffff",
-        "pxt-target-stencil3": "#3b3a39",
+        "pxt-target-stencil3": "#323232",
 
-        "pxt-neutral-background1": "#1b1a19",
+        "pxt-neutral-background1": "#1F1F1F",
         "pxt-neutral-foreground1": "#f3f2f1",
-        "pxt-neutral-background1-hover": "#292828",
-        "pxt-neutral-foreground1-hover": "#f3f2f1",
+        "pxt-neutral-background1-hover": "#2c2c2c",
+        "pxt-neutral-foreground1-hover": "#ffffff",
         "pxt-neutral-stencil1": "#3b3a39",
 
-        "pxt-neutral-background2": "#323130",
-        "pxt-neutral-foreground2": "#f3f2f1",
-        "pxt-neutral-background2-hover": "#292828",
-        "pxt-neutral-foreground2-hover": "#f3f2f1",
+        "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": "#1b1a19",
+        "pxt-neutral-background3": "#1F1F1F",
         "pxt-neutral-foreground3": "#f3f2f1",
-        "pxt-neutral-background3-hover": "#292828",
-        "pxt-neutral-foreground3-hover": "#f3f2f1",
+        "pxt-neutral-background3-hover": "#2c2c2c",
+        "pxt-neutral-foreground3-hover": "#ffffff",
         "pxt-neutral-stencil3": "#3b3a39",
-        "pxt-neutral-background3-alpha90": "#1b1a19E5",
+        "pxt-neutral-background3-alpha90": "#3b3a39",
 
-        "pxt-neutral-alpha0": "rgba(255, 255, 255, 0)",
-        "pxt-neutral-alpha10": "rgba(255, 255, 255, 0.1)",
-        "pxt-neutral-alpha20": "rgba(255, 255, 255, 0.2)",
-        "pxt-neutral-alpha50": "rgba(255, 255, 255, 0.5)",
+        "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-link": "#3a96dd",
-        "pxt-link-hover": "#1a73e8",
-        "pxt-focus-border": "#ffffff",
+        "pxt-link": "#479ef5",
+        "pxt-link-hover": "#62abf5",
+        "pxt-focus-border": "#5caae5",
 
-        "pxt-colors-purple-background": "#8e44ad",
-        "pxt-colors-purple-foreground": "#ffffff",
-        "pxt-colors-purple-hover": "#732d91",
-        "pxt-colors-purple-alpha10": "#8e44ad19",
+        "pxt-colors-purple-background": "#63276d",
+        "pxt-colors-purple-foreground": "#f3f2f1",
+        "pxt-colors-purple-hover": "#742e80",
+        "pxt-colors-purple-alpha10": "#63276d19",
 
-        "pxt-colors-orange-background": "#e67e22",
+        "pxt-colors-orange-background": "#7a2101",
         "pxt-colors-orange-foreground": "#ffffff",
-        "pxt-colors-orange-hover": "#d35400",
-        "pxt-colors-orange-alpha10": "#e67e2219",
+        "pxt-colors-orange-hover": "#932801",
+        "pxt-colors-orange-alpha10": "#7a210119",
 
-        "pxt-colors-brown-background": "#8e562e",
+        "pxt-colors-brown-background": "#50301a",
         "pxt-colors-brown-foreground": "#ffffff",
-        "pxt-colors-brown-hover": "#7a4c2a",
-        "pxt-colors-brown-alpha10": "#8e562e19",
+        "pxt-colors-brown-hover": "#633c20",
+        "pxt-colors-brown-alpha10": "#50301a19",
 
-        "pxt-colors-blue-background": "#3498db",
+        "pxt-colors-blue-background": "#0078D4",
         "pxt-colors-blue-foreground": "#ffffff",
-        "pxt-colors-blue-hover": "#2980b9",
-        "pxt-colors-blue-alpha10": "#3498db19",
+        "pxt-colors-blue-hover": "#026EC1",
+        "pxt-colors-blue-alpha10": "#0078D419",
 
         "pxt-colors-green-background": "#27ae60",
         "pxt-colors-green-foreground": "#ffffff",
@@ -106,14 +106,14 @@
         "pxt-colors-red-hover": "#c0392b",
         "pxt-colors-red-alpha10": "#e74c3c19",
 
-        "pxt-colors-teal-background": "#1abc9c",
+        "pxt-colors-teal-background": "#02494c",
         "pxt-colors-teal-foreground": "#ffffff",
-        "pxt-colors-teal-hover": "#16a085",
-        "pxt-colors-teal-alpha10": "#1abc9c19",
+        "pxt-colors-teal-hover": "#036165",
+        "pxt-colors-teal-alpha10": "#02494c19",
 
-        "pxt-colors-yellow-background": "#f1c40f",
+        "pxt-colors-yellow-background": "#fde300",
         "pxt-colors-yellow-foreground": "#000000",
-        "pxt-colors-yellow-hover": "#f39c12",
-        "pxt-colors-yellow-alpha10": "#f1c40f19"
+        "pxt-colors-yellow-hover": "#e4cc00",
+        "pxt-colors-yellow-alpha10": "#fde30019"
     }
 }

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

@@ -8,7 +8,6 @@
     color: var(--pxt-primary-background);
 }
 
-
 .pxtToolbox span.blocklyTreeLabel,
 .pxtToolbox .blocklyTreeSelected span.blocklyTreeLabel,
 .pxtToolbox .blocklyTreeSelected .blocklyTreeIcon {
@@ -20,3 +19,13 @@
     /* Better contrast in toolbox, 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;
+}