From 135362afcaac2a4e2beee26788e7b209a9bc39c4 Mon Sep 17 00:00:00 2001 From: thsparks Date: Mon, 3 Mar 2025 15:28:48 -0800 Subject: [PATCH 1/4] Add neutral base colors. This color was helpful while doing the theme builder, and I think it could be handy in scenarios with neutral fades, etc. --- theme/color-themes/arcade-dark.json | 1 + theme/color-themes/arcade-legacy.json | 1 + theme/color-themes/arcade-light.json | 1 + 3 files changed, 3 insertions(+) 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)", From 3b1ddbff02aa3fb6baaf54d05e7465e9717d0968 Mon Sep 17 00:00:00 2001 From: thsparks Date: Thu, 6 Mar 2025 11:07:44 -0800 Subject: [PATCH 2/4] Set default theme to legacy --- pxtarget.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From 40e17a2e517b10d8c4b42885d77d12352bb6709e Mon Sep 17 00:00:00 2001 From: thsparks Date: Thu, 6 Mar 2025 11:08:20 -0800 Subject: [PATCH 3/4] Change blue color to improve contrast in notification before theme loads (can't really load the user's theme here since it's an on sign-in notification and we need sign-in to get the theme). --- theme/site/globals/site.variables | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; From 6173ce43c080f593e67b983d59b0cebc90a58566 Mon Sep 17 00:00:00 2001 From: thsparks Date: Thu, 6 Mar 2025 11:08:32 -0800 Subject: [PATCH 4/4] Fix dark icons in dark theme --- .../overrides/arcade-dark-overrides.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) 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; +}