diff --git a/theme/color-themes/arcade-dark.json b/theme/color-themes/arcade-dark.json index 8f24bf8285..8eab8907ae 100644 --- a/theme/color-themes/arcade-dark.json +++ b/theme/color-themes/arcade-dark.json @@ -61,18 +61,19 @@ "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)", "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", diff --git a/theme/color-themes/overrides/arcade-dark-overrides.css b/theme/color-themes/overrides/arcade-dark-overrides.css index 60ac4b944c..5433c32094 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, @@ -43,3 +43,19 @@ #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, +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; +}