From 281a13432c5f69a2b90feaae1cbc61476f557e46 Mon Sep 17 00:00:00 2001
From: Thomas Sparks <69657545+thsparks@users.noreply.github.com>
Date: Thu, 6 Mar 2025 16:28:53 -0800
Subject: [PATCH] Arcade Theme Fixes (#6756)

The most notable change here is setting the default arcade theme to legacy instead of light. It also adds the neutral base color to all themes and includes some fixes to dark theme.

Somewhat counter-intuitively, I've updated the Semantic UI blue color as well. This affects our notification popups. Normally I'd switch these to use the theme's colors, but one of the notifications is "Sign-in successful", and signing in also triggers the theme to change based on the user's preferences. The result is that the notification switches colors halfway through, which looks odd. So for now, I decided to just let this fallback on the non-themed color instead, but it required a color update to be easily readable.
---
 pxtarget.json                                       |  2 +-
 theme/color-themes/arcade-dark.json                 |  1 +
 theme/color-themes/arcade-legacy.json               |  1 +
 theme/color-themes/arcade-light.json                |  1 +
 .../overrides/arcade-dark-overrides.css             | 13 +++++++++++++
 theme/site/globals/site.variables                   |  2 +-
 6 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/pxtarget.json b/pxtarget.json
index afc36a4acd6..b322331af0a 100644
--- a/pxtarget.json
+++ b/pxtarget.json
@@ -621,7 +621,7 @@
             "arrays": "#FF8F08",
             "functions": "#1446A0"
         },
-        "defaultColorTheme": "arcade-light",
+        "defaultColorTheme": "arcade-legacy",
         "highContrastColorTheme": "pxt-high-contrast",
         "simAnimationEnter": "fly right in",
         "simAnimationExit": "fly right out",
diff --git a/theme/color-themes/arcade-dark.json b/theme/color-themes/arcade-dark.json
index 28bb609881d..8f24bf8285b 100644
--- a/theme/color-themes/arcade-dark.json
+++ b/theme/color-themes/arcade-dark.json
@@ -68,6 +68,7 @@
         "pxt-neutral-stencil3": "#3b3a39",
         "pxt-neutral-background3-alpha90": "#3b3a39",
 
+        "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)",
diff --git a/theme/color-themes/arcade-legacy.json b/theme/color-themes/arcade-legacy.json
index 7a6c4c7620d..d2dfd8dd9eb 100644
--- a/theme/color-themes/arcade-legacy.json
+++ b/theme/color-themes/arcade-legacy.json
@@ -65,6 +65,7 @@
         "pxt-neutral-stencil3": "#FFFFFF",
         "pxt-neutral-background3-alpha90": "#4E5758E5",
 
+        "pxt-neutral-base": "rgba(0, 0, 0, 1)",
         "pxt-neutral-alpha0": "rgba(0, 0, 0, 0)",
         "pxt-neutral-alpha10": "rgba(0, 0, 0, 0.1)",
         "pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)",
diff --git a/theme/color-themes/arcade-light.json b/theme/color-themes/arcade-light.json
index bce2a970006..052b171324d 100644
--- a/theme/color-themes/arcade-light.json
+++ b/theme/color-themes/arcade-light.json
@@ -65,6 +65,7 @@
         "pxt-neutral-stencil3": "#FFFFFF",
         "pxt-neutral-background3-alpha90": "#4E5758E5",
 
+        "pxt-neutral-base": "rgba(0, 0, 0, 1)",
         "pxt-neutral-alpha0": "rgba(0, 0, 0, 0)",
         "pxt-neutral-alpha10": "rgba(0, 0, 0, 0.1)",
         "pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)",
diff --git a/theme/color-themes/overrides/arcade-dark-overrides.css b/theme/color-themes/overrides/arcade-dark-overrides.css
index 7973e7672f6..60ac4b944c5 100644
--- a/theme/color-themes/overrides/arcade-dark-overrides.css
+++ b/theme/color-themes/overrides/arcade-dark-overrides.css
@@ -30,3 +30,16 @@
     /* 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;
 }
+
+/* 
+ * Inverted image colors
+ */
+.barcharticon {
+    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;
+}
diff --git a/theme/site/globals/site.variables b/theme/site/globals/site.variables
index 8b73b24e055..ddf03a934a1 100644
--- a/theme/site/globals/site.variables
+++ b/theme/site/globals/site.variables
@@ -30,7 +30,7 @@
 
 /* 32 colors */
 @purple           : #5D4FBA;
-@blue             : #B1E3DA;
+@blue             : #116e79;
 
 @lightGrey        : #F8FAFC;