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}>