Cutlery/homepage
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2025-08-07 09:01:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix background application from ssr

Browse Source
This commit is contained in:
shamoon 2025-08-01 08:17:23 -04:00
parent 6bc5f0f499
commit 9417929c99
No known key found for this signature in database
1 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/index.jsx
View File

@ -504,7 +504,7 @@ export default function Wrapper({ initialSettings, fallback }) {
let backgroundBlur = false; let backgroundBlur = false;
let backgroundSaturate = false; let backgroundSaturate = false;
let backgroundBrightness = false; let backgroundBrightness = false;
if (initialSettings && initialSettings.background) { if (initialSettings?.background) {
const bg = initialSettings.background; const bg = initialSettings.background;
if (typeof bg === "object") { if (typeof bg === "object") {
backgroundImage = bg.image || ""; backgroundImage = bg.image || "";
@ -519,26 +519,24 @@ export default function Wrapper({ initialSettings, fallback }) {
} }
} }
// Apply background styles to <body> and theme classes to <html> const wrapperStyle = backgroundImage
? {
backgroundImage: `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundAttachment: "fixed",
backgroundRepeat: "no-repeat",
}
: {
backgroundColor: "rgb(var(--bg-color))",
};
useEffect(() => { useEffect(() => {
const html = document.documentElement; const html = document.documentElement;
const body = document.body; const body = document.body;
if (backgroundImage) {
body.style.backgroundImage = `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`;
} else {
body.style.backgroundImage = "none";
body.style.backgroundColor = "rgb(var(--bg-color))";
}
body.style.backgroundSize = "cover";
body.style.backgroundPosition = "center";
body.style.backgroundAttachment = "fixed";
body.style.backgroundRepeat = "no-repeat";
html.classList.remove("dark", "scheme-dark", "scheme-light"); html.classList.remove("dark", "scheme-dark", "scheme-light");
if (theme === "dark") { html.classList.add(theme === "dark" ? "dark" : "");
html.classList.add("dark");
}
html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light"); html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light");
html.classList.remove(...Array.from(html.classList).filter((cls) => cls.startsWith("theme-"))); html.classList.remove(...Array.from(html.classList).filter((cls) => cls.startsWith("theme-")));
@ -546,13 +544,14 @@ export default function Wrapper({ initialSettings, fallback }) {
html.classList.add(themeClass); html.classList.add(themeClass);
return () => { return () => {
// Clean up background-related styles
body.style.backgroundImage = ""; body.style.backgroundImage = "";
body.style.backgroundColor = ""; body.style.backgroundColor = "";
}; };
}, [backgroundImage, opacity, theme, initialSettings.color]); }, [backgroundImage, opacity, theme, initialSettings.color]);
return ( return (
<div id="page_wrapper" className="relative min-h-screen"> <div id="page_wrapper" className="relative min-h-screen" style={wrapperStyle}>
<div <div
id="inner_wrapper" id="inner_wrapper"
tabIndex="-1" tabIndex="-1"