lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-08-25 15:37:12 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

fix(gui): color of the UI on dark mode (e.g. windows control, active sidebar) (#1161)

Browse Source 
* update theme service to improve color handling and SVG icon styling

* enhance sidebar item colors for better visibility

* Fix the whitespace
This commit is contained in:
Andy Cordero
2025-03-09 16:30:16 -04:00
committed by GitHub
parent 7ed779bbf3
commit 33c304879a
2 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/css/style.css
+6 -3
View File
@@ -89,6 +89,8 @@ pre {
--primary-lightness: 93.33%;
--primary-alpha: 0.8;
--primary-color: #373e44;
--primary-color-icon: invert(0);
--primary-color-sidebar-item: #fefeff;
--window-head-hue: var(--primary-hue);
--window-head-saturation: var(--primary-saturation);
@@ -1235,7 +1237,7 @@ span.header-sort-icon img {
}
.window-sidebar-item:hover, .window-sidebar-item.has-open-contextmenu {
background-color: rgba(243, 243, 243, 0.8);
background-color: #5a5d6155;
cursor: pointer;
}
@@ -1244,7 +1246,7 @@ span.header-sort-icon img {
margin-top: 2px;
padding: 4px;
border-radius: 3px;
color: #444444;
color: var(--primary-color);
font-size: 13px;
cursor: pointer;
transition: 0.15s background-color;
@@ -1256,7 +1258,7 @@ span.header-sort-icon img {
}
.window-sidebar-item-active, .window-sidebar-item-drag-active, .window-sidebar-item-active:hover {
background-color: #fefeff;
background-color: var(--primary-color-sidebar-item);
}
.window-sidebar-item-placeholder {
@@ -1404,6 +1406,7 @@ span.header-sort-icon img {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
filter: var(--primary-color-icon);
}
.window-action-btn:hover>img {
src/gui/src/services/ThemeService.js
+2
View File
@@ -121,6 +121,8 @@ export class ThemeService extends Service {
this.root.style.setProperty('--primary-lightness', s.lig + '%');
this.root.style.setProperty('--primary-alpha', s.alpha);
this.root.style.setProperty('--primary-color', s.light_text ? 'white' : '#373e44');
this.root.style.setProperty('--primary-color-icon', s.light_text ? 'invert(1)' : 'invert(0)');
this.root.style.setProperty('--primary-color-sidebar-item', s.light_text ? '#5a5d61aa' : '#fefeff');
// TODO: Should we debounce this to reduce traffic?
this.#broadcastService.sendBroadcast('themeChanged', {