Added option to display gradient on background only

LilyLavenderPony · LilyLavenderPony · commit c694c142b8eb · 2026-03-27T11:43:56.000+01:00
diff --git a/index.html b/index.html
@@ -85,12 +85,13 @@
       href="./public/res/apple/apple-touch-icon-180x180.png"
     />
   </head>
-  <body id="appBody">
+  <body id="appBody">  
     <script>
       window.global ||= window;
     </script>
     <div id="root"></div>
     <div id="portalContainer"></div>
     <script type="module" src="./src/index.tsx"></script>
+    <div id="gradientLayer"></div>
   </body>
 </html>
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
@@ -367,6 +367,7 @@ function Appearance() {
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
 
   const [customBackgroundEnabled, setCustomBackgroundEnabled] = useSetting(settingsAtom, 'customBackgroundEnabled');
+  const [customBackgroundOnly, setCustomBackgroundOnly] = useSetting(settingsAtom, 'customBackgroundOnly');
   const [transparency,   setTransparency]   = useSetting(settingsAtom, 'transparency');
   const [customBgColor1, setCustomBgColor1] = useSetting(settingsAtom, 'customBgColor1');
   const [customBgColor2, setCustomBgColor2] = useSetting(settingsAtom, 'customBgColor2');
@@ -448,6 +449,19 @@ function Appearance() {
             </Box>
           </SequenceCard>
 
+          <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+            <SettingTile
+              title="Background only"
+              after={
+                <Switch
+                  variant="Primary"
+                  value={customBackgroundOnly}
+                  onChange={setCustomBackgroundOnly}
+                />
+              }
+            />
+          </SequenceCard>
+
           <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
             <SettingTile title="Transparency" after={<TransparencyInput/>}/>
           </SequenceCard>
diff --git a/src/app/pages/ThemeManager.tsx b/src/app/pages/ThemeManager.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode, useEffect } from 'react';
-import { configClass, varsClass } from 'folds';
+import { config, configClass, varsClass } from 'folds';
 import {
   DarkTheme,
   LightTheme,
@@ -55,6 +55,7 @@ export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
 
 export function CustomThemeManager() {
   const [customBackgroundEnabled] = useSetting(settingsAtom, 'customBackgroundEnabled');
+  const [customBackgroundOnly] = useSetting(settingsAtom, 'customBackgroundOnly');
   const [customBgColor1] = useSetting(settingsAtom, 'customBgColor1');
   const [customBgColor2] = useSetting(settingsAtom, 'customBgColor2');
   const [customBgColor3] = useSetting(settingsAtom, 'customBgColor3');
@@ -63,33 +64,52 @@ export function CustomThemeManager() {
   const [transparency] = useSetting(settingsAtom, 'transparency');
   const [angle] = useSetting(settingsAtom, 'angle');
   const [blur] = useSetting(settingsAtom, 'blur');
-
   const [monochromeMode] = useSetting(settingsAtom, 'monochromeMode');
 
   useEffect(() => {
+    const gradientLayer = document.getElementById('gradientLayer');
+    if (!gradientLayer) return;
+
+    gradientLayer.style.setProperty('z-index', customBackgroundOnly ? config.zIndex.Z100 : config.zIndex.Max);
+
     if (!customBackgroundEnabled) {
-      document.body.style.background = 'none';
-      document.body.style.opacity = '1';
-      document.body.style.backdropFilter = 'none';
+      gradientLayer.style.background = 'none';
+      gradientLayer.style.opacity = '0';
+      gradientLayer.style.backdropFilter = 'none';
       return;
     }
 
     const colors = [customBgColor1, customBgColor2, customBgColor3, customBgColor4, customBgColor5]
       .filter(Boolean)
-      .map(c => (monochromeMode ? hexToGrayscale(c) : c))  
+      .map((c) => (monochromeMode ? hexToGrayscale(c) : c))
       .join(', ');
-    
-    const gradient = `linear-gradient(${angle}deg, ${colors})`;
-    document.body.style.background = gradient;
-    
+
+    gradientLayer.style.background = `linear-gradient(${angle}deg, ${colors})`;
+
     if (blur && blur > 0) {
-      document.body.style.backdropFilter = `blur(${blur}px)`;
+      gradientLayer.style.backdropFilter = `blur(${blur}px)`;
+    } else {
+      gradientLayer.style.backdropFilter = 'none';
     }
-    
+
     if (transparency !== undefined) {
-      document.body.style.opacity = `${1 - transparency / 100}`;
+      gradientLayer.style.opacity = `${transparency / 100}`;
+    } else {
+      gradientLayer.style.opacity = '0';
     }
-  }, [customBackgroundEnabled, customBgColor1, customBgColor2, customBgColor3, customBgColor4, customBgColor5, transparency, angle, blur, monochromeMode]);
+  }, [
+    customBackgroundEnabled,
+    customBackgroundOnly,
+    customBgColor1,
+    customBgColor2,
+    customBgColor3,
+    customBgColor4,
+    customBgColor5,
+    transparency,
+    angle,
+    blur,
+    monochromeMode,
+  ]);
 
   return null;
 }
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
@@ -16,6 +16,7 @@ export interface Settings {
   darkThemeId?: string;
   monochromeMode?: boolean;
   customBackgroundEnabled: boolean;
+  customBackgroundOnly: boolean;
   transparency: number;
   blur: number;
   angle: number;
@@ -59,6 +60,7 @@ const defaultSettings: Settings = {
   darkThemeId: undefined,
   monochromeMode: false,
   customBackgroundEnabled: false,
+  customBackgroundOnly: false,
   transparency: 15,
   blur: 0,
   angle: 45,
diff --git a/src/index.css b/src/index.css
@@ -62,6 +62,15 @@ body {
   flex-direction: column;
 }
 
+#gradientLayer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  background: none;
+  backdrop-filter: none;
+}
+
 *,
 *::before,
 *::after {
