Update

hooks/useColorScheme.ts

@@ -0,0 +1 @@
+export {useColorScheme} from 'react-native';

hooks/useColorScheme.web.ts

@@ -0,0 +1,8 @@
+// NOTE: The default React Native styling doesn't support server rendering.
+// Server rendered styles should not change between the first render of the HTML
+// and the first render on the client. Typically, web developers will use CSS media queries
+// to render different styles on the client and server, these aren't directly supported in React Native
+// but can be achieved using a styling library like Nativewind.
+export function useColorScheme() {
+  return 'light';
+}

hooks/useScale.ts

@@ -0,0 +1,6 @@
+import {Platform, useWindowDimensions} from 'react-native';
+
+export function useScale(): number {
+  const {width} = useWindowDimensions();
+  return Platform.isTV ? width / 1000 : 1;
+}

hooks/useScale.web.ts

@@ -0,0 +1,3 @@
+export function useScale(): number {
+  return 1.0;
+}

hooks/useTextStyles.ts

@@ -0,0 +1,9 @@
+import {textStyles} from '@/constants/TextStyles';
+import {useThemeColor} from './useThemeColor';
+import {useScale} from './useScale';
+
+export function useTextStyles() {
+  const linkColor = useThemeColor({}, 'link');
+  const scale = useScale() ?? 1.0;
+  return textStyles(scale, linkColor);
+}

hooks/useThemeColor.ts

@@ -0,0 +1,22 @@
+/**
+ * Learn more about light and dark modes:
+ * https://docs.expo.dev/guides/color-schemes/
+ */
+
+import {useColorScheme} from 'react-native';
+
+import {Colors} from '@/constants/Colors';
+
+export function useThemeColor(
+  props: {light?: string; dark?: string},
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
+) {
+  const theme = useColorScheme() ?? 'light';
+  const colorFromProps = props[theme];
+
+  if (colorFromProps) {
+    return colorFromProps;
+  } else {
+    return Colors[theme][colorName];
+  }
+}