parent
f09a8fcc8f
commit
9bbb4d508b
@ -1,5 +1,75 @@
|
||||
import {DarkTheme, Theme, useTheme} from "@react-navigation/native";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import DefaultTheme from "@react-navigation/native/src/theming/DefaultTheme";
|
||||
import {useColorScheme} from "react-native";
|
||||
|
||||
export const indigo = "rgba(14, 14, 44, 1)";
|
||||
export const purpleColor = "rgba(74, 74, 104, 1)";
|
||||
export const darksalmonColor = "rgba(233, 150, 122, 1)";
|
||||
export const greyColor = "rgba(140, 140, 161, 1)";
|
||||
export const whiteColor = "rgba(239, 239, 253, 1)";
|
||||
export const whiteColor = "rgba(239, 239, 253, 1)";
|
||||
|
||||
export const blackColor = "rgba(0, 0, 0, 1)";
|
||||
|
||||
|
||||
export default function usePersonalTheme() {
|
||||
|
||||
|
||||
useTheme()
|
||||
const theme = React.useContext(ThemeContext);
|
||||
const [isDark, setIsDark] = useState(false);
|
||||
|
||||
if (isDark) {
|
||||
theme.dark = true;
|
||||
theme.colors = MyDarkTheme.colors;
|
||||
}
|
||||
else {
|
||||
theme.dark = false;
|
||||
theme.colors = MyLightTheme.colors;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//const isDark = false;
|
||||
|
||||
|
||||
const MyDarkTheme: Theme = {
|
||||
dark: true,
|
||||
colors: {
|
||||
primary: indigo,
|
||||
background: purpleColor,
|
||||
card: darksalmonColor,
|
||||
text: whiteColor,
|
||||
border: whiteColor,
|
||||
notification: whiteColor,
|
||||
},
|
||||
};
|
||||
|
||||
const MyLightTheme: Theme = {
|
||||
dark: false,
|
||||
colors: {
|
||||
primary: whiteColor,
|
||||
background: greyColor,
|
||||
card: '',
|
||||
text: blackColor,
|
||||
border: blackColor,
|
||||
notification: blackColor,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
const ThemeContext = React.createContext<Theme>(MyDarkTheme);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
@ -1,33 +1,125 @@
|
||||
import React from "react";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
|
||||
import {
|
||||
Appearance,
|
||||
Button,
|
||||
FlatList,
|
||||
Image,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
SectionListComponent,
|
||||
StyleSheet, Switch, SwitchComponent,
|
||||
Text, useColorScheme,
|
||||
View
|
||||
} from "react-native";
|
||||
import usePersonalTheme, {
|
||||
blackColor,
|
||||
darksalmonColor,
|
||||
greyColor,
|
||||
indigo,
|
||||
purpleColor,
|
||||
whiteColor
|
||||
} from "../Theme";
|
||||
import {isEnabled} from "react-native/Libraries/Performance/Systrace";
|
||||
import {DarkTheme, DefaultTheme, useTheme} from "@react-navigation/native";
|
||||
import {storeTheme} from "../redux/store";
|
||||
|
||||
|
||||
import {FlatList, Image, SafeAreaView, ScrollView, SectionListComponent, StyleSheet, Text, View} from "react-native";
|
||||
import {indigo, purpleColor} from "../Theme";
|
||||
|
||||
export function SettingsScreen() {
|
||||
|
||||
const [isEnabled, setIsEnabled] = useState(false);
|
||||
|
||||
const toggleSwitch = () => {
|
||||
setIsEnabled(previousState => {
|
||||
const newIsEnabled = !previousState;
|
||||
const newTheme = newIsEnabled ? DarkTheme : DefaultTheme;
|
||||
console.log("newTheme", newTheme);
|
||||
storeTheme(newTheme);
|
||||
return newIsEnabled;
|
||||
});
|
||||
};
|
||||
|
||||
const styles = themeSettings();
|
||||
|
||||
return (
|
||||
<View style={styles.font}>
|
||||
<Text style={styles.text}>Settings Page</Text>
|
||||
<Text style={styles.text}>In Work</Text>
|
||||
</View>
|
||||
<SafeAreaView style={styles.container}>
|
||||
<Text style={styles.title}>Réglages</Text>
|
||||
<View style={styles.settingsContainer}>
|
||||
<View style={styles.settingRow}>
|
||||
<View style={styles.settingRow}>
|
||||
<Image style={styles.img} source={require('../assets/darkmode_icon.png')}/>
|
||||
<Text style={styles.settingText}>Dark Mode</Text>
|
||||
</View>
|
||||
<Switch style={styles.switch}
|
||||
trackColor={{ false: whiteColor, true: darksalmonColor }}
|
||||
thumbColor={isEnabled ? whiteColor :darksalmonColor}
|
||||
onValueChange={toggleSwitch}
|
||||
value={isEnabled}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export function themeSettings() {
|
||||
const theme = useTheme();
|
||||
|
||||
const colors = theme.colors;
|
||||
console.log("themeSettings", colors)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background,
|
||||
},
|
||||
header: {
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerText: {
|
||||
color: whiteColor,
|
||||
fontSize: 18,
|
||||
},
|
||||
settingsContainer: {
|
||||
backgroundColor: indigo,
|
||||
margin: 16,
|
||||
},
|
||||
title: {
|
||||
color: whiteColor,
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
marginTop: 7,
|
||||
marginLeft: 15,
|
||||
marginBottom: 8,
|
||||
},
|
||||
settingRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 12,
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
font: {
|
||||
backgroundColor: indigo,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
text: {
|
||||
fontSize: 24,
|
||||
color: 'darksalmon',
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
marginVertical: 20,
|
||||
}
|
||||
},
|
||||
settingText: {
|
||||
color: whiteColor,
|
||||
marginLeft: 10,
|
||||
},
|
||||
img: {
|
||||
marginLeft: 10,
|
||||
width: 30,
|
||||
height: 30,
|
||||
tintColor: darksalmonColor,
|
||||
},
|
||||
switch: {
|
||||
marginRight: 10,
|
||||
}
|
||||
});
|
||||
|
||||
return styles;
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
Loading…
Reference in new issue