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

feat(desktop): add neutral accent color (#563)

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
thomaspblock
2026-05-13 08:34:56 -07:00
committed by GitHub
co-authored by Cursor
parent 5e6083ef9e
commit 5db47a84b1
2 changed files with 50 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/features/settings/ui/SettingsPanels.tsx
+35 -21
View File
@@ -22,7 +22,11 @@ import type {
} from "@/features/notifications/hooks";
import { RelayMembersSettingsCard } from "@/features/relay-members/ui/RelayMembersSettingsCard";
import { cn } from "@/shared/lib/cn";
import { ACCENT_COLORS, useTheme } from "@/shared/theme/ThemeProvider";
import {
ACCENT_COLORS,
NEUTRAL_ACCENT,
useTheme,
} from "@/shared/theme/ThemeProvider";
import { SYNTAX_THEMES, isLightTheme } from "@/shared/theme/theme-loader";
import { ChannelTemplatesSettingsCard } from "./ChannelTemplatesSettingsCard";
import { DoctorSettingsPanel } from "./DoctorSettingsPanel";
@@ -128,7 +132,8 @@ function formatThemeLabel(name: string): string {
}
function ThemeSettingsCard() {
const { setTheme, themeName, accentColor, setAccentColor } = useTheme();
const { setTheme, themeName, isDark, accentColor, setAccentColor } =
useTheme();
const [search, setSearch] = useState("");
const didScrollRef = useRef(false);
const activeRef = (node: HTMLButtonElement | null) => {
@@ -209,25 +214,34 @@ function ThemeSettingsCard() {
<div className="mt-4">
<h3 className="mb-2 text-sm font-medium">Accent Color</h3>
<div className="flex gap-2">
{ACCENT_COLORS.map((color) => (
<button
className={cn(
"flex h-7 w-7 items-center justify-center rounded-full transition-transform hover:scale-110",
accentColor === color.value &&
"ring-2 ring-ring ring-offset-2 ring-offset-background",
)}
data-testid={`accent-color-${color.name.toLowerCase()}`}
key={color.value}
onClick={() => setAccentColor(color.value)}
style={{ backgroundColor: color.value }}
title={color.name}
type="button"
>
{accentColor === color.value && (
<Check className="h-3.5 w-3.5 text-white" />
)}
</button>
))}
{ACCENT_COLORS.map((color) => {
const isNeutral = color.value === NEUTRAL_ACCENT;
const swatchColor = isNeutral
? "hsl(var(--foreground))"
: color.value;
const checkClassName =
isNeutral && isDark ? "text-black" : "text-white";
return (
<button
className={cn(
"flex h-7 w-7 items-center justify-center rounded-full border border-border/50 transition-transform hover:scale-110",
accentColor === color.value &&
"ring-2 ring-ring ring-offset-2 ring-offset-background",
)}
data-testid={`accent-color-${color.name.toLowerCase()}`}
key={color.value}
onClick={() => setAccentColor(color.value)}
style={{ backgroundColor: swatchColor }}
title={color.name}
type="button"
>
{accentColor === color.value && (
<Check className={cn("h-3.5 w-3.5", checkClassName)} />
)}
</button>
);
})}
</div>
</div>
</section>
desktop/src/shared/theme/ThemeProvider.tsx
+15 -1
View File
@@ -18,8 +18,10 @@ import {
const STORAGE_KEY = "sprout-theme";
const CACHE_KEY = "sprout-theme-cache";
const ACCENT_KEY = "sprout-accent-color";
export const NEUTRAL_ACCENT = "neutral";
export const ACCENT_COLORS = [
{ name: "Neutral", value: NEUTRAL_ACCENT },
{ name: "Blue", value: "#3b82f6" },
{ name: "Cyan", value: "#06b6d4" },
{ name: "Green", value: "#22c55e" },
@@ -75,8 +77,20 @@ function getContrastColor(hex: string): string {
return lum > 0.5 ? "#000000" : "#ffffff";
}
function applyAccentColor(hex: string) {
function applyAccentColor(value: string) {
const root = document.documentElement;
if (value === NEUTRAL_ACCENT) {
const styles = window.getComputedStyle(root);
const foreground = styles.getPropertyValue("--foreground").trim();
const background = styles.getPropertyValue("--background").trim();
root.style.setProperty("--primary", foreground);
root.style.setProperty("--primary-foreground", background);
root.style.setProperty("--sidebar-primary", foreground);
root.style.setProperty("--sidebar-primary-foreground", background);
return;
}
const hex = value;
const accentHsl = hexToHsl(hex);
const fgHsl = hexToHsl(getContrastColor(hex));
root.style.setProperty("--primary", accentHsl);