From 8c4e73e122a07a59cbe89c400e2fa1c4ad87b7cc Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Fri, 25 Jul 2025 18:01:03 -0700 Subject: [PATCH] Fixhancement: restore native scrolling, background (#5573) --- src/pages/index.jsx | 101 ++++++++++++++++++++--------------- src/styles/globals.css | 18 ++----- src/utils/contexts/color.jsx | 2 +- src/utils/contexts/theme.jsx | 2 +- 4 files changed, 63 insertions(+), 60 deletions(-) diff --git a/src/pages/index.jsx b/src/pages/index.jsx index f8d48fdff..bbcd3f3de 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -498,60 +498,73 @@ function Home({ initialSettings }) { } export default function Wrapper({ initialSettings, fallback }) { - const { themeContext } = useContext(ThemeContext); - const wrappedStyle = {}; + const { theme } = useContext(ThemeContext); + let backgroundImage = ""; + let opacity = initialSettings?.backgroundOpacity ?? 1; let backgroundBlur = false; let backgroundSaturate = false; let backgroundBrightness = false; if (initialSettings && initialSettings.background) { - let opacity = initialSettings.backgroundOpacity ?? 1; - let backgroundImage = initialSettings.background; - if (typeof initialSettings.background === "object") { - backgroundImage = initialSettings.background.image; - backgroundBlur = initialSettings.background.blur !== undefined; - backgroundSaturate = initialSettings.background.saturate !== undefined; - backgroundBrightness = initialSettings.background.brightness !== undefined; - if (initialSettings.background.opacity !== undefined) opacity = initialSettings.background.opacity / 100; + const bg = initialSettings.background; + if (typeof bg === "object") { + backgroundImage = bg.image || ""; + if (bg.opacity !== undefined) { + opacity = bg.opacity / 100; + } + backgroundBlur = bg.blur !== undefined; + backgroundSaturate = bg.saturate !== undefined; + backgroundBrightness = bg.brightness !== undefined; + } else { + backgroundImage = bg; } - const opacityValue = 1 - opacity; - wrappedStyle.backgroundImage = ` - linear-gradient( - rgb(var(--bg-color) / ${opacityValue}), - rgb(var(--bg-color) / ${opacityValue}) - ), - url('${backgroundImage}')`; - wrappedStyle.backgroundPosition = "center"; - wrappedStyle.backgroundSize = "cover"; } + // Apply background styles to and theme classes to + useEffect(() => { + const html = document.documentElement; + 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"); + if (theme === "dark") { + html.classList.add("dark"); + } + html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light"); + + html.classList.remove(...Array.from(html.classList).filter((cls) => cls.startsWith("theme-"))); + const themeClass = initialSettings.color ? `theme-${initialSettings.color}` : "theme-slate"; + html.classList.add(themeClass); + + return () => { + body.style.backgroundImage = ""; + body.style.backgroundColor = ""; + }; + }, [backgroundImage, opacity, theme, initialSettings.color]); + return ( -
+
-
- -
+
); diff --git a/src/styles/globals.css b/src/styles/globals.css index 27d6c2ff7..57e1a1800 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -25,8 +25,6 @@ } #__next { - width: 100%; - height: 100%; margin: 0; padding: 0; } @@ -34,16 +32,17 @@ html, body { font-family: Manrope, "Manrope-Fallback", Arial, sans-serif; - overflow: hidden; + height: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.1px; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } #page_wrapper { - width: 100vw; - height: 100vh; + width: 100%; + min-height: 100%; margin: 0; padding: 0; } @@ -60,15 +59,6 @@ body { --scrollbar-track: rgb(var(--color-700)); } -#page_container { - overflow: auto; - scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); -} - -::-webkit-scrollbar { - width: 0.75em; -} - dialog ::-webkit-scrollbar { display: none; } diff --git a/src/utils/contexts/color.jsx b/src/utils/contexts/color.jsx index bc16d605e..623d31f84 100644 --- a/src/utils/contexts/color.jsx +++ b/src/utils/contexts/color.jsx @@ -20,7 +20,7 @@ export function ColorProvider({ initialTheme, children }) { const [color, setColor] = useState(getInitialColor); const rawSetColor = (rawColor) => { - const root = window.document.getElementById("page_wrapper"); + const root = window.document.documentElement; root.classList.remove(`theme-${lastColor}`); root.classList.add(`theme-${rawColor}`); diff --git a/src/utils/contexts/theme.jsx b/src/utils/contexts/theme.jsx index 385eeaa28..2c48e8347 100644 --- a/src/utils/contexts/theme.jsx +++ b/src/utils/contexts/theme.jsx @@ -22,7 +22,7 @@ export function ThemeProvider({ initialTheme, children }) { const [theme, setTheme] = useState(getInitialTheme); const rawSetTheme = (rawTheme) => { - const root = window.document.getElementById("page_wrapper"); + const root = window.document.documentElement; const isDark = rawTheme === "dark"; root.classList.remove(isDark ? "light" : "dark");