vuminh224/mmm-projet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme en cours

Browse Source
This commit is contained in:
trochas
2025-11-06 18:46:32 +01:00
parent 170ac974c2
commit 73eb7b416a
11 changed files with 186 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/Theme.tsx
View File

@@ -1,17 +0,0 @@
import {Appearance,ColorSchemeName } from "react-native";
import {lightTheme,darkTheme} from './themeColors';
declare global {
var theme: typeof lightTheme;
}
global.theme = Appearance.getColorScheme() === "light" ? lightTheme : darkTheme;
/*Appearance.addChangeListener(({ colorScheme }) => {
if(colorScheme==="light"){
global.theme = lightTheme;
}
else global.theme = darkTheme;
});*/

24
components/selectChantier.tsx
View File

@@ -1,7 +1,7 @@
import { ThemedView } from '@/components/themed-view';
import { useState } from 'react';
import { Button, GestureResponderEvent, ScrollView, StyleSheet, TextInput, View } from 'react-native';
import "@/components/Theme";
import { Button, GestureResponderEvent, ScrollView, StyleSheet, View } from 'react-native';
import { ThemedTextInput } from './themed-textinpute';
import { ThemedView } from "./themed-view";
export default function SelectChantier() {
@@ -17,13 +17,13 @@ export default function SelectChantier() {
const renderChantier = () => {
return(
<View style={styles.chantier}>
</View>
<ThemedView lvl={0} style={styles.chantier}>
</ThemedView>
);
};
return (
<View style={styles.selectZone}>
<ThemedView lvl={2} style={styles.selectZone}>
{!isOpen && (
<Button onPress={onPressOpen} title={"Open"}/>
)}
@@ -31,13 +31,13 @@ export default function SelectChantier() {
<ScrollView>
<Button onPress={onPressOpen} title={"Close"}/>
<View style={styles.searchZone}>
<View style={styles.searchMenu}>
<TextInput
<ThemedView lvl={0} style={styles.searchMenu}>
<ThemedTextInput placeholderTextColor="#808080"
placeholder='Rechercher un chantier'
value={search}
onChangeText={setSearch}
/>
</View>
</ThemedView>
</View>
<View>
@@ -45,7 +45,7 @@ export default function SelectChantier() {
</View>
</ScrollView>
)}
</View>
</ThemedView>
);
}
@@ -53,7 +53,6 @@ export default function SelectChantier() {
const styles = StyleSheet.create({
selectZone:{
position: 'absolute',
backgroundColor: global.theme.colors.c0,
width: "100%",
margin: 0,
borderRadius: 5,
@@ -66,7 +65,7 @@ const styles = StyleSheet.create({
gap: 8,
},
searchMenu:{
backgroundColor: global.theme.colors.c2,
color:'#FFAAAA',
borderRadius: 5,
width: "100%",
margin: 0,
@@ -80,6 +79,5 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
chantier:{
backgroundColor:'#202020'
}
});

25
components/themeColors.tsx
View File

@@ -1,25 +0,0 @@
export const lightTheme = {
colors: {
text: '#000000',
text2: '#505050',
c0: '#FFFFFF',
c1: '#F0F0F0',
c2: '#E0E0E0',
c3: '#D0D0D0',
c4: '#C0C0C0',
c5: '#B0B0B0',
},
};
export const darkTheme = {
colors: {
text: '#FFFFFF',
text2: '#B0B0B0',
c0:'#000000',
c1: '#101010',
c2: '#202020',
c3: '#303030',
c4: '#404040',
c5: '#505050',
},
};

10
components/themed-text.tsx
View File

@@ -5,6 +5,7 @@ import { useThemeColor } from '@/hooks/use-theme-color';
export type ThemedTextProps = TextProps & {
lightColor?: string;
darkColor?: string;
reverse?:boolean;
type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
};
@@ -12,10 +13,17 @@ export function ThemedText({
style,
lightColor,
darkColor,
reverse,
type = 'default',
...rest
}: ThemedTextProps) {
const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
var text:string = 'text'
if(reverse){
text += '_';
}
const color = useThemeColor({ light: lightColor, dark: darkColor }, text as 'text'|'text_');
return (
<Text

68
components/themed-textinpute.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { StyleSheet, TextInput, type TextInputProps } from 'react-native';
import { useThemeColor } from '@/hooks/use-theme-color';
export type ThemedTextInputProps = TextInputProps & {
lightColor?: string;
darkColor?: string;
reverse?:boolean;
type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
};
export function ThemedTextInput({
style,
lightColor,
darkColor,
reverse,
type = 'default',
...rest
}: ThemedTextInputProps) {
var text:string = 'text'
if(reverse){
text += '_';
}
const color = useThemeColor({ light: lightColor, dark: darkColor }, text as 'text'|'text_');
return (
<TextInput
style={[
{ color },
type === 'default' ? styles.default : undefined,
type === 'title' ? styles.title : undefined,
type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
type === 'subtitle' ? styles.subtitle : undefined,
type === 'link' ? styles.link : undefined,
style,
]}
{...rest}
/>
);
}
const styles = StyleSheet.create({
default: {
fontSize: 16,
lineHeight: 24,
},
defaultSemiBold: {
fontSize: 16,
lineHeight: 24,
fontWeight: '600',
},
title: {
fontSize: 32,
fontWeight: 'bold',
lineHeight: 32,
},
subtitle: {
fontSize: 20,
fontWeight: 'bold',
},
link: {
lineHeight: 30,
fontSize: 16,
color: '#0a7ea4',
},
});

13
components/themed-view.tsx
View File

@@ -5,10 +5,19 @@ import { useThemeColor } from '@/hooks/use-theme-color';
export type ThemedViewProps = ViewProps & {
lightColor?: string;
darkColor?: string;
lvl?:number;
};
export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
export function ThemedView({ style, lightColor, darkColor,lvl=1, ...otherProps }: ThemedViewProps) {
var lvlStr:string = "background";
if(lvl>=0 && lvl<6){
lvlStr+=lvl;
}
else lvlStr+='5';
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
return <View style={[{ backgroundColor }, style]} {...otherProps} />;
}