From d893fe005d9d43e28b2926f8fed4f13165843d3b Mon Sep 17 00:00:00 2001 From: Kisaragi Hiu Date: Tue, 30 Apr 2024 03:36:05 +0900 Subject: [PATCH] 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. --- app.config.js | 3 +++ plugins/withAndroidStylesAccentColorPlugin.js | 25 +++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 plugins/withAndroidStylesAccentColorPlugin.js diff --git a/app.config.js b/app.config.js index dbec5619..528c8436 100644 --- a/app.config.js +++ b/app.config.js @@ -64,6 +64,8 @@ module.exports = function (config) { icon: './assets/icon.png', userInterfaceStyle: 'automatic', splash: SPLASH_CONFIG, + // hsl(211, 99%, 53%), same as palette.default.brandText + primaryColor: '#1083fe', ios: { supportsTablet: false, bundleIdentifier: 'xyz.blueskyweb.app', @@ -180,6 +182,7 @@ module.exports = function (config) { './plugins/withAndroidManifestPlugin.js', './plugins/withAndroidManifestFCMIconPlugin.js', './plugins/withAndroidStylesWindowBackgroundPlugin.js', + './plugins/withAndroidStylesAccentColorPlugin.js', './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js', './plugins/shareExtension/withShareExtensions.js', ].filter(Boolean), diff --git a/plugins/withAndroidStylesAccentColorPlugin.js b/plugins/withAndroidStylesAccentColorPlugin.js new file mode 100644 index 00000000..c4555378 --- /dev/null +++ b/plugins/withAndroidStylesAccentColorPlugin.js @@ -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 + }) +}