Toggleable shadows

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