From 2a7fc8edb602fc3d1cf14b1c9faa3a84e04b027e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 6 Sep 2025 21:13:09 +0300 Subject: [PATCH] style/background effects: extract color overrides as theme variables --- .../src/stylesheets/theme-next-dark.css | 4 ++++ .../src/stylesheets/theme-next-light.css | 4 ++++ .../src/stylesheets/theme-next/shell.css | 24 +++++++------------ 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 4edfd6e38..9b1bafaa8 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -13,6 +13,7 @@ --theme-style: dark; --native-titlebar-background: #00000000; + --window-background-color-bgfx: transparent; /* When background effects enabled */ --main-background-color: #272727; --main-text-color: #ccc; @@ -147,6 +148,7 @@ --launcher-pane-vert-button-hover-background: #ffffff1c; --launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); --launcher-pane-vert-button-focus-outline-color: var(--input-focus-outline-color); + --launcher-pane-vert-background-color-bgfx: #00000026; /* When background effects enabled */ --launcher-pane-horiz-border-color: rgb(22, 22, 22); --launcher-pane-horiz-background-color: #282828; @@ -155,6 +157,8 @@ --launcher-pane-horiz-button-hover-background: #ffffff1c; --launcher-pane-horiz-button-hover-shadow: unset; --launcher-pane-horiz-button-focus-outline-color: var(--input-focus-outline-color); + --launcher-pane-horiz-background-color-bgfx: #ffffff17; /* When background effects enabled */ + --launcher-pane-horiz-border-color-bgfx: #00000080; /* When background effects enabled */ --protected-session-active-icon-color: #8edd8e; --sync-status-error-pulse-color: #f47871; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 331de6d94..f58ffca68 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -13,6 +13,7 @@ --theme-style: light; --native-titlebar-background: #ffffff00; + --window-background-color-bgfx: transparent; /* When background effects enabled */ --main-background-color: white; --main-text-color: black; @@ -141,6 +142,7 @@ --launcher-pane-vert-button-hover-background: white; --launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.075); --launcher-pane-vert-button-focus-outline-color: var(--input-focus-outline-color); + --launcher-pane-vert-background-color-bgfx: #0000000d; /* When background effects enabled */ --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.1); --launcher-pane-horiz-background-color: #fafafa; @@ -148,6 +150,8 @@ --launcher-pane-horiz-button-hover-background: var(--icon-button-hover-background); --launcher-pane-horiz-button-hover-shadow: unset; --launcher-pane-horiz-button-focus-outline-color: var(--input-focus-outline-color); + --launcher-pane-horiz-background-color-bgfx: #ffffffb3; /* When background effects enabled */ + --launcher-pane-horiz-border-color-bgfx: #00000026; /* When background effects enabled */ --protected-session-active-icon-color: #16b516; --sync-status-error-pulse-color: #ff5528; diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index c709e457a..54a74ca77 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -36,31 +36,23 @@ body.mobile { /* #region Mica */ body.background-effects.platform-win32 { - --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.15); - --launcher-pane-horiz-background-color: rgba(255, 255, 255, 0.7); - --launcher-pane-vert-background-color: rgba(255, 255, 255, 0.055); - --tab-background-color: transparent; - --new-tab-button-background: transparent; - --active-tab-background-color: var(--launcher-pane-horiz-background-color); --background-material: tabbed; -} - -@media (prefers-color-scheme: dark) { - body.background-effects.platform-win32 { - --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.5); - --launcher-pane-horiz-background-color: rgba(255, 255, 255, 0.09); - } + --launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx); + --launcher-pane-horiz-background-color: var(--launcher-pane-horiz-background-color-bgfx); + --launcher-pane-vert-background-color: var(--launcher-pane-vert-background-color-bgfx); + --tab-background-color: var(--window-background-color-bgfx); + --new-tab-button-background: var(--window-background-color-bgfx); + --active-tab-background-color: var(--launcher-pane-horiz-background-color); } body.background-effects.platform-win32.layout-vertical { - --left-pane-background-color: transparent; - --left-pane-item-hover-background: rgba(127, 127, 127, 0.05); + --left-pane-background-color: var(--window-background-color-bgfx); --background-material: mica; } body.background-effects.platform-win32, body.background-effects.platform-win32 #root-widget { - background: transparent !important; + background: var(--window-background-color-bgfx) !important; } body.background-effects.platform-win32.layout-horizontal #horizontal-main-container,