Skip to content

fix 🐛 theme revert and status bar behavior with ignoreSystemMode off #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jontsai merged 3 commits into from
Oct 4, 2024
Merged

fix 🐛 theme revert and status bar behavior with ignoreSystemMode off #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01ccefd
font family panel update
YosefAshenafi Sep 20, 2024
6e2a250
fix ignore system mode and default status bar
YosefAshenafi Sep 26, 2024
7add10f
remove comment
YosefAshenafi Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions features/appSettings/components/Entries/FontFamily.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Modal, TouchableOpacity, Text, Dimensions, View, StyleSheet, TouchableW
import { Ionicons } from '@expo/vector-icons';
import { Colors } from 'react-native-ui-lib';
import { AppSettingsEntryBase, type AppSettingsEntryBaseProps } from './Base';
import { ScrollView } from 'react-native-gesture-handler';

export interface AppSettingsModalFontFamilyProps<TSettings extends Record<string, any>>
extends Omit<AppSettingsEntryBaseProps, 'children'> {
Expand Down Expand Up @@ -72,15 +73,15 @@ export function AppSettingsModalFontFamily<TSettings extends Record<string, any>
</TouchableWithoutFeedback>
<View style={[styles.modalWrapper, { top: modalPosition.top, left: modalPosition.left }]}>
<View style={styles.caret} />
<View style={styles.modalContent}>
<ScrollView style={styles.modalContent}>
<Text style={styles.modalTitle}>Select an Option</Text>
{options.map((option, index) => (
<TouchableOpacity key={index} onPress={() => handleOptionSelect(option)} style={styles.option}>
<Text style={[styles.optionText, { fontFamily: option }]}>{option}</Text>
{option === value && <Ionicons name="checkmark" size={24} class='text-lame-300' />}
</TouchableOpacity>
))}
</View>
</ScrollView>
</View>
</Modal>
</AppSettingsEntryBase>
Expand All @@ -99,14 +100,15 @@ const styles = StyleSheet.create({
},
modalContent: {
backgroundColor: Colors.$backgroundDefault,
padding: 20,
paddingHorizontal: 20,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
width: 250,
height: 300,
},
caret: {
position: 'absolute',
Expand All @@ -125,6 +127,7 @@ const styles = StyleSheet.create({
fontSize: 20,
fontWeight: 'bold',
marginBottom: 20,
marginTop: 30,
},
option: {
display: 'flex',
Expand Down
43 changes: 23 additions & 20 deletions features/theme/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,15 @@ export interface CreateThemeOptions {
componentDefaults?: Record<ModifiableComponent, Record<string, any>>;
}

function setColorScheme(scheme: 'light' | 'dark', ignoreSystemMode: boolean) {
if (ignoreSystemMode) {
Colors.setScheme(scheme as SchemeType);
} else {
const systemScheme = Appearance.getColorScheme() as 'light' | 'dark' | null;
Colors.setScheme(systemScheme || 'default');
}
}

export function createTheme({
ignoreSystemMode,
supportDarkMode,
Expand Down Expand Up @@ -85,13 +94,7 @@ export function createTheme({
return (scheme: 'light' | 'dark') => {
setTheme((prev) => {
const next = { ...prev, scheme };

if (next.ignoreSystemMode) {
Colors.setScheme(scheme as SchemeType);
} else {
Colors.setScheme('default');
}

setColorScheme(scheme, next.ignoreSystemMode);
return next;
});
};
Expand All @@ -102,15 +105,18 @@ export function createTheme({
const [state, setState] = React.useState<'light' | 'dark'>(scheme);

React.useEffect(() => {
const systemScheme = Appearance.getColorScheme() as 'light' | 'dark' | null;
const initialScheme = ignoreSystemMode ? scheme : systemScheme ?? scheme;
Colors.setScheme(initialScheme as SchemeType);
setState(initialScheme);
setColorScheme(scheme, ignoreSystemMode);
setState(scheme);
}, [scheme, ignoreSystemMode]);

return state;
}

function useIgnoreSystemMode() {
const { ignoreSystemMode } = useAtomValue(atom);
return ignoreSystemMode
}

function ThemeProviderComponent({ children }: { children: React.ReactNode }) {
const { scheme, ignoreSystemMode } = useAtomValue(atom);
const [navThemeState, setNavThemeState] = React.useState(
Expand All @@ -121,7 +127,7 @@ export function createTheme({
);

React.useEffect(() => {
Colors.setScheme(scheme as SchemeType);
setColorScheme(scheme, ignoreSystemMode);
setNavThemeState(
createReactNavigationTheme(
availableSchemes[scheme],
Expand All @@ -130,7 +136,9 @@ export function createTheme({
);
}, [scheme, ignoreSystemMode]);

return <ThemeProvider value={navThemeState}>{children}</ThemeProvider>;
return (
<ThemeProvider value={navThemeState}>{children}</ThemeProvider>
);
}

function ThemeSettings() {
Expand All @@ -141,13 +149,7 @@ export function createTheme({
const dispatch = () => {
setState((prev) => {
const next = { ...prev, ignoreSystemMode: !ignoreSystemMode };

if (next.ignoreSystemMode) {
Colors.setScheme(prev.scheme || defaultScheme);
} else {
Colors.setScheme('default');
}

setColorScheme(prev.scheme || defaultScheme, next.ignoreSystemMode);
return next;
});
};
Expand Down Expand Up @@ -178,6 +180,7 @@ export function createTheme({
return {
useChangeTheme: useChangeScheme,
useThemeScheme,
useIgnoreSystemMode,
ThemeProvider: ThemeProviderComponent,
ThemeSettings,
};
Expand Down