优化暗模式

android/app/src/main/res/values-v29/styles.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <!-- Customize your theme here. -->
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    <item name="android:forceDarkAllowed">false</item>
+  </style>
+</resources>

src/components/common/Dialog.js

@@ -16,7 +16,7 @@ const styles = StyleSheet.create({
     maxWidth: '90%',
     minWidth: '60%',
     maxHeight: '78%',
-    backgroundColor: 'white',
+    // backgroundColor: 'white',
     borderRadius: 4,
     // shadowColor: '#000',
     // shadowOffset: {
@@ -70,7 +70,7 @@ export default ({
   const closeBtnComponent = useMemo(() => closeBtn ? <TouchableHighlight style={styles.closeBtn} underlayColor={theme.secondary_5} onPress={hideDialog}><Icon name="close" style={{ color: theme.secondary40, fontSize: 10 }} /></TouchableHighlight> : null, [closeBtn, hideDialog, theme])
 
   return (
-    <Modal visible={visible} hideModal={hideDialog} keyHide={keyHide} bgHide={bgHide} bgColor="rgba(0,0,0,0.2)">
+    <Modal visible={visible} hideModal={hideDialog} keyHide={keyHide} bgHide={bgHide} bgColor="rgba(50,50,50,.3)">
       <View style={{ ...styles.centeredView, paddingBottom: keyboardShown ? keyboardHeight : 0 }}>
         <View style={{ ...styles.modalView, backgroundColor: theme.primary }} onStartShouldSetResponder={() => true}>
           <View style={{ ...styles.header, backgroundColor: theme.secondary }}>

src/components/common/Popup.js

@@ -114,7 +114,7 @@ export default ({
   }, [position])
 
   return (
-    <Modal visible={visible} hideModal={hide} keyHide={keyHide} bgHide={bgHide} bgColor="rgba(0,0,0,0.2)">
+    <Modal visible={visible} hideModal={hide} keyHide={keyHide} bgHide={bgHide} bgColor="rgba(50,50,50,.3)">
       <StatusBar />
       <View style={{ ...styles.centeredView, ...centeredViewStyle, paddingBottom: keyboardShown ? keyboardHeight : 0 }}>
         <View style={{ ...styles.modalView, ...modalViewStyle, backgroundColor: theme.primary }} onStartShouldSetResponder={() => true}>

src/navigation/components/PactModal.js

@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(50,50,50,.3)',
   },
   modalView: {
     maxWidth: '90%',

src/navigation/components/VersionModal.js

@@ -236,7 +236,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.2)',
+    backgroundColor: 'rgba(50,50,50,.3)',
   },
   modalView: {
     maxWidth: '90%',

src/screens/PlayDetail/Portrait/Lyric.js

@@ -16,7 +16,7 @@ const LrcLine = memo(({ lrc, line, activeLine }) => {
         ...styles.lineText,
         fontSize: playerPortraitStyle.lrcFontSize / 10,
         lineHeight: playerPortraitStyle.lrcFontSize / 10 * 1.25,
-        color: activeLine == line ? theme.secondary : theme.normal30,
+        color: activeLine == line ? theme.secondary : theme.normal50,
       }}>{lrc.text}</Text>
       {
         lrc.translation
@@ -24,7 +24,7 @@ const LrcLine = memo(({ lrc, line, activeLine }) => {
             ...styles.lineTranslationText,
             fontSize: playerPortraitStyle.lrcFontSize / 10 * 0.8,
             lineHeight: playerPortraitStyle.lrcFontSize / 10 * 0.8 * 1.25,
-            color: activeLine == line ? theme.secondary : theme.normal30,
+            color: activeLine == line ? theme.secondary : theme.normal50,
           }}>{lrc.translation}</Text>
           : null
       }

src/theme/themes/black.js

@@ -2,21 +2,21 @@ export default {
   id: 'black',
   isDark: true,
   colors: {
-    primary: '#1a1a1a',
+    primary: '#000',
 
-    normal: '#bfbfbf',
-    normal10: '#b5b5b5',
-    normal20: '#ababab',
-    normal30: '#a1a1a1',
-    normal35: '#9c9c9c',
-    normal40: '#919191',
-    normal50: '#878787',
-    normal60: '#7d7d7d',
-    normal70: '#737373',
-    normal75: '#6e6e6e',
+    normal: '#a3a3a3',
+    normal10: '#999',
+    normal20: '#8f8f8f',
+    normal30: '#858585',
+    normal35: '#7a7a7a',
+    normal40: '#707070',
+    normal50: '#666',
+    normal60: '#5c5c5c',
+    normal70: '#525252',
+    normal75: '#4c4c4c',
 
     secondary_5: '#666',
-    secondary: '#575757',
+    secondary: '#999',
     secondary10: '#474747',
     secondary20: '#383838',
     secondary30: '#2e2e2e',

src/theme/themes/index.js

@@ -1,6 +1,7 @@
 import green from './green'
 import blue from './blue'
 import orange from './orange'
+import pink from './pink'
 import red from './red'
 import grey from './grey'
 import black from './black'
@@ -9,15 +10,8 @@ export default [
   green,
   blue,
   orange,
+  pink,
   red,
   grey,
   black,
 ]
-
-export { default as green } from './green'
-export { default as blue } from './blue'
-export { default as orange } from './orange'
-export { default as red } from './red'
-export { default as pink } from './pink'
-export { default as grey } from './grey'
-export { default as black } from './black'