diff --git a/packages/pl-fe/src/components/loading-screen.tsx b/packages/pl-fe/src/components/loading-screen.tsx index c826d0eb0..6cabcd3c6 100644 --- a/packages/pl-fe/src/components/loading-screen.tsx +++ b/packages/pl-fe/src/components/loading-screen.tsx @@ -2,18 +2,23 @@ import React from 'react'; import LandingGradient from 'pl-fe/components/landing-gradient'; import Spinner from 'pl-fe/components/ui/spinner'; +import { useSettings } from 'pl-fe/hooks/use-settings'; /** Fullscreen loading indicator. */ -const LoadingScreen: React.FC = React.memo(() => ( -
- +const LoadingScreen: React.FC = React.memo(() => { + const { theme } = useSettings(); -
-
- + return ( +
+ {(theme?.backgroundGradient ?? true) && } + +
+
+ +
-
-)); + ); +}); export { LoadingScreen as default }; diff --git a/packages/pl-fe/src/features/onboarding/onboarding-wizard.tsx b/packages/pl-fe/src/features/onboarding/onboarding-wizard.tsx index 90edfa4bd..5483cb439 100644 --- a/packages/pl-fe/src/features/onboarding/onboarding-wizard.tsx +++ b/packages/pl-fe/src/features/onboarding/onboarding-wizard.tsx @@ -7,6 +7,7 @@ import LandingGradient from 'pl-fe/components/landing-gradient'; import HStack from 'pl-fe/components/ui/hstack'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useFeatures } from 'pl-fe/hooks/use-features'; +import { useSettings } from 'pl-fe/hooks/use-settings'; import AvatarSelectionStep from './steps/avatar-selection-step'; import BioStep from './steps/bio-step'; @@ -19,6 +20,7 @@ import SuggestedAccountsStep from './steps/suggested-accounts-step'; const OnboardingWizard = () => { const dispatch = useAppDispatch(); const features = useFeatures(); + const { theme } = useSettings(); const [currentStep, setCurrentStep] = React.useState(0); @@ -77,7 +79,7 @@ const OnboardingWizard = () => { return (
- + {(theme?.backgroundGradient ?? true) && }
diff --git a/packages/pl-fe/src/features/preferences/index.tsx b/packages/pl-fe/src/features/preferences/index.tsx index b1100f555..af1cf87e4 100644 --- a/packages/pl-fe/src/features/preferences/index.tsx +++ b/packages/pl-fe/src/features/preferences/index.tsx @@ -205,6 +205,9 @@ const Preferences = () => {
+ }> + + diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx index 8d6a77579..1709ab500 100644 --- a/packages/pl-fe/src/features/ui/index.tsx +++ b/packages/pl-fe/src/features/ui/index.tsx @@ -24,6 +24,7 @@ import { useInstance } from 'pl-fe/hooks/use-instance'; import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; +import { useSettings } from 'pl-fe/hooks/use-settings'; import AdminLayout from 'pl-fe/layouts/admin-layout'; import ChatsLayout from 'pl-fe/layouts/chats-layout'; import DefaultLayout from 'pl-fe/layouts/default-layout'; @@ -389,6 +390,7 @@ const UI: React.FC = React.memo(({ children }) => { const vapidKey = useAppSelector(state => getVapidKey(state)); const client = useClient(); const instance = useInstance(); + const { theme } = useSettings(); const { isDropdownMenuOpen } = useUiStore(); const standalone = useAppSelector(isStandalone); @@ -499,7 +501,7 @@ const UI: React.FC = React.memo(({ children }) => { })} /> - + {(theme?.backgroundGradient ?? true) && }
diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 761c5e85d..96d262cb7 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -1419,6 +1419,7 @@ "preferences.fields.system_emoji_font_label": "Use system emoji font", "preferences.fields.system_font_label": "Use system's default font", "preferences.fields.theme": "Theme", + "preferences.fields.theme.display_background_gradient": "Display background gradient", "preferences.fields.theme_reset": "Reset theme", "preferences.fields.underline_links_label": "Always underline links in posts", "preferences.fields.unfollow_modal_label": "Show confirmation dialog before unfollowing someone", diff --git a/packages/pl-fe/src/schemas/pl-fe/settings.ts b/packages/pl-fe/src/schemas/pl-fe/settings.ts index 90b03aa80..713be5afc 100644 --- a/packages/pl-fe/src/schemas/pl-fe/settings.ts +++ b/packages/pl-fe/src/schemas/pl-fe/settings.ts @@ -60,6 +60,7 @@ const settingsSchema = v.object({ accentColor: v.optional(v.string()), colors: v.optional(v.any()), interfaceSize: v.fallback(v.picklist(['sm', 'md', 'lg', 'xl']), 'md'), + backgroundGradient: v.optional(v.boolean(), true), }), undefined), systemFont: v.fallback(v.boolean(), false),