Toggleable shadows

src/pages/settings/components/Theming/BackgroundModal.tsx

@@ -49,7 +49,7 @@ function BackgroundModal({
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const [searchValue, setSearchValue] = useState<string>('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	const { mutateAsync: uploadAsync } = useFileUploadAPI();
 	const fd = new FormData();
 	const handleFileUpload = (e: any) => {
@@ -110,6 +110,11 @@ function BackgroundModal({
 										zIndex: 100,
 										paddingTop: 0,
 									}}
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 									rightSection={
 										isLoading ? (
 											<ActionIcon

src/pages/settings/components/Theming/EditBackground.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
-import { useMutationAPI } from 'hooks';
+import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
 import { textInputClasses } from 'styles';
 
@@ -20,6 +20,7 @@ function EditBackground({
 }) {
 	const [rename, setRename] = useState<string>('');
 	const { mutateAsync } = useMutationAPI();
+	const { theme } = useCommonHooks();
 	return (
 		<Stack
 			justify='center'
@@ -47,6 +48,11 @@ function EditBackground({
 					classNames={textInputClasses}
 					label='New Name'
 					onChange={(e) => setRename(e.target.value)}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 				<Card
 					style={{

src/pages/settings/components/Theming/ThemeModal.tsx

@@ -1,6 +1,7 @@
 import {
 	ActionIcon,
 	Button,
+	Checkbox,
 	ColorPicker,
 	ColorSwatch,
 	Group,
@@ -41,7 +42,7 @@ function ThemeModal({
 	closePicker: () => void;
 	handleSaveTheme: () => void;
 }) {
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	const viewportRef = useRef<HTMLDivElement>(null);
 	const [query, setQuery] = useState('');
 	const [hovered, setHovered] = useState(-1);
@@ -293,7 +294,15 @@ function ThemeModal({
 						>
 							{pickerOpen && (
 								<Stack h={'100%'} align='center' justify='space-between'>
-									<Text className={textClasses.sectionTitle} classNames={textClasses}>
+									<Text
+										className={textClasses.sectionTitle}
+										classNames={textClasses}
+										style={{
+											textShadow:
+												theme.textShadowsEnabled &&
+												'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+										}}
+									>
 										Change {colorId}
 									</Text>
 									{colorId === 'backgroundColor' && (
@@ -482,7 +491,27 @@ function ThemeModal({
 								</Stack>
 							)}
 							{!pickerOpen && !backgroundPicker && (
-								<Stack h={'100%'} align='center' justify='center' gap={0}>
+								<Stack h={'100%'} align='center' justify='center' gap={4}>
+									<Checkbox
+										label='Text Shadows'
+										checked={selectedTheme.textShadowsEnabled === 1}
+										onChange={(e) => {
+											setSelectedTheme({
+												...selectedTheme,
+												textShadowsEnabled: e.target.checked ? 1 : 0,
+											});
+										}}
+									/>
+									<Checkbox
+										label='App Shadows'
+										checked={selectedTheme.appShadowsEnabled === 1}
+										onChange={(e) => {
+											setSelectedTheme({
+												...selectedTheme,
+												appShadowsEnabled: e.target.checked ? 1 : 0,
+											});
+										}}
+									/>
 									<Button
 										onClick={() => {
 											setSelectedTheme({ ...defaultTheme });

src/pages/settings/components/Theming/Themes.tsx

@@ -46,6 +46,8 @@ function ThemesSettings() {
 		accentColor: '#5c5c5c',
 		borderColor: '#5c5c5c',
 		randomEnabled: 0,
+		textShadowsEnabled: 0,
+		appShadowsEnabled: 0,
 	});
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
@@ -78,6 +80,8 @@ function ThemesSettings() {
 			accentColor: '#5c5c5c',
 			borderColor: '#5c5c5c',
 			randomEnabled: 0,
+			textShadowsEnabled: 0,
+			appShadowsEnabled: 0,
 		});
 	};