Toggleable shadows

src/components/Applications/AppItem.tsx

@@ -26,11 +26,12 @@ export function AppItem({
 	const { ref, width, height } = useElementSize();
 	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const Icon = allIcons[icon];
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	const [textDecoration, setTextDecoration] = useState<string>('none');
 	const [hover, setHover] = useState<boolean>(false);
 	const validUrl =
 		url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
+
 	return (
 		<Box
 			component='a'
@@ -99,6 +100,7 @@ export function AppItem({
 							height: scale * 32,
 							width: scale * 32,
 							filter:
+								theme.appShadowsEnabled === 1 &&
 								'drop-shadow(2px 2px color-mix(in srgb, var(--mantine-color-accent-0), transparent 30%))',
 						}}
 					/>

src/components/HelpModal/HelpSection.tsx

@@ -1,12 +1,20 @@
 import { Group, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 import type { SearchShortcut } from 'types';
 import HintItem from './HintItem';
 
 function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
+	const { theme } = useCommonHooks();
 	return (
 		<Group gap={4}>
-			<Text className={textClasses.helpTitle} classNames={textClasses}>
+			<Text
+				className={textClasses.helpTitle}
+				classNames={textClasses}
+				style={{
+					textShadow: theme.textShadowsEnabled && '2px 2px var(--mantine-color-border-0)',
+				}}
+			>
 				{name}
 			</Text>
 			<Group

src/components/WeatherModal/CurrentWeather.tsx

@@ -10,7 +10,7 @@ import WeatherFeaturePill from './WeatherFeaturePill';
 import WeatherIcon from './WeatherIcon';
 
 export default function CurrentWeather({ current }: { current: CW }) {
-	const { currentLocation, isMobile } = useCommonHooks();
+	const { currentLocation, isMobile, theme } = useCommonHooks();
 	const { data: sunStateData } = useSunStateAPI({
 		lat: currentLocation.lat,
 		lon: currentLocation.lon,
@@ -45,7 +45,14 @@ export default function CurrentWeather({ current }: { current: CW }) {
 						overflow: 'visible',
 					}}
 				>
-					<Text className={textClasses.weatherTitle} classNames={textClasses}>
+					<Text
+						className={textClasses.weatherTitle}
+						classNames={textClasses}
+						style={{
+							textShadow:
+								theme.textShadowsEnabled && '2px 2px var(--mantine-color-border-0)',
+						}}
+					>
 						Current Weather
 					</Text>
 					<Group gap={32} w={'100%'} align='center' justify='center' pt={'.5rem'}>
@@ -148,6 +155,9 @@ export default function CurrentWeather({ current }: { current: CW }) {
 									classNames={textClasses}
 									style={{
 										textAlign: 'center',
+										textShadow:
+											theme.textShadowsEnabled &&
+											'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
 									}}
 									w={'100%'}
 								>
@@ -190,6 +200,9 @@ export default function CurrentWeather({ current }: { current: CW }) {
 									classNames={textClasses}
 									style={{
 										textAlign: 'center',
+										textShadow:
+											theme.textShadowsEnabled &&
+											'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
 									}}
 									w={'100%'}
 								>
@@ -234,6 +247,9 @@ export default function CurrentWeather({ current }: { current: CW }) {
 									classNames={textClasses}
 									style={{
 										textAlign: 'center',
+										textShadow:
+											theme.textShadowsEnabled &&
+											'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
 									}}
 									w={'100%'}
 								>

src/components/WeatherModal/ExtendedForecastCard.tsx

@@ -9,7 +9,7 @@ export default function ExtendedForecastCard({
 }: {
 	forecast: ExtendedForecast[];
 }) {
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
 	const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
 	return (
@@ -25,7 +25,13 @@ export default function ExtendedForecastCard({
 				overflow: 'visible',
 			}}
 		>
-			<Text className={textClasses.weatherTitle} classNames={textClasses}>
+			<Text
+				className={textClasses.weatherTitle}
+				classNames={textClasses}
+				style={{
+					textShadow: theme.textShadowsEnabled && '2px 2px var(--mantine-color-border-0)',
+				}}
+			>
 				Extended Forecast
 			</Text>
 			<SimpleGrid w={'100%'} pt={'.5rem'} cols={isMobile ? 3 : 6}>

src/pages/homepage/components/Applications/Applications.tsx

@@ -9,7 +9,7 @@ function Applications({ contentType }: { contentType: string[] }) {
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
-	const { appSort, appDensity, appScale } = useCommonHooks();
+	const { appSort, appDensity, appScale, theme } = useCommonHooks();
 	const [applications, setApplications] = useState<Application[]>([]);
 
 	useEffect(() => {
@@ -42,7 +42,15 @@ function Applications({ contentType }: { contentType: string[] }) {
 		<>
 			{applications.length > 0 && contentType.length > 0 && (
 				<Stack gap={0}>
-					<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%)',
+						}}
+					>
 						Applications
 					</Text>
 					<Stack

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -12,7 +12,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/bookmarkCategories',
 	});
-	const { bookmarkSort, bookmarkDensity, bookmarkScale } = useCommonHooks();
+	const { bookmarkSort, bookmarkDensity, bookmarkScale, theme } = useCommonHooks();
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
@@ -64,6 +64,11 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 							classNames={textClasses}
 							mb={'-.5rem'}
 							mt={'1.25rem'}
+							style={{
+								textShadow:
+									theme.textShadowsEnabled &&
+									'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+							}}
 						>
 							Bookmarks
 						</Text>

src/pages/homepage/components/Header/Header.tsx

@@ -22,7 +22,7 @@ function Header({
 	openWeatherModal: () => void;
 }) {
 	const [time, setTime] = useState(new Date());
-	const { isMobile, currentUser, fixDigits } = useCommonHooks();
+	const { isMobile, currentUser, fixDigits, theme } = useCommonHooks();
 
 	useEffect(() => {
 		setInterval(() => {
@@ -80,6 +80,11 @@ function Header({
 					className={textClasses.greeting}
 					classNames={textClasses}
 					fz={isMobile ? 24 : undefined}
+					style={{
+						textShadow:
+							theme.textShadowsEnabled &&
+							'3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)',
+					}}
 				>
 					{greet
 						?.replace('$firstName', currentUser.firstName)
@@ -97,7 +102,12 @@ function Header({
 				<Text
 					className={textClasses.dateTime}
 					classNames={textClasses}
-					style={{ width: 'max-content' }}
+					style={{
+						width: 'max-content',
+						textShadow:
+							theme.textShadowsEnabled &&
+							'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+					}}
 				>
 					{date}
 				</Text>
@@ -119,7 +129,16 @@ function Header({
 						}}
 						onClick={openWeatherModal}
 					>
-						<Text className={textClasses.dateTime} classNames={textClasses} mr={'.25rem'}>
+						<Text
+							className={textClasses.dateTime}
+							classNames={textClasses}
+							mr={'.25rem'}
+							style={{
+								textShadow:
+									theme.textShadowsEnabled &&
+									'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+							}}
+						>
 							{current.temperature}°F
 						</Text>
 						<Text
@@ -127,11 +146,24 @@ function Header({
 							classNames={textClasses}
 							fz={'.875rem'}
 							mb={'.375rem'}
+							style={{
+								textShadow:
+									theme.textShadowsEnabled &&
+									'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+							}}
 						>
 							{current.highTemp}°F/{current.lowTemp}°F
 						</Text>
 					</Group>
-					<Text className={textClasses.dateTime} classNames={textClasses}>
+					<Text
+						className={textClasses.dateTime}
+						classNames={textClasses}
+						style={{
+							textShadow:
+								theme.textShadowsEnabled &&
+								'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+						}}
+					>
 						{`${
 							time.getHours() === 0
 								? 12

src/pages/homepage/components/Header/LargeHeader.tsx

@@ -18,7 +18,7 @@ function LargeHeader({
 	setCurrent: (current: CW) => void;
 }) {
 	const [time, setTime] = useState(new Date());
-	const { isMobile, currentUser, fixDigits } = useCommonHooks();
+	const { isMobile, currentUser, fixDigits, theme } = useCommonHooks();
 
 	useEffect(() => {
 		setInterval(() => {
@@ -71,6 +71,11 @@ function LargeHeader({
 				className={textClasses.greeting}
 				classNames={textClasses}
 				fz={isMobile ? '2rem' : '6rem'}
+				style={{
+					textShadow:
+						theme.textShadowsEnabled &&
+						'3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)',
+				}}
 			>
 				{greet
 					?.replace('$firstName', currentUser.firstName)
@@ -83,11 +88,26 @@ function LargeHeader({
 				className={textClasses.dateTime}
 				classNames={textClasses}
 				m={0}
-				style={{ width: 'max-content' }}
+				style={{
+					width: 'max-content',
+					textShadow:
+						theme.textShadowsEnabled &&
+						'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+				}}
 			>
 				{date}
 			</Text>
-			<Text fz={'6rem'} m={0} className={textClasses.dateTime} classNames={textClasses}>
+			<Text
+				fz={'6rem'}
+				m={0}
+				className={textClasses.dateTime}
+				classNames={textClasses}
+				style={{
+					textShadow:
+						theme.textShadowsEnabled &&
+						'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+				}}
+			>
 				{`${
 					time.getHours() === 0
 						? 12

src/pages/homepage/components/SettingsButton/SettingsCard.tsx

@@ -7,6 +7,7 @@ import {
 	Stack,
 	Text,
 } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { multiSelectClasses, selectClasses, sliderClasses, stackClasses } from 'styles';
 
 function SettingsCard({
@@ -32,6 +33,7 @@ function SettingsCard({
 	scale: any;
 	setScale: any;
 }) {
+	const { theme } = useCommonHooks();
 	return (
 		<Stack
 			gap={0}
@@ -117,6 +119,11 @@ function SettingsCard({
 						withinPortal: false,
 						position: 'top',
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 				<Select
 					label={'Sorting'}
@@ -139,6 +146,11 @@ function SettingsCard({
 						setSort(option.value);
 					}}
 					labelProps={{ top: 8 }}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 		</Stack>

src/pages/settings/components/Applications/Applications.tsx

@@ -56,7 +56,7 @@ const ApplicationSettings = () => {
 	});
 	const [applications, setApplications] = useState<Application[]>([]);
 	const [applicationList, setApplicationList] = useState<Application[]>([]);
-	const { isMobile, reorder } = useCommonHooks();
+	const { isMobile, reorder, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -176,6 +176,11 @@ const ApplicationSettings = () => {
 									w={'45%'}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 								<TextInput
 									key={form.key('baseUrl')}
@@ -185,6 +190,11 @@ const ApplicationSettings = () => {
 									className={textInputClasses.settingsItem}
 									w={'45%'}
 									classNames={textInputClasses}
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Group>
 							<Group w={isMobile ? '94%' : '92%'} justify='center'>
@@ -197,6 +207,11 @@ const ApplicationSettings = () => {
 									w={'100%'}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Group>
 							<Group w={'100%'} justify='center' pos={'relative'}>
@@ -223,6 +238,11 @@ const ApplicationSettings = () => {
 									comboboxProps={{
 										zIndex: 3000,
 									}}
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 									renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
 										const Icon = allIcons[item.option.value];
 										return (
@@ -249,6 +269,11 @@ const ApplicationSettings = () => {
 									classNames={textInputClasses}
 									defaultValue={defaultApplication.filterName}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Group>
 							<Group mt={'1rem'}>

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -25,7 +25,7 @@ function DebouncedApplication({
 	setIsOpen: (isOpen: boolean) => void;
 	allIcons: any;
 }) {
-	const { handleDelete, isMobile } = useCommonHooks();
+	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -103,6 +103,11 @@ function DebouncedApplication({
 						});
 					}}
 					disabled
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 				<TextInput
 					label={'Base URL'}
@@ -115,6 +120,11 @@ function DebouncedApplication({
 							baseUrl: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 			<Group
@@ -134,6 +144,11 @@ function DebouncedApplication({
 							url: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 			<Group
@@ -163,6 +178,11 @@ function DebouncedApplication({
 					comboboxProps={{
 						zIndex: 3000,
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 					onChange={(value: string | null) => {
 						setUpdate({
 							...app,
@@ -194,6 +214,11 @@ function DebouncedApplication({
 							filterName: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 		</Card>

src/pages/settings/components/Bookmarks/Bookmarks.tsx

@@ -37,7 +37,7 @@ const BookmarkSettings = () => {
 	const [dragging, setDragging] = useState(false);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 	const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
-	const { isMobile, reorder } = useCommonHooks();
+	const { isMobile, reorder, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -149,6 +149,11 @@ const BookmarkSettings = () => {
 									className={textInputClasses.settingsItem}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 								<TextInput
 									key={form.key('filterName')}
@@ -158,6 +163,11 @@ const BookmarkSettings = () => {
 									className={textInputClasses.settingsItem}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Group>
 							<Group mt={'1rem'}>

src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx

@@ -14,7 +14,7 @@ function DebouncedBookmarkItem({
 	bookmarkItem: Bookmark;
 	setIsOpen: (isOpen: boolean) => void;
 }) {
-	const { handleDelete, isMobile } = useCommonHooks();
+	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -97,6 +97,11 @@ function DebouncedBookmarkItem({
 							name: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 				<TextInput
 					label={'Category'}
@@ -109,6 +114,11 @@ function DebouncedBookmarkItem({
 							category: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
@@ -124,6 +134,11 @@ function DebouncedBookmarkItem({
 							url: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 		</Card>

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -38,7 +38,7 @@ function DebouncedGroupSettingsItem({
 	bookmarks: Bookmark[];
 	searchTerm: string;
 }) {
-	const { isMobile, handleDelete, reorder } = useCommonHooks();
+	const { isMobile, handleDelete, reorder, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [popoverOpened, setPopoverOpened] = useState(false);
 	const { mutateAsync } = useMutationAPI();
@@ -156,6 +156,11 @@ function DebouncedGroupSettingsItem({
 									categoryName: event.target.value,
 								});
 							}}
+							styles={
+								theme.textShadowsEnabled && {
+									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+								}
+							}
 						/>
 						<TextInput
 							label={'Filter Name'}
@@ -169,6 +174,11 @@ function DebouncedGroupSettingsItem({
 									filterName: event.target.value,
 								});
 							}}
+							styles={
+								theme.textShadowsEnabled && {
+									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+								}
+							}
 						/>
 						<Tooltip
 							c={'var(--mantine-color-primary-0)'}
@@ -332,6 +342,11 @@ function DebouncedGroupSettingsItem({
 												pt={'1rem'}
 												classNames={textInputClasses}
 												withAsterisk
+												styles={
+													theme.textShadowsEnabled && {
+														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+													}
+												}
 											/>
 											<TextInput
 												key={form.key('category')}
@@ -342,6 +357,11 @@ function DebouncedGroupSettingsItem({
 												classNames={textInputClasses}
 												disabled
 												defaultValue={group.categoryName}
+												styles={
+													theme.textShadowsEnabled && {
+														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+													}
+												}
 											/>
 										</Group>
 										<Group w={'100%'} justify='center' mb={60}>
@@ -355,6 +375,11 @@ function DebouncedGroupSettingsItem({
 												pt={'1rem'}
 												classNames={textInputClasses}
 												withAsterisk
+												styles={
+													theme.textShadowsEnabled && {
+														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+													}
+												}
 											/>
 										</Group>
 										<Group

src/pages/settings/components/Messages/DebouncedMessage.tsx

@@ -15,7 +15,7 @@ function DebouncedMessage({
 	message: Message;
 	setMessage: (message: Message) => void;
 }) {
-	const { handleDelete } = useCommonHooks();
+	const { handleDelete, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	return (
 		<Card
@@ -70,7 +70,12 @@ function DebouncedMessage({
 						message: event.target.value,
 					});
 				}}
-				styles={{ root: { paddingTop: '1.25rem' } }}
+				styles={
+					theme.textShadowsEnabled && {
+						root: { paddingTop: '1.25rem' },
+						label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+					}
+				}
 			/>
 		</Card>
 	);

src/pages/settings/components/Messages/Messages.tsx

@@ -14,7 +14,7 @@ const MessageSettings = () => {
 	const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [messages, setMessages] = useState<Message[]>([]);
 	const [newMessage, setNewMessage] = useState('');
@@ -91,6 +91,11 @@ const MessageSettings = () => {
 								setNewMessage(event.target.value);
 							}}
 							error={newMessageError}
+							styles={
+								theme.textShadowsEnabled && {
+									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+								}
+							}
 						/>
 						<Group mt={'1rem'}>
 							<Button

src/pages/settings/components/Personalization/Personalization.tsx

@@ -19,7 +19,7 @@ const PersonalizationSettings = () => {
 	const [update, setUpdate] = useState<any>({});
 	const [debounced] = useDebouncedValue(update, 1000);
 	const { mutateAsync } = useMutationAPI();
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 
 	useEffect(() => {
 		if (personalData && personalIsFetched) {
@@ -91,6 +91,11 @@ const PersonalizationSettings = () => {
 									};
 									setUpdate(updatedPersonal);
 								}}
+								styles={
+									theme.textShadowsEnabled && {
+										label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+									}
+								}
 							/>
 						</Card>
 					</GridCol>
@@ -108,6 +113,11 @@ const PersonalizationSettings = () => {
 									};
 									setUpdate(updatedPersonal);
 								}}
+								styles={
+									theme.textShadowsEnabled && {
+										label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+									}
+								}
 							/>
 						</Card>
 					</GridCol>
@@ -125,6 +135,11 @@ const PersonalizationSettings = () => {
 									};
 									setUpdate(updatedPersonal);
 								}}
+								styles={
+									theme.textShadowsEnabled && {
+										label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+									}
+								}
 							/>
 						</Card>
 					</GridCol>
@@ -142,6 +157,11 @@ const PersonalizationSettings = () => {
 									};
 									setUpdate(updatedPersonal);
 								}}
+								styles={
+									theme.textShadowsEnabled && {
+										label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+									}
+								}
 							/>
 						</Card>
 					</GridCol>

src/pages/settings/components/Search/DebouncedSearchProvider.tsx

@@ -14,7 +14,7 @@ function DebouncedSearchProvider({
 	searchProvider: Provider;
 	setIsOpen: (isOpen: boolean) => void;
 }) {
-	const { handleDelete, isMobile } = useCommonHooks();
+	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -99,6 +99,11 @@ function DebouncedSearchProvider({
 								name: event.target.value,
 							});
 						}}
+						styles={
+							theme.textShadowsEnabled && {
+								label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+							}
+						}
 					/>
 					<TextInput
 						label={'Prefix'}
@@ -111,6 +116,11 @@ function DebouncedSearchProvider({
 								prefix: event.target.value,
 							});
 						}}
+						styles={
+							theme.textShadowsEnabled && {
+								label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+							}
+						}
 					/>
 				</Group>
 				<TextInput
@@ -125,6 +135,11 @@ function DebouncedSearchProvider({
 							url: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Stack>
 		</Card>

src/pages/settings/components/Search/SearchProviders.tsx

@@ -40,7 +40,7 @@ const SearchProviderSettings = () => {
 		endpoint: endpoint,
 	});
 	const [providers, setProviders] = useState<Provider[]>([]);
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
@@ -98,6 +98,11 @@ const SearchProviderSettings = () => {
 										className={textInputClasses.settingsItem}
 										classNames={textInputClasses}
 										withAsterisk
+										styles={
+											theme.textShadowsEnabled && {
+												label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+											}
+										}
 									/>
 									<TextInput
 										key={form.key('prefix')}
@@ -107,6 +112,11 @@ const SearchProviderSettings = () => {
 										className={textInputClasses.settingsItem}
 										classNames={textInputClasses}
 										withAsterisk
+										styles={
+											theme.textShadowsEnabled && {
+												label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+											}
+										}
 									/>
 								</Group>
 								<TextInput
@@ -118,6 +128,11 @@ const SearchProviderSettings = () => {
 									w={'64%'}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Stack>
 							<Group mt={'1rem'}>

src/pages/settings/components/Shared/SettingsHeader.tsx

@@ -46,7 +46,7 @@ function SettingsHeader({
 	isLoading: boolean;
 	setIsLoading: (isLoading: boolean) => void;
 }) {
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	const [disabled, setDisabled] = useState(false);
 	return (
 		<Group
@@ -136,6 +136,11 @@ function SettingsHeader({
 					style={{
 						zIndex: 100,
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 					rightSection={
 						isLoading ? (
 							<ActionIcon

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,
 		});
 	};
 

src/pages/settings/components/WoL/DebouncedWolClient.tsx

@@ -14,7 +14,7 @@ function DebouncedWolClient({
 	wolClient: WolClient;
 	setIsOpen: (isOpen: boolean) => void;
 }) {
-	const { handleDelete, isMobile } = useCommonHooks();
+	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -96,6 +96,11 @@ function DebouncedWolClient({
 							hostname: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 				<TextInput
 					label={'MAC Address'}
@@ -108,6 +113,11 @@ function DebouncedWolClient({
 							macAddress: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 		</Card>

src/pages/settings/components/WoL/WolClients.tsx

@@ -33,7 +33,7 @@ const WolClientSettings = () => {
 	});
 	const [wolClients, setWolClients] = useState<WolClient[]>([]);
 	const { mutateAsync } = useMutationAPI();
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -85,6 +85,11 @@ const WolClientSettings = () => {
 									className={textInputClasses.settingsItem}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 								<TextInput
 									key={form.key('macAddress')}
@@ -94,6 +99,11 @@ const WolClientSettings = () => {
 									className={textInputClasses.settingsItem}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Group>
 							<Group mt={'1rem'}>

src/styles/MultiSelect.module.css

@@ -9,7 +9,6 @@
 	border-radius: 8px;
 	background-color: var(--mantine-color-primary-0);
 	color: var(--mantine-color-background-0);
-	box-shadow: 2px 2px var(--mantine-color-border-0);
 	z-index: 1;
 	top: 8px;
 }

src/styles/Select.module.css

@@ -15,7 +15,6 @@
 	border-radius: 8px;
 	background-color: var(--mantine-color-primary-0);
 	color: var(--mantine-color-background-0);
-	box-shadow: 2px 2px var(--mantine-color-border-0);
 	z-index: 1;
 	top: 18px;
 }

src/styles/Text.module.css

@@ -4,7 +4,6 @@
 		font-size: 3.5rem;
 		width: max-content;
 		color: var(--mantine-color-accent-0);
-		text-shadow: 3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%);
 	}
 }
 
@@ -20,7 +19,6 @@
 		text-transform: uppercase;
 		font-weight: 300;
 		color: var(--mantine-color-primary-0);
-		text-shadow: 1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%);
 	}
 }
 
@@ -34,7 +32,6 @@
 		margin-left: -.25rem;
 		color: var(--mantine-color-primary-0);
 		background-color: transparent;
-		box-shadow: 2px 2px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%);
 		border-radius: 4px;
 		padding-left: .5rem;
 		padding-right: .5rem;
@@ -49,7 +46,6 @@
 		font-weight: 600;
 		color: var(--mantine-color-background-0);
 		background-color: var(--mantine-color-primary-0);
-		box-shadow: 2px 2px var(--mantine-color-border-0);
 		border-radius: 4px;
 		padding-left: .5rem;
 		padding-right: .5rem;
@@ -68,7 +64,6 @@
 		border-radius: 8px;
 		color: var(--mantine-color-background-0);
 		background-color: var(--mantine-color-primary-0);
-		box-shadow: 2px 2px var(--mantine-color-border-0);
 	}
 }
 
@@ -132,7 +127,7 @@
 		margin-top: 1.5rem;
 		color: var(--mantine-color-primary-0);
 		background-color: var(--mantine-color-search-0);
-		box-shadow: 4px -4px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%);
+		/* box-shadow: 4px -4px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%); */
 		border-radius: 8px;
 		padding-left: .5rem;
 		padding-right: .5rem;

src/styles/TextInput.module.css

@@ -35,7 +35,6 @@
 			border-radius: 8px;
 			background-color: var(--mantine-color-primary-0);
 			color: var(--mantine-color-background-0);
-			box-shadow: 2px 2px var(--mantine-color-border-0);
 			z-index: 1;
 		}
 		.wrapper {

src/types/theme.ts

@@ -8,6 +8,8 @@ export interface Theme {
 	borderColor: string;
 	searchColor: string;
 	randomEnabled: number;
+	textShadowsEnabled: number;
+	appShadowsEnabled: number;
 }
 
 export interface ThemePlaylist {