android: fix various places still using default Material Teal (#3555)

These places include TextInput cursor, TextInput selection, and the
spinner (ActivityIndicator) --- the default Material Teal is out of
place wherever it shows up.

This sets Expo's primaryColor to #1083fe, which is the color that
defaultTheme.palette.default.brandText resolves to, then applies it as
the native accent color via a plugin because Expo doesn't apply the
accent color.
zio/stable
Kisaragi Hiu 2024-04-30 03:36:05 +09:00 committed by GitHub
parent 2feea51ae3
commit d893fe005d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 0 deletions

View File

@ -64,6 +64,8 @@ module.exports = function (config) {
icon: './assets/icon.png', icon: './assets/icon.png',
userInterfaceStyle: 'automatic', userInterfaceStyle: 'automatic',
splash: SPLASH_CONFIG, splash: SPLASH_CONFIG,
// hsl(211, 99%, 53%), same as palette.default.brandText
primaryColor: '#1083fe',
ios: { ios: {
supportsTablet: false, supportsTablet: false,
bundleIdentifier: 'xyz.blueskyweb.app', bundleIdentifier: 'xyz.blueskyweb.app',
@ -180,6 +182,7 @@ module.exports = function (config) {
'./plugins/withAndroidManifestPlugin.js', './plugins/withAndroidManifestPlugin.js',
'./plugins/withAndroidManifestFCMIconPlugin.js', './plugins/withAndroidManifestFCMIconPlugin.js',
'./plugins/withAndroidStylesWindowBackgroundPlugin.js', './plugins/withAndroidStylesWindowBackgroundPlugin.js',
'./plugins/withAndroidStylesAccentColorPlugin.js',
'./plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js', './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',
'./plugins/shareExtension/withShareExtensions.js', './plugins/shareExtension/withShareExtensions.js',
].filter(Boolean), ].filter(Boolean),

View File

@ -0,0 +1,25 @@
/**
* @file Set accent color to primaryColor from app.config.js.
* This way we get a sane default color for spinners, text inputs, etc.
*/
const {withAndroidStyles, AndroidConfig} = require('@expo/config-plugins')
module.exports = function withAndroidStylesAccentColorPlugin(appConfig) {
return withAndroidStyles(appConfig, function (decoratedAppConfig) {
try {
decoratedAppConfig.modResults = AndroidConfig.Styles.assignStylesValue(
decoratedAppConfig.modResults,
{
add: true,
parent: AndroidConfig.Styles.getAppThemeLightNoActionBarGroup(),
name: 'colorAccent',
value: '@color/colorPrimary',
},
)
} catch (e) {
console.error(`withAndroidStylesAccentColorPlugin failed`, e)
}
return decoratedAppConfig
})
}