External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Polish Buzz sidebar theme (#1671)

Browse Source 
Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Co-authored-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
This commit is contained in:
klopez4212
2026-07-09 08:10:24 -07:00
committed by GitHub
co-authored by npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
parent e0f76b0e9c
commit cdba2a08e1
11 changed files with 364 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/shared/theme/ThemeProvider.tsx
+49 -2
View File
@@ -7,6 +7,9 @@ import {
useRef,
useState,
} from "react";
import { isTauri } from "@tauri-apps/api/core";
import { invokeTauri } from "@/shared/api/tauri";
import { isMacPlatform } from "@/shared/lib/platform";
import { createThemeVars, hexToHsl } from "./adaptive-theme";
import {
SYNTAX_THEMES,
@@ -26,6 +29,7 @@ const VIDEO_REVIEW_NEUTRAL_ACCENT = "0 0% 98%";
const VIDEO_REVIEW_CHIP_SURFACE = "#161616";
const VIDEO_REVIEW_TEXT_CONTRAST = 4.5;
const VIDEO_REVIEW_CHIP_BACKGROUND_ALPHAS = [0.15, 0.3] as const;
const BUZZ_VIBRANCY_MATERIAL = "sidebar";
export const ACCENT_COLORS = [
{ name: "Neutral", value: NEUTRAL_ACCENT },
@@ -206,13 +210,51 @@ function applyAccentColor(value: string) {
root.style.setProperty("--sidebar-active-foreground", fgHsl);
}
/** Toggle the Buzz sidebar-gradient marker on the document root. */
function isBuzzTheme(themeName: string): boolean {
return themeName === "buzz" || themeName === "buzz-dark";
}
/** Toggle the Buzz sidebar-gradient and translucency markers on the root. */
function applyBuzzSidebar(themeName: string) {
const root = document.documentElement;
if (themeName === "buzz" || themeName === "buzz-dark") {
if (isBuzzTheme(themeName)) {
root.setAttribute("data-buzz-sidebar", "");
// The translucent treatment (transparent root/body + semi-transparent
// sidebar gradient) relies on the native macOS `NSVisualEffectView`
// vibrancy layer painting behind the webview. On Windows/Linux
// `set_window_vibrancy` is a no-op, but the window is transparent
// globally (tauri.conf.json), so a transparent root would show raw
// desktop content through the UI. Gate the translucent marker and
// transparent root background to macOS; other platforms fall back to the
// opaque Buzz gradient (`data-buzz-sidebar` paints solid colors) with the
// normal `bg-background` body fill.
if (isMacPlatform()) {
root.setAttribute("data-buzz-translucent", "");
root.style.setProperty("background-color", "transparent");
root.style.setProperty("background-image", "none");
} else {
root.removeAttribute("data-buzz-translucent");
root.style.removeProperty("background-color");
root.style.removeProperty("background-image");
}
} else {
root.removeAttribute("data-buzz-sidebar");
root.removeAttribute("data-buzz-translucent");
root.style.removeProperty("background-color");
root.style.removeProperty("background-image");
}
}
async function applyBuzzVibrancy(themeName: string) {
if (!isTauri()) return;
try {
await invokeTauri<void>("set_window_vibrancy", {
enabled: isBuzzTheme(themeName),
material: BUZZ_VIBRANCY_MATERIAL,
});
} catch (error) {
console.warn("set_window_vibrancy failed", error);
}
}
@@ -328,6 +370,11 @@ export function ThemeProvider({
});
}, [effectiveTheme]);
useEffect(() => {
if (!isValidThemeName(effectiveTheme)) return;
void applyBuzzVibrancy(effectiveTheme);
}, [effectiveTheme]);
// Listen for system color scheme changes when followSystem is enabled
useEffect(() => {
if (!followSystem) return;