Toggleable shadows

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