From 5f35f20ebc23649abdc3190df8145798af55cafb Mon Sep 17 00:00:00 2001 From: thsparks Date: Fri, 7 Mar 2025 12:35:00 -0800 Subject: [PATCH 1/5] Lighten neutral background 3. This differentiates it from neutral background 1 and helps with making the homescreen "netflix drawer" (expanded card view) and toolbox more visible. --- theme/color-themes/arcade-dark.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/theme/color-themes/arcade-dark.json b/theme/color-themes/arcade-dark.json index 8f24bf8285..0dc8e44f8b 100644 --- a/theme/color-themes/arcade-dark.json +++ b/theme/color-themes/arcade-dark.json @@ -61,12 +61,12 @@ "pxt-neutral-foreground2-hover": "#ffffff", "pxt-neutral-stencil2": "#3b3a39", - "pxt-neutral-background3": "#1F1F1F", + "pxt-neutral-background3": "#2d2d2d", "pxt-neutral-foreground3": "#f3f2f1", - "pxt-neutral-background3-hover": "#2c2c2c", + "pxt-neutral-background3-hover": "#202020", "pxt-neutral-foreground3-hover": "#ffffff", - "pxt-neutral-stencil3": "#3b3a39", - "pxt-neutral-background3-alpha90": "#3b3a39", + "pxt-neutral-stencil3": "#070707", + "pxt-neutral-background3-alpha90": "#2d2d2de6", "pxt-neutral-base": "rgba(180, 180, 180, 1)", "pxt-neutral-alpha0": "rgba(180, 180, 180, 0)", From 121ff1f62f1a851d2e9ac135ac33849136b60986 Mon Sep 17 00:00:00 2001 From: thsparks Date: Fri, 7 Mar 2025 13:10:54 -0800 Subject: [PATCH 2/5] Improve contrast for the carousel arrows in dark theme. For whatever reason, the darker tinted version is much harder to see against images than the lighter equivalent. --- theme/color-themes/overrides/arcade-dark-overrides.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/theme/color-themes/overrides/arcade-dark-overrides.css b/theme/color-themes/overrides/arcade-dark-overrides.css index 60ac4b944c..0d6e0df945 100644 --- a/theme/color-themes/overrides/arcade-dark-overrides.css +++ b/theme/color-themes/overrides/arcade-dark-overrides.css @@ -43,3 +43,8 @@ #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; +} From b5728de3049a3c79e29c0ab5c2547eb24e27b527 Mon Sep 17 00:00:00 2001 From: thsparks Date: Fri, 7 Mar 2025 13:43:16 -0800 Subject: [PATCH 3/5] Improve contrast of language titles in dark theme --- theme/color-themes/overrides/arcade-dark-overrides.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/theme/color-themes/overrides/arcade-dark-overrides.css b/theme/color-themes/overrides/arcade-dark-overrides.css index 0d6e0df945..cedf5d0596 100644 --- a/theme/color-themes/overrides/arcade-dark-overrides.css +++ b/theme/color-themes/overrides/arcade-dark-overrides.css @@ -4,8 +4,8 @@ } #langmodal #availablelocales .langoption .header { - /* Better contrast */ - color: var(--pxt-primary-background); + /* Better contrast than default, which is purple */ + color: var(--pxt-colors-teal-background); } .pxtToolbox span.blocklyTreeLabel, From 5754786c7821904492ab38fdd96be722c44fcf8a Mon Sep 17 00:00:00 2001 From: thsparks Date: Fri, 7 Mar 2025 14:45:16 -0800 Subject: [PATCH 4/5] Add alpha80 --- 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 0dc8e44f8b..8eab8907ae 100644 --- a/theme/color-themes/arcade-dark.json +++ b/theme/color-themes/arcade-dark.json @@ -73,6 +73,7 @@ "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", diff --git a/theme/color-themes/arcade-legacy.json b/theme/color-themes/arcade-legacy.json index d2dfd8dd9e..dfd29abd5e 100644 --- a/theme/color-themes/arcade-legacy.json +++ b/theme/color-themes/arcade-legacy.json @@ -70,6 +70,7 @@ "pxt-neutral-alpha10": "rgba(0, 0, 0, 0.1)", "pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)", "pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)", + "pxt-neutral-alpha80": "rgba(0, 0, 0, 0.8)", "pxt-link": "#3977B4", "pxt-link-hover": "#204467", diff --git a/theme/color-themes/arcade-light.json b/theme/color-themes/arcade-light.json index 052b171324..5f7cb03f14 100644 --- a/theme/color-themes/arcade-light.json +++ b/theme/color-themes/arcade-light.json @@ -70,6 +70,7 @@ "pxt-neutral-alpha10": "rgba(0, 0, 0, 0.1)", "pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)", "pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)", + "pxt-neutral-alpha80": "rgba(0, 0, 0, 0.8)", "pxt-link": "#3977B4", "pxt-link-hover": "#204467", From c68fee509d06304d9c42e4631388c4633f1e4c6c Mon Sep 17 00:00:00 2001 From: thsparks Date: Fri, 7 Mar 2025 14:45:46 -0800 Subject: [PATCH 5/5] Adjust inverted button background in dark theme (good for thumbnail record buttons). --- .../color-themes/overrides/arcade-dark-overrides.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/theme/color-themes/overrides/arcade-dark-overrides.css b/theme/color-themes/overrides/arcade-dark-overrides.css index cedf5d0596..5433c32094 100644 --- a/theme/color-themes/overrides/arcade-dark-overrides.css +++ b/theme/color-themes/overrides/arcade-dark-overrides.css @@ -48,3 +48,14 @@ /* 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, +button.common-button.inverted { + background-color: var(--pxt-neutral-background2) !important; +} + +button.ui.button.inverted:hover, +button.common-button.inverted:hover { + background-color: var(--pxt-neutral-background2-hover) !important; +}