Fix dark icons in dark themes (partial, also need changes in pxt-arcade)

microsoft · Mar 6, 2025 · 494d9bc · 494d9bc
1 parent c7e686c
commit 494d9bc
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 10 deletions.
diff --git a/theme/color-themes/overrides/high-contrast-overrides.css b/theme/color-themes/overrides/high-contrast-overrides.css
@@ -9,3 +9,7 @@
     outline: 2px solid var(--pxt-colors-yellow-background) !important;
     z-index: 1;
 }
+
+.barcharticon {
+    filter: invert(1);
+}
diff --git a/theme/semantic-ui-overrides.less b/theme/semantic-ui-overrides.less
@@ -9,7 +9,7 @@ This file overrides the default semantic ui theming with our own theme variables
 // Mixin allows easy setting for background, foreground, hover, and inverted colors for a button
 .buttonVariant(@bg; @fg; @hoverBg; @hoverFg; @border) {
     &:not(.disabled) {
-        background: @bg;
+        background-color: @bg;
         color: @fg;
         border: 1px solid @border;
 

diff --git a/theme/tutorial-sidebar.less b/theme/tutorial-sidebar.less
@@ -579,7 +579,6 @@
         float: right;
         border: 2px solid var(--pxt-neutral-stencil1);
         margin-left: 1.5rem;
-        background: @white; // Cannot theme properly until we have a way to theme the immersive reader icon
     }
 }
 

diff --git a/theme/tutorial.less b/theme/tutorial.less
@@ -562,10 +562,9 @@ code.lang-filterblocks {
     background-image: @immersiveReaderIcon;
 }
 
-// TODO : Can't theme immersive reader without different versions of the reader icon
 #mainmenu .immersive-reader-button:focus,
 #mainmenu .immersive-reader-button:hover {
-    background-color: #00000059!important;
+    background-color: var(--pxt-neutral-alpha50);
     filter: brightness(0.8);
 }
 
@@ -575,7 +574,6 @@ code.lang-filterblocks {
     height: 2.8rem;
     background-repeat: no-repeat;
     background-size: 60%;
-    background-color: #f9fafb;
     background-position: center;
     box-shadow: none;
     transition: none;
@@ -591,7 +589,6 @@ code.lang-filterblocks {
     background-image: @immersiveReaderIcon;
     background-repeat: no-repeat;
     background-size: contain;
-    background-color: #f9fafb;
     background-position: center;
     background-size: 60%;
     filter: brightness(0.8);

diff --git a/webapp/src/components/tutorial/TutorialContainer.tsx b/webapp/src/components/tutorial/TutorialContainer.tsx
@@ -228,7 +228,7 @@ export function TutorialContainer(props: TutorialContainerProps) {
 
     if (showImmersiveReader) {
         modalActions.push({
-            className: "immersive-reader-button",
+            className: "immersive-reader-button neutral",
             onclick: async () => { await launchImmersiveReaderAsync(currentStepInfo.contentMd, tutorialOptions) },
             ariaLabel: lf("Launch Immersive Reader"),
             title: lf("Launch Immersive Reader")

diff --git a/webapp/src/immersivereader.tsx b/webapp/src/immersivereader.tsx
@@ -290,8 +290,8 @@ export class ImmersiveReaderButton extends data.Component<ImmersiveReaderProps,
     }
 
     render() {
-        return <div className='immersive-reader-button ui item' onClick={this.buttonClickHandler}
+        return <div className='immersive-reader-button ui item neutral' onClick={this.buttonClickHandler}
             aria-label={lf("Launch Immersive Reader")} role="button" onKeyDown={fireClickOnEnter} tabIndex={0}
             title={lf("Launch Immersive Reader")}/>
     }
-}
+}
diff --git a/webapp/src/tutorial.tsx b/webapp/src/tutorial.tsx
@@ -367,7 +367,7 @@ export class TutorialHint extends data.Component<ISettingsProps, TutorialHintSta
             let actions: sui.ModalButton[] = [];
             if (immersiveReaderEnabled) {
                 actions.push({
-                    className: "immersive-reader-button",
+                    className: "immersive-reader-button neutral",
                     onclick: async () => { await ImmersiveReader.launchImmersiveReaderAsync(fullText, options) },
                     ariaLabel: lf("Launch Immersive Reader"),
                     title: lf("Launch Immersive Reader")