mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-12-23 10:11:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

zen: usage graph respect light/dark mode

Browse source
This commit is contained in:
Frank 2025-12-03 14:24:37 -05:00
parent 3181c68cbb
commit e5b13b767e
1 changed files with 32 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

40
packages/console/app/src/routes/workspace/[id]/graph-section.tsx
View file

@ -158,9 +158,24 @@ export function GraphSection() {
model: null as string | null,
modelDropdownOpen: false,
keyDropdownOpen: false,
colorScheme: "light" as "light" | "dark",
})
const initialData = createAsync(() => queryCosts(params.id!, store.year, store.month))
createEffect(() => {
if (typeof window === "undefined") return
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
setStore({ colorScheme: mediaQuery.matches ? "dark" : "light" })
const handleColorSchemeChange = (e: MediaQueryListEvent) => {
setStore({ colorScheme: e.matches ? "dark" : "light" })
}
mediaQuery.addEventListener("change", handleColorSchemeChange)
onCleanup(() => mediaQuery.removeEventListener("change", handleColorSchemeChange))
})
const onPreviousMonth = async () => {
const month = store.month === 0 ? 11 : store.month - 1
const year = store.month === 0 ? store.year - 1 : store.year
@ -210,6 +225,15 @@ export function GraphSection() {
const dates = getDates()
if (!data?.usage?.length) return null
store.colorScheme
const styles = getComputedStyle(document.documentElement)
const colorTextMuted = styles.getPropertyValue("--color-text-muted").trim()
const colorBorderMuted = styles.getPropertyValue("--color-border-muted").trim()
const colorBgElevated = styles.getPropertyValue("--color-bg-elevated").trim()
const colorText = styles.getPropertyValue("--color-text").trim()
const colorTextSecondary = styles.getPropertyValue("--color-text-secondary").trim()
const colorBorder = styles.getPropertyValue("--color-border").trim()
const dailyData = new Map<string, Map<string, number>>()
for (const dateKey of dates) dailyData.set(dateKey, new Map())
@ -252,7 +276,7 @@ export function GraphSection() {
ticks: {
maxRotation: 0,
autoSkipPadding: 20,
color: "rgba(255, 255, 255, 0.5)",
color: colorTextMuted,
font: {
family: "monospace",
size: 11,
@ -263,10 +287,10 @@ export function GraphSection() {
stacked: true,
beginAtZero: true,
grid: {
color: "rgba(255, 255, 255, 0.1)",
color: colorBorderMuted,
},
ticks: {
color: "rgba(255, 255, 255, 0.5)",
color: colorTextMuted,
font: {
family: "monospace",
size: 11,
@ -282,10 +306,10 @@ export function GraphSection() {
tooltip: {
mode: "index",
intersect: false,
backgroundColor: "rgba(0, 0, 0, 0.9)",
titleColor: "rgba(255, 255, 255, 0.9)",
bodyColor: "rgba(255, 255, 255, 0.8)",
borderColor: "rgba(255, 255, 255, 0.1)",
backgroundColor: colorBgElevated,
titleColor: colorText,
bodyColor: colorTextSecondary,
borderColor: colorBorder,
borderWidth: 1,
padding: 12,
displayColors: true,
@ -301,7 +325,7 @@ export function GraphSection() {
display: true,
position: "bottom",
labels: {
color: "rgba(255, 255, 255, 0.7)",
color: colorTextSecondary,
font: {
size: 12,
},