feat(app): support web image backgrounds

This commit is contained in:
Brendan Allan 2026-07-20 16:19:59 +00:00
commit 364e2d9f03
24 changed files with 118 additions and 42 deletions

View file

@ -118,12 +118,12 @@ const createPlatform = (windowState: DesktopWindowState): Platform => {
document.documentElement.toggleAttribute("data-background-image", !!image)
if (image) {
document.documentElement.style.setProperty(
"--desktop-background-image",
"--app-background-image",
`url("oc://renderer/background-image?revision=${encodeURIComponent(image.revision)}")`,
)
return true
}
document.documentElement.style.removeProperty("--desktop-background-image")
document.documentElement.style.removeProperty("--app-background-image")
return false
}
window.api.onBackgroundImageChanged(applyBackgroundImage)

View file

@ -1,18 +0,0 @@
html[data-background-image] body {
background-image: linear-gradient(rgb(0 0 0 / 18%), rgb(0 0 0 / 18%)), var(--desktop-background-image);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
html[data-background-image] [data-background-surface="shell"] {
background-color: transparent !important;
}
html[data-background-image] [data-background-surface="content"] {
background-color: color-mix(in srgb, var(--background-base) 76%, transparent) !important;
}
html[data-background-image] [data-background-surface="panel"] {
background-color: color-mix(in srgb, var(--v2-background-bg-base) 70%, transparent) !important;
}