feat: allow users to override color scheme (closes #138)

src/screens/Settings/components/Container.tsx

@@ -0,0 +1,8 @@
+import { SafeScrollView } from 'components/SafeNavigatorView';
+import styled from 'styled-components';
+
+const Container = styled(SafeScrollView)`
+    padding: 24px;
+`;
+
+export default Container;

src/screens/Settings/components/Input.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native';
+
+export const InputContainer = styled.View`
+    margin: 10px 0;
+`;
+
+export const Input = styled.TextInput`
+    padding: 15px;
+    margin-top: 5px;
+    border-radius: 5px;
+`;

src/screens/Settings/components/Radio.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components/native';
+import CheckmarkIcon from 'assets/icons/checkmark.svg';
+import { Text } from 'components/Typography';
+import useDefaultStyles from 'components/Colors';
+import { THEME_COLOR } from 'CONSTANTS';
+import { Gap } from 'components/Utility';
+import { View } from 'react-native';
+
+export const RadioList = styled.View`
+    border-radius: 8px;
+    overflow: hidden;
+`;
+
+const RadioItemContainer = styled.Pressable<{ checked?: boolean }>`
+    padding: 16px 24px 16px 16px;
+    border-bottom: 1px solid #444;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+`;
+
+export interface RadioItemProps<T> {
+    checked?: boolean;
+    label?: string;
+    value: T;
+    onPress: (value: T) => void;
+    last?: boolean;
+}
+
+export function RadioItem<T>({ 
+    checked,
+    label,
+    value,
+    onPress,
+    last
+}: RadioItemProps<T>) {
+    const defaultStyles = useDefaultStyles();
+
+    const handlePress = useCallback(() => {
+        onPress(value);
+    }, [onPress, value]);
+
+    return (
+        <View style={!last ? { borderBottomWidth: 1, borderBottomColor: defaultStyles.divider.backgroundColor } : undefined}>
+            <RadioItemContainer
+                onPress={handlePress}
+                style={({ pressed }) => [
+                    { backgroundColor: pressed
+                        ? defaultStyles.activeBackground.backgroundColor
+                        : defaultStyles.button.backgroundColor 
+                    }
+                ]}
+            >
+                {checked ? <CheckmarkIcon fill={THEME_COLOR} height={14} width={14} /> : <Gap size={14} />}
+                <Gap size={8} />
+                <Text style={checked && { color: THEME_COLOR }}>{label}</Text>
+            </RadioItemContainer>
+        </View>
+    );
+}

src/screens/Settings/components/Switch.tsx

@@ -0,0 +1,13 @@
+import { Text } from 'components/Typography';
+import styled from 'styled-components/native';
+
+export const SwitchContainer = styled.View`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0;
+`;
+
+export const SwitchLabel = styled(Text)`
+    font-size: 16px;
+`;

src/screens/Settings/index.tsx

@@ -1,17 +1,20 @@
 import React, { useCallback } from 'react';
 import { StyleSheet } from 'react-native';
-import Library from './components/Library';
-import Cache from './components/Cache';
-import useDefaultStyles, { ColoredBlurView } from 'components/Colors';
 import { t } from '@localisation';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/native';
-import ListButton from 'components/ListButton';
 import { THEME_COLOR } from 'CONSTANTS';
-import Sentry from './components/Sentry';
+import ListButton from 'components/ListButton';
+import useDefaultStyles, { ColoredBlurView } from 'components/Colors';
+
 import { SettingsNavigationProp } from './types';
+
+import Cache from './stacks/Cache';
+import Sentry from './stacks/Sentry';
+import Library from './stacks/Library';
+import ColorScheme from './stacks/ColorScheme';
+import PlaybackReporting from './stacks/PlaybackReporting';
 import { SafeScrollView } from 'components/SafeNavigatorView';
-import PlaybackReporting from './components/PlaybackReporting';
 
 export function SettingsList() {
     const navigation = useNavigation<SettingsNavigationProp>();
@@ -19,6 +22,7 @@ export function SettingsList() {
     const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
     const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);
     const handlePlaybackReportingClick = useCallback(() => { navigation.navigate('Playback Reporting'); }, [navigation]);
+    const handleColorSchemeClick = useCallback(() => { navigation.navigate('Color Scheme'); }, [navigation]);
 
     return (
         <SafeScrollView>
@@ -26,6 +30,7 @@ export function SettingsList() {
             <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
             <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
             <ListButton onPress={handlePlaybackReportingClick}>{t('playback-reporting')}</ListButton>
+            <ListButton onPress={handleColorSchemeClick}>{t('color-scheme')}</ListButton>
         </SafeScrollView>
     );
 }
@@ -47,6 +52,7 @@ export default function Settings() {
             <Stack.Screen name="Cache" component={Cache} options={{ headerTitle: t('setting-cache') }} />
             <Stack.Screen name="Sentry" component={Sentry} options={{ headerTitle: t('error-reporting') }} />
             <Stack.Screen name="Playback Reporting" component={PlaybackReporting} options={{ headerTitle: t('playback-reporting')}} />
+            <Stack.Screen name="Color Scheme" component={ColorScheme} options={{ headerTitle: t('color-scheme')}} />
         </Stack.Navigator>
     );
 }

src/screens/Settings/stacks/Cache.tsx

@@ -6,16 +6,12 @@ import Button from 'components/Button';
 import styled from 'styled-components/native';
 import { Paragraph } from 'components/Typography';
 import { useAppDispatch } from 'store';
-import { SafeScrollView } from 'components/SafeNavigatorView';
+import Container from '../components/Container';
 
 const ClearCache = styled(Button)`
     margin-top: 16px;
 `;
 
-const Container = styled(SafeScrollView)`
-    padding: 24px;
-`;
-
 export default function CacheSettings() {
     const dispatch = useAppDispatch();
     const handleClearCache = useCallback(() => {

src/screens/Settings/stacks/ColorScheme.tsx

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { Paragraph } from 'components/Typography';
+import Container from '../components/Container';
+import { t } from '@localisation';
+import { RadioItem, RadioList } from '../components/Radio';
+import { ColorScheme } from 'store/settings/types';
+import { useAppDispatch, useTypedSelector } from 'store';
+import { setColorScheme } from 'store/settings/actions';
+
+export default function ColorSchemeSetting() {
+    const dispatch = useAppDispatch();
+    const scheme = useTypedSelector((state) => state.settings.colorScheme);
+
+    const handlePress = useCallback((value: ColorScheme) => {
+        dispatch(setColorScheme(value));
+    }, [dispatch]);
+
+    return (
+        <Container>
+            <Paragraph>{t('color-scheme-description')}</Paragraph>
+            <Paragraph />
+            <RadioList>
+                <RadioItem
+                    label={t('color-scheme-system')}
+                    value={ColorScheme.System}
+                    onPress={handlePress}
+                    checked={scheme === ColorScheme.System}
+                />
+                <RadioItem
+                    label={t('color-scheme-light')}
+                    value={ColorScheme.Light}
+                    onPress={handlePress}
+                    checked={scheme === ColorScheme.Light}
+                />
+                <RadioItem
+                    label={t('color-scheme-dark')}
+                    value={ColorScheme.Dark}
+                    onPress={handlePress}
+                    checked={scheme === ColorScheme.Dark}
+                    last
+                />
+            </RadioList>
+        </Container>
+    );
+}

src/screens/Settings/stacks/Library.tsx

@@ -1,4 +1,3 @@
-import styled from 'styled-components/native';
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback } from 'react';
 import useDefaultStyles from 'components/Colors';
@@ -7,21 +6,8 @@ import { useTypedSelector } from 'store';
 import { t } from '@localisation';
 import Button from 'components/Button';
 import { Paragraph } from 'components/Typography';
-import { SafeScrollView } from 'components/SafeNavigatorView';
-
-const InputContainer = styled.View`
-    margin: 10px 0;
-`;
-
-const Input = styled.TextInput`
-    padding: 15px;
-    margin-top: 5px;
-    border-radius: 5px;
-`;
-
-const Container = styled(SafeScrollView)`
-    padding: 24px;
-`;
+import Container from '../components/Container';
+import { InputContainer, Input } from '../components/Input';
 
 export default function LibrarySettings() {
     const defaultStyles = useDefaultStyles();

src/screens/Settings/stacks/PlaybackReporting.tsx

@@ -1,26 +1,12 @@
-import { Paragraph, Text } from 'components/Typography';
+import { Paragraph } from 'components/Typography';
 import React, { useCallback } from 'react';
 import { Switch } from 'react-native-gesture-handler';
-import styled from 'styled-components/native';
 import { t } from '@localisation';
 import { SafeScrollView } from 'components/SafeNavigatorView';
 import { useAppDispatch, useTypedSelector } from 'store';
 import { setEnablePlaybackReporting } from 'store/settings/actions';
-
-const Container = styled.View`
-    padding: 24px;
-`;
-
-const SwitchContainer = styled.View`
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin: 16px 0;
-`;
-
-const Label = styled(Text)`
-    font-size: 16px;
-`;
+import Container from '../components/Container';
+import { SwitchContainer, SwitchLabel } from '../components/Switch';
 
 export default function PlaybackReporting() {
     const isEnabled = useTypedSelector((state) => state.settings.enablePlaybackReporting);
@@ -35,7 +21,7 @@ export default function PlaybackReporting() {
             <Container>
                 <Paragraph>{t('playback-reporting-description')}</Paragraph>
                 <SwitchContainer>
-                    <Label>{t('playback-reporting')}</Label>
+                    <SwitchLabel>{t('playback-reporting')}</SwitchLabel>
                     <Switch value={isEnabled} onValueChange={toggleSwitch} />
                 </SwitchContainer>
             </Container>