Skip to content
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

Dark Mode UI updated, Expo Go Updated, other small UI fixes #58

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Dark Mode UI updated, Expo Go Updated, other small UI fixes #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ebe683
Dark Mode implementation modified
JackGoldstein Jun 20, 2024
31dfbd0
Merge pull request #1 from JackGoldstein/DarkMode
JackGoldstein Jun 21, 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
145 changes: 94 additions & 51 deletions App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,106 @@
import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Home from './screens/Home';
import Settings from './screens/Settings';
import AlarmFeatures from './screens/AlarmFeatures';
import Alarms from './screens/Alarms';
import { DarkModeProvider } from './contexts/DarkModeContext';
import { DarkModeProvider, useDarkMode } from './contexts/DarkModeContext'; // Import useDarkMode

const Tab = createBottomTabNavigator();

const CustomLightTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: '#F0F0F0', // Custom background color
primary: '#F0F0F0', // Custom primary color
card: '#F0F0F0', // Custom color for navigation bar
text: 'black', // Custom text color
},
};

const CustomDarkTheme = {
...DarkTheme,
colors: {
...DarkTheme.colors,
background: '#333', // Custom background color
primary: '#333', // Custom primary color
card: '#333', // Custom color for navigation bar (lighter grey)
text: 'white', // Custom text color
},
};

export default function App() {
// TODO: FIX DARK MODE
return (
<DarkModeProvider>
<NavigationContainer>
<Tab.Navigator initialRouteName="Home">
<Tab.Screen
name="Clock"
component={Home}
options={{
tabBarLabel: 'Clock',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="clock" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Alarms"
component={Alarms}
options={{
tabBarLabel: 'Alarms',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="alarm-multiple" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Alarm Features"
component={AlarmFeatures}
options={{
tabBarLabel: 'Alarm Features',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="mace" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Settings"
component={Settings}
options={{
tabBarLabel: 'Settings',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="cog" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
</DarkModeProvider>
);
return (
<DarkModeProvider>
<AppContent />
</DarkModeProvider>
);
}

function AppContent() {
const { isDarkMode } = useDarkMode();

// Define dynamic theme
const navigationTheme = isDarkMode ? CustomDarkTheme : CustomLightTheme;

return (
<NavigationContainer theme={navigationTheme}>
<Tab.Navigator
initialRouteName="Home"
screenOptions={({ route }) => ({
tabBarIcon: ({ color, size }) => {
let iconName;

if (route.name === 'Clock') {
iconName = 'clock';
} else if (route.name === 'Alarms') {
iconName = 'alarm-multiple';
} else if (route.name === 'Alarm Features') {
iconName = 'mace';
} else if (route.name === 'Settings') {
iconName = 'cog';
}

// You can return any component that you like here!
return <MaterialCommunityIcons name={iconName} color={color} size={size} />;
},
tabBarActiveTintColor: isDarkMode ? 'white' : 'black',
tabBarInactiveTintColor: isDarkMode ? 'gray' : 'darkgray',
tabBarStyle: { backgroundColor: isDarkMode ? '#333' : '#f8f9fa' },
})}
>
<Tab.Screen
name="Clock"
component={Home}
options={{
tabBarLabel: 'Clock',
}}
/>
<Tab.Screen
name="Alarms"
component={Alarms}
options={{
tabBarLabel: 'Alarms',
}}
/>
<Tab.Screen
name="Alarm Features"
component={AlarmFeatures}
options={{
tabBarLabel: 'Alarm Features',
}}
/>
<Tab.Screen
name="Settings"
component={Settings}
options={{
tabBarLabel: 'Settings',
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
59 changes: 44 additions & 15 deletions components/SettingsToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,52 @@
import React from 'react';
import { View, Text, Switch } from 'react-native';
import { View, Text, Switch, StyleSheet } from 'react-native';
import { settingStyles } from '../styles/index';
import { useDarkMode } from '../contexts/DarkModeContext';

interface SettingsToggleProp {
name: string;
value: boolean;
onValueChange: (value: boolean) => void;
name: string;
value: boolean;
onValueChange: (value: boolean) => void;
}

const SettingsToggle: React.FC<SettingsToggleProp> = ({ name, value, onValueChange }) => {
return (
<View style={settingStyles.container}>
<View style={settingStyles.content}>
<Text style={settingStyles.settingText}>{name}</Text>
</View>
<View style={settingStyles.controls}>
<Switch style={settingStyles.toggle} value={value} onValueChange={onValueChange} />
</View>
</View>
);
}
const { isDarkMode } = useDarkMode(); // Get dark mode state
const containerStyle = isDarkMode ? styles.darkContainer : settingStyles.container;
const textStyle = isDarkMode ? { color: 'white' } : { color: 'black' };

return (
<View style={containerStyle}>
<View style={settingStyles.content}>
<Text style={[settingStyles.settingText, textStyle]}>{name}</Text>
</View>
<View style={settingStyles.controls}>
<Switch
style={settingStyles.toggle}
value={value}
onValueChange={onValueChange}
trackColor={{ false: 'gray', true: 'green' }}
thumbColor={isDarkMode ? '#f4f3f4' : '#f4f3f4'}
/>
</View>
</View>
);
};

const styles = StyleSheet.create({
darkContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#333', // Dark mode background color
padding: 20,
marginVertical: 10,
borderRadius: 10,
elevation: 3,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
},
});

export default SettingsToggle;
Loading