javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement dark mode for Android

Browse Source
This commit is contained in:
Lei Nelissen
2020-07-26 17:02:18 +02:00
parent 9c24dede18
commit 57b79bf4e2
9 changed files with 79 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/App.tsx
View File

@@ -10,7 +10,6 @@ import {
DefaultTheme,
DarkTheme,
} from '@react-navigation/native';
import { colors } from './Colors';
interface State {
isReady: boolean;
@@ -55,8 +54,6 @@ export default class App extends Component<{}, State> {
return null;
}
console.log(colorScheme);
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistedStore}>

26
src/components/Colors.android.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { StyleSheet, PlatformColor } from 'react-native';
import { THEME_COLOR } from 'CONSTANTS';
export const colors = StyleSheet.create({
text: {
color: PlatformColor('?attr/colorOnBackground'),
},
view: {
backgroundColor: PlatformColor('?android:colorBackground'),
},
border: {
borderColor: '#88888844'
},
activeBackground: {
backgroundColor: `${THEME_COLOR}44`,
},
imageBackground: {
backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
},
modal: {
backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
},
input: {
backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
}
});

26
src/components/Colors.ios.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { StyleSheet, PlatformColor, DynamicColorIOS } from 'react-native';
import { THEME_COLOR } from 'CONSTANTS';
export const colors = StyleSheet.create({
text: {
color: PlatformColor('label'),
},
view: {
backgroundColor: PlatformColor('systemBackground'),
},
border: {
borderColor: PlatformColor('systemGray5Color'),
},
activeBackground: {
backgroundColor: DynamicColorIOS({ light: `${THEME_COLOR}16`, dark: `${THEME_COLOR}66` })
},
imageBackground: {
backgroundColor: PlatformColor('systemGray5Color')
},
modal: {
backgroundColor: DynamicColorIOS({ light: '#eeeeeeee', dark: '#222222ee' })
},
input: {
backgroundColor: PlatformColor('systemGray5Color'),
}
});

76
src/components/Colors.tsx
View File

@@ -1,76 +0,0 @@
import { StyleSheet, PlatformColor, Platform, DynamicColorIOS } from 'react-native';
import { THEME_COLOR } from 'CONSTANTS';
export const colors = StyleSheet.create({
text: {
...Platform.select({
ios: {
color: PlatformColor('label'),
},
android: {
color: PlatformColor('?android:attr/textColorPrimary'),
}
}),
},
view: {
...Platform.select({
ios: {
backgroundColor: PlatformColor('systemBackground'),
},
android: {
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
border: {
...Platform.select({
ios: {
borderColor: PlatformColor('systemGray5Color'),
},
android: {
borderColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
activeBackground: {
...Platform.select({
ios: {
backgroundColor: DynamicColorIOS({ light: `${THEME_COLOR}16`, dark: `${THEME_COLOR}66` })
},
android: {
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
imageBackground: {
...Platform.select({
ios: {
backgroundColor: PlatformColor('systemGray5Color')
},
android: {
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
modal: {
...Platform.select({
ios: {
backgroundColor: DynamicColorIOS({ light: '#eeeeeeee', dark: '#222222ee' })
},
android: {
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
input: {
...Platform.select({
ios: {
backgroundColor: PlatformColor('systemGray5Color'),
color: PlatformColor('label'),
},
android: {
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
}
});