Fix file explorer in light themes

microsoft · Mar 6, 2025 · 665e722 · 665e722
1 parent ab7b6b6
commit 665e722
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/theme/common.less b/theme/common.less
@@ -258,6 +258,19 @@ pre {
     width: 100% !important;
     margin: 0;
     margin-top: 1rem;
+
+    background: var(--pxt-primary-background);
+    color: var(--pxt-primary-foreground);
+
+    .item, .link.item {
+        color: var(--pxt-primary-foreground) !important; // override !important in semantic ui
+        border-radius: inherit;
+
+        &:hover, &:focus {
+            background: var(--pxt-primary-background-hover) !important;
+            color: var(--pxt-primary-foreground-hover) !important;
+        }
+    }
 }
 
 .filemenu .nested.item {

diff --git a/webapp/src/filelist.tsx b/webapp/src/filelist.tsx
@@ -400,7 +400,7 @@ export class FileList extends data.Component<ISettingsProps, FileListState> {
             <div role="treeitem" aria-selected={showFiles} aria-expanded={showFiles} aria-label={lf("File explorer toolbar")} key="projectheader" className="link item" onClick={this.toggleVisibility} tabIndex={0} onKeyDown={fireClickOnEnter}>
                 {lf("Explorer")}
                 <sui.Icon icon={`chevron ${showFiles ? "up" : "down"} icon`} />
-                {plus ? <sui.Button className="primary label" icon="plus" title={lf("Add custom blocks?")} onClick={this.handleCustomBlocksClick} onKeyDown={this.handleButtonKeydown} /> : undefined}
+                {plus ? <sui.Button className="neutral label" icon="plus" title={lf("Add custom blocks?")} onClick={this.handleCustomBlocksClick} onKeyDown={this.handleButtonKeydown} /> : undefined}
                 {!meta.numErrors ? null : <span className='ui label red'>{meta.numErrors}</span>}
             </div>
             {showFiles ? pxt.Util.concat(pkg.allEditorPkgs().map(p => this.filesWithHeader(p))) : undefined}
@@ -524,14 +524,14 @@ class FileTreeItem extends sui.StatelessUIElement<FileTreeItemProps> {
             onKeyDown={fireClickOnEnter}
             className={className}>
             {this.props.children}
-            {hasDelete && <sui.Button className="primary label" icon="trash"
+            {hasDelete && <sui.Button className="neutral label" icon="trash"
                 title={lf("Delete file {0}", file.name)}
                 onClick={this.handleRemove}
                 onKeyDown={this.handleButtonKeydown} />}
             {meta && meta.numErrors ? <span className='ui label red button' role="button" title={lf("Go to error")}>{meta.numErrors}</span> : undefined}
-            {shareUrl && <sui.Button className="button primary label" icon="share alternate" title={lf("Share")} onClick={this.handleShare} onKeyDown={fireClickOnEnter} />}
-            {previewUrl && <sui.Button className="button primary label" icon="flask" title={lf("Preview")} onClick={this.handlePreview} onKeyDown={fireClickOnEnter} />}
-            {!!addLocalizedFile && <sui.Button className="primary label" icon="xicon globe"
+            {shareUrl && <sui.Button className="button neutral label" icon="share alternate" title={lf("Share")} onClick={this.handleShare} onKeyDown={fireClickOnEnter} />}
+            {previewUrl && <sui.Button className="button neutral label" icon="flask" title={lf("Preview")} onClick={this.handlePreview} onKeyDown={fireClickOnEnter} />}
+            {!!addLocalizedFile && <sui.Button className="neutral label" icon="xicon globe"
                 title={lf("Add localized file")}
                 onClick={this.handleAddLocale}
                 onKeyDown={this.handleButtonKeydown} />}
@@ -587,12 +587,12 @@ class PackgeTreeItem extends sui.StatelessUIElement<PackageTreeItemProps> {
             aria-label={lf("{0}, {1}", p.getPkgId(), isActive ? lf("expanded") : lf("collapsed"))}
             onClick={this.handleClick} tabIndex={0} onKeyDown={fireClickOnEnter} {...rest}>
             <sui.Icon icon={`chevron ${isActive ? "up" : "down"} icon`} />
-            {hasRefresh ? <sui.Button className="primary label" icon="refresh" title={lf("Refresh extension {0}", p.getPkgId())}
+            {hasRefresh ? <sui.Button className="neutral label" icon="refresh" title={lf("Refresh extension {0}", p.getPkgId())}
                 onClick={this.handleRefresh} onKeyDown={this.handleButtonKeydown} text={version || ''}></sui.Button>
                 : version ? <span className="label" style={{background: 'transparent'}}>{version}</span> : undefined}
-            {hasDelete ? <sui.Button className="primary label" icon="trash" title={lf("Delete extension {0}", p.getPkgId())}
+            {hasDelete ? <sui.Button className="neutral label" icon="trash" title={lf("Delete extension {0}", p.getPkgId())}
                 onClick={this.handleRemove} onKeyDown={this.handleButtonKeydown} /> : undefined}
             {this.props.children}
         </div>
     }
-}
+}