diff --git a/frontend/public/backdrops/light/forest.svg b/frontend/public/backdrops/light/forest.svg new file mode 100644 index 0000000..9ecade1 --- /dev/null +++ b/frontend/public/backdrops/light/forest.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/backdrops/light/matrix.svg b/frontend/public/backdrops/light/matrix.svg new file mode 100644 index 0000000..b679c1b --- /dev/null +++ b/frontend/public/backdrops/light/matrix.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/backdrops/light/midnight.svg b/frontend/public/backdrops/light/midnight.svg new file mode 100644 index 0000000..37dd1b7 --- /dev/null +++ b/frontend/public/backdrops/light/midnight.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/backdrops/light/slate.svg b/frontend/public/backdrops/light/slate.svg new file mode 100644 index 0000000..83354ab --- /dev/null +++ b/frontend/public/backdrops/light/slate.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/backdrops/light/starship.svg b/frontend/public/backdrops/light/starship.svg new file mode 100644 index 0000000..9ba4aeb --- /dev/null +++ b/frontend/public/backdrops/light/starship.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/backdrops/light/youtube.svg b/frontend/public/backdrops/light/youtube.svg new file mode 100644 index 0000000..16cb1ff --- /dev/null +++ b/frontend/public/backdrops/light/youtube.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index cccc42e..f65e075 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -382,13 +382,13 @@ export default function App() { setAccountRaw(PERF_KEY, perf ? "1" : "0"); }, [perf]); - // The per-scheme background image (the "glass over image" look) is on only in dark theme, when - // the user hasn't opted out, and not in perf mode. Drives `html[data-backdrop]` (see index.css), - // which both paints the image on and switches the glass to its translucent tier. + // The per-scheme background image (the "glass over image" look) is on when the user hasn't opted + // out and we're not in perf mode. Drives `html[data-backdrop]` (see index.css), which paints the + // theme-appropriate image on (dark or /light/ set) and switches the glass to translucent. useEffect(() => { - const on = theme.mode === "dark" && theme.bgImage && !perf; + const on = theme.bgImage && !perf; document.documentElement.dataset.backdrop = on ? "on" : "off"; - }, [theme.mode, theme.bgImage, perf]); + }, [theme.bgImage, perf]); useEffect(() => setHintsEnabled(hints), [hints]); useEffect(() => configureNotifications(notif), [notif]); diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx index 8ebd4cc..ea7edfd 100644 --- a/frontend/src/components/SettingsPanel.tsx +++ b/frontend/src/components/SettingsPanel.tsx @@ -165,11 +165,10 @@ function Appearance({ prefs }: { prefs: PrefsController }) { setTheme({ ...theme, bgImage: v })} /> - {theme.mode === "dark" && theme.bgImage && ( + {theme.bgImage && (
{t("settings.appearance.backgroundFade")} diff --git a/frontend/src/i18n/locales/de/settings.json b/frontend/src/i18n/locales/de/settings.json index 98cce1b..314bcc1 100644 --- a/frontend/src/i18n/locales/de/settings.json +++ b/frontend/src/i18n/locales/de/settings.json @@ -34,7 +34,7 @@ "display": "Anzeige", "darkMode": "Dunkler Modus", "backgroundImage": "Hintergrundbild", - "backgroundImageHint": "Zeigt ein dezentes, themenbezogenes Hintergrundbild hinter der App, damit die Glasflächen etwas zum Brechen haben. Nur im dunklen Design; aus = einfarbig.", + "backgroundImageHint": "Zeigt ein dezentes, themenbezogenes Hintergrundbild hinter der App, damit die Glasflächen etwas zum Brechen haben. Aus = einfarbig.", "backgroundFade": "Bildabblendung", "listView": "Listenansicht", "listViewHint": "Zeigt den Feed als kompakte Liste statt als Kartenraster an.", diff --git a/frontend/src/i18n/locales/en/settings.json b/frontend/src/i18n/locales/en/settings.json index 368c319..3214ab3 100644 --- a/frontend/src/i18n/locales/en/settings.json +++ b/frontend/src/i18n/locales/en/settings.json @@ -34,7 +34,7 @@ "display": "Display", "darkMode": "Dark mode", "backgroundImage": "Background image", - "backgroundImageHint": "Show a subtle per-theme backdrop image behind the app so the glass surfaces have something to refract. Dark theme only; off = flat colour.", + "backgroundImageHint": "Show a subtle per-scheme backdrop image behind the app so the glass surfaces have something to refract. Off = flat colour.", "backgroundFade": "Image fade", "listView": "List view", "listViewHint": "Show the feed as a compact list instead of a grid of cards.", diff --git a/frontend/src/i18n/locales/hu/settings.json b/frontend/src/i18n/locales/hu/settings.json index f21b09e..ed8d5cf 100644 --- a/frontend/src/i18n/locales/hu/settings.json +++ b/frontend/src/i18n/locales/hu/settings.json @@ -34,7 +34,7 @@ "display": "Megjelenítés", "darkMode": "Sötét mód", "backgroundImage": "Háttérkép", - "backgroundImageHint": "Halvány, témánkénti háttérkép az app mögött, hogy az üveges felületeknek legyen mit megtörniük. Csak sötét témában; kikapcsolva sima szín.", + "backgroundImageHint": "Halvány, sémánkénti háttérkép az app mögött, hogy az üveges felületeknek legyen mit megtörniük. Kikapcsolva sima szín.", "backgroundFade": "Kép elhalványítása", "listView": "Listanézet", "listViewHint": "A hírfolyam kompakt listaként jelenik meg a kártyarács helyett.", diff --git a/frontend/src/index.css b/frontend/src/index.css index d300e41..6a3a9ab 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -58,16 +58,23 @@ html[data-theme="light"] { /* Per-scheme background image, painted on (the app root is transparent so it shows through the whole app and the glass refracts it). A faded --bg overlay keeps it subtle; `fixed` so it - doesn't scroll. Only when the backdrop is on (dark theme + the "Background image" setting). */ -html[data-backdrop="on"][data-scheme="midnight"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/midnight.svg"); } -html[data-backdrop="on"][data-scheme="forest"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/forest.svg"); } -html[data-backdrop="on"][data-scheme="slate"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/slate.svg"); } -html[data-backdrop="on"][data-scheme="youtube"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/youtube.svg"); } -html[data-backdrop="on"][data-scheme="starship"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/starship.svg"); } -html[data-backdrop="on"][data-scheme="matrix"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/matrix.svg"); } -/* [data-theme="dark"] added purely to out-specify the `html[data-theme="dark"] body` ambient rule - below, whose `background` shorthand would otherwise reset background-size back to auto. */ -html[data-backdrop="on"][data-theme="dark"] body { + doesn't scroll. Dark theme uses the dark backdrops, light theme the lighter set in /light/. Only + when the backdrop is on (the "Background image" setting; off in perf). The [data-theme] qualifier + also out-specifies the ambient `background` shorthand (which would else reset background-size). */ +html[data-backdrop="on"][data-theme="dark"][data-scheme="midnight"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/midnight.svg"); } +html[data-backdrop="on"][data-theme="dark"][data-scheme="forest"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/forest.svg"); } +html[data-backdrop="on"][data-theme="dark"][data-scheme="slate"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/slate.svg"); } +html[data-backdrop="on"][data-theme="dark"][data-scheme="youtube"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/youtube.svg"); } +html[data-backdrop="on"][data-theme="dark"][data-scheme="starship"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/starship.svg"); } +html[data-backdrop="on"][data-theme="dark"][data-scheme="matrix"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/matrix.svg"); } +html[data-backdrop="on"][data-theme="light"][data-scheme="midnight"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/light/midnight.svg"); } +html[data-backdrop="on"][data-theme="light"][data-scheme="forest"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/light/forest.svg"); } +html[data-backdrop="on"][data-theme="light"][data-scheme="slate"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/light/slate.svg"); } +html[data-backdrop="on"][data-theme="light"][data-scheme="youtube"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/light/youtube.svg"); } +html[data-backdrop="on"][data-theme="light"][data-scheme="starship"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/light/starship.svg"); } +html[data-backdrop="on"][data-theme="light"][data-scheme="matrix"] body { background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--bg-fade), transparent), color-mix(in srgb, var(--bg) var(--bg-fade), transparent)), url("/backdrops/light/matrix.svg"); } +html[data-backdrop="on"][data-theme="dark"] body, +html[data-backdrop="on"][data-theme="light"] body { background-size: cover; background-position: center; background-repeat: no-repeat;