Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import Slider from "@react-native-community/slider";
import {
useDisplaySettings,
getBrightnessLabel,
} from "../../hooks/useDisplaySettings";
import { useTheme } from "../../hooks/useTheme";
import { SettingsScreenScaffold } from "../../components/settings/SettingsScreenScaffold";
import {
SettingsCard,
SettingsRowHeader,
SettingsSwitchRow,
} from "../../components/settings";
export default function SettingsDisplay() {
const { isDark, colors } = useTheme();
const {
brightness,
autoBrightness,
darkMode,
colorIntensity,
setBrightness,
setAutoBrightness,
setDarkMode,
setColorIntensity,
hydrateFromStorage,
} = useDisplaySettings();
useEffect(() => {
void hydrateFromStorage();
}, [hydrateFromStorage]);
const colorIntensityLabel = `${colorIntensity}%`;
const trackInactive = isDark ? "#444" : "#eee";
return (
<SettingsScreenScaffold title="Display & Brightness">
<SettingsCard>
<SettingsRowHeader
title="Brightness"
valueLabel={getBrightnessLabel(brightness)}
/>
<Text style={[styles.rowSubtitle, { color: colors.textMuted }]}>
Adjust screen brightness level.
</Text>
<Slider
style={styles.slider}
minimumValue={0}
maximumValue={100}
step={1}
minimumTrackTintColor={colors.primary}
maximumTrackTintColor={trackInactive}
thumbTintColor={colors.text}
value={brightness}
onValueChange={setBrightness}
/>
</SettingsCard>
<SettingsCard>
<SettingsSwitchRow
title="Auto-Brightness"
subtitle="Adjust brightness based on ambient light."
value={autoBrightness}
onValueChange={setAutoBrightness}
subtitleBelow
/>
</SettingsCard>
<SettingsCard>
<Text style={[styles.rowTitle, { color: colors.text }]}>
Appearance
</Text>
<View style={{ marginTop: 10 }}>
<SettingsSwitchRow
title="Dark Mode"
subtitle="Switch to a darker color scheme."
value={darkMode}
onValueChange={setDarkMode}
/>
</View>
</SettingsCard>
<SettingsCard>
<SettingsRowHeader
title="Color Intensity"
valueLabel={colorIntensityLabel}
/>
<Text style={[styles.rowSubtitle, { color: colors.textMuted }]}>
Adjust vibrancy of colors throughout the app.
</Text>
<Slider
style={styles.slider}
minimumValue={50}
maximumValue={150}
step={1}
minimumTrackTintColor={colors.primary}
maximumTrackTintColor={trackInactive}
thumbTintColor={colors.text}
value={colorIntensity}
onValueChange={setColorIntensity}
/>
</SettingsCard>
</SettingsScreenScaffold>
);
}
const styles = StyleSheet.create({
rowTitle: {
fontSize: 15,
fontWeight: "600",
},
rowSubtitle: {
fontSize: 13,
marginTop: 4,
marginBottom: 8,
},
slider: {
marginTop: 4,
},
});
|