新增黑色皮肤“黑灯瞎火”

publish/changeLog.md

@@ -3,6 +3,7 @@
 - 为搜索、歌单、排行榜的歌曲菜单添加分享“分享歌曲”按钮
 - 新增设置-基本设置-分享设置，它用于控制歌曲菜单的分享行为，默认使用系统分享
 - 新增是否在通知栏显示歌曲图片设置，默认开启（原来的行为）
+- 新增黑色皮肤“黑灯瞎火”
 
 ### 修复
 

src/components/MusicAddModal.js

@@ -32,7 +32,7 @@ const Title = ({ musicInfo, isMove }) => {
   const { t } = useTranslation()
   return (
     musicInfo
-      ? <Text style={styles.title}>{t(isMove ? 'list_add_title_first_move' : 'list_add_title_first_add')} <Text style={{ color: theme.secondary }} >{musicInfo.name}</Text> {t('list_add_title_last')}</Text>
+      ? <Text style={{ ...styles.title, color: theme.normal }}>{t(isMove ? 'list_add_title_first_move' : 'list_add_title_first_add')} <Text style={{ color: theme.secondary }} >{musicInfo.name}</Text> {t('list_add_title_last')}</Text>
       : null
   )
 }

src/components/MusicMultiAddModal.js

@@ -30,7 +30,7 @@ const Title = ({ list, isMove }) => {
   const { t } = useTranslation()
   return (
     list.length
-      ? <Text style={styles.title}>{t(isMove ? 'list_multi_add_title_first_move' : 'list_multi_add_title_first_add')} <Text style={{ color: theme.secondary }} >{list.length}</Text> {t('list_multi_add_title_last')}</Text>
+      ? <Text style={{ ...styles.title, color: theme.normal }}>{t(isMove ? 'list_multi_add_title_first_move' : 'list_multi_add_title_first_add')} <Text style={{ color: theme.secondary }} >{list.length}</Text> {t('list_multi_add_title_last')}</Text>
       : null
   )
 }

src/components/common/Dialog.js

@@ -72,7 +72,7 @@ export default ({
   return (
     <Modal visible={visible} hideModal={hideDialog} keyHide={keyHide} bgHide={bgHide} bgColor="rgba(0,0,0,0.2)">
       <View style={{ ...styles.centeredView, paddingBottom: keyboardShown ? keyboardHeight : 0 }}>
-        <View style={styles.modalView} onStartShouldSetResponder={() => true}>
+        <View style={{ ...styles.modalView, backgroundColor: theme.primary }} onStartShouldSetResponder={() => true}>
           <View style={{ ...styles.header, backgroundColor: theme.secondary }}>
             <Text style={{ ...styles.title, color: theme.primary }} numberOfLines={1}>{title}</Text>
             {closeBtnComponent}

src/components/common/Menu.js

@@ -92,7 +92,7 @@ const Menu = ({
 
   // console.log(menuStyle)
   return (
-    <View style={{ ...styles.menu, ...menuStyle }} onStartShouldSetResponder={() => true}>
+    <View style={{ ...styles.menu, ...menuStyle, backgroundColor: theme.primary }} onStartShouldSetResponder={() => true}>
       <Animated.ScrollView keyboardShouldPersistTaps={'always'}>
         {
           menus.map((menu, index) => (

src/components/common/Popup.js

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react'
-import { StyleSheet, View, Text, TouchableOpacity, StatusBar } from 'react-native'
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
 
 import Modal from './Modal'
 import { Icon } from '@/components/common/Icon'
 import { useGetter } from '@/store'
 import { useKeyboard } from '@/utils/hooks'
+import StatusBar from '@/components/common/StatusBar'
 
 const styles = StyleSheet.create({
   centeredView: {
@@ -114,7 +115,7 @@ export default ({
 
   return (
     <Modal visible={visible} hideModal={hide} keyHide={keyHide} bgHide={bgHide} bgColor="rgba(0,0,0,0.2)">
-      <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
+      <StatusBar />
       <View style={{ ...styles.centeredView, ...centeredViewStyle, paddingBottom: keyboardShown ? keyboardHeight : 0 }}>
         <View style={{ ...styles.modalView, ...modalViewStyle, backgroundColor: theme.primary }} onStartShouldSetResponder={() => true}>
           <View style={styles.header}>

src/components/common/StatusBar.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { StatusBar as RNStatusBar } from 'react-native'
+import { useGetter } from '@/store'
+
+const StatusBar = function() {
+  const statusBarStyle = useGetter('common', 'statusBarStyle')
+  return <RNStatusBar backgroundColor="rgba(0,0,0,0)" barStyle={statusBarStyle} translucent={true} />
+}
+
+StatusBar.currentHeight = RNStatusBar.currentHeight ?? 0
+
+export default StatusBar

src/components/layout/Header.js

@@ -1,10 +1,11 @@
 import React from 'react'
-import { View, Text, StyleSheet, SafeAreaView, StatusBar } from 'react-native'
+import { View, Text, StyleSheet, SafeAreaView } from 'react-native'
+import StatusBar from '@/components/common/StatusBar'
 
 const Header = state => {
   return (
     <View style={style.header}>
-      <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
+      <StatusBar />
       <SafeAreaView style={style.container}>
         {state.menu.map((item, index) => <View style={style.btn} key={item.id}><Text style={style.btnText} onPress={() => this.handlePress(item, index)}>{item.name}</Text></View>)}
       </SafeAreaView>

src/config/index.js

@@ -22,5 +22,3 @@ export const storageDataPrefix = {
   syncHostHistory: '@sync_host_history',
   notificationTipEnable: '@notification_tip_enable',
 }
-
-export const ITEM_HEIGHT = 60

src/lang/en_us.json

@@ -222,6 +222,7 @@
   "storage_permission_tip_disagree_ask_again": "This feature cannot be used because you have permanently denied LX access to the phone storage.\nIf you want to continue, you need to go to System Permission Management Set Luo Xue’s storage permission to allow.",
   "storage_permission_tip_request": "To use this function, you need to allow LX to access the phone storage. Do you agree and continue?",
   "sync_status_disabled": "Not connected",
+  "theme_black": "Black",
   "theme_blue": "Blue",
   "theme_blue2": "Purple Blue",
   "theme_green": "Green",

src/lang/zh_cn.json

@@ -224,6 +224,7 @@
   "storage_permission_tip_disagree_ask_again": "此功能无法使用，因为你已经永久拒绝洛雪访问手机存储😫。\n若想继续，你需要去👉系统权限管理👈将洛雪的存储权限设置为允许",
   "storage_permission_tip_request": "使用此功能需要允许洛雪访问手机存储，是否同意并继续？",
   "sync_status_disabled": "未连接",
+  "theme_black": "黑灯瞎火",
   "theme_blue": "蓝田生玉",
   "theme_blue2": "清热版蓝",
   "theme_green": "绿意盎然",

src/navigation/components/PactModal.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect } from 'react'
-import { StyleSheet, View, Text, ScrollView, TouchableOpacity } from 'react-native'
+import { StyleSheet, View, Text, ScrollView } from 'react-native'
 import { Navigation } from 'react-native-navigation'
 
 import Button from '@/components/common/Button'
@@ -70,7 +70,7 @@ const VersionModal = ({ componentId }) => {
 
   return (
     <View style={{ ...styles.centeredView }}>
-      <View style={styles.modalView}>
+      <View style={{ ...styles.modalView, backgroundColor: theme.primary }}>
         <View style={{ ...styles.header, backgroundColor: theme.secondary }}></View>
         <View style={styles.main}>
           <Text style={{ ...styles.title, color: theme.normal }}>许可协议</Text>

src/navigation/components/VersionModal.js

@@ -169,7 +169,7 @@ const VersionModal = ({ componentId }) => {
 
   return (
     <View style={{ ...styles.centeredView }}>
-      <View style={styles.modalView}>
+      <View style={{ ...styles.modalView, backgroundColor: theme.primary }}>
         <View style={{ ...styles.header, backgroundColor: theme.secondary }}></View>
         <View style={styles.main}>
           <Text style={{ ...styles.title, color: theme.normal }}>{title}</Text>

src/navigation/navigation.js

@@ -9,6 +9,11 @@ import {
   // SETTING_SCREEN,
 } from './screenNames'
 
+import { getter, getStore } from '@/store'
+
+const store = getStore()
+const getTheme = () => getter('common', 'theme')(store.getState())
+const getStatusBarStyle = () => getter('common', 'isDarkTheme')(store.getState()) ? 'light' : 'dark'
 
 export function pushHomeScreen() {
   /*
@@ -44,6 +49,7 @@ export function pushHomeScreen() {
     })
   */
 
+  const theme = getTheme()
   return Navigation.setRoot({
     root: {
       stack: {
@@ -59,15 +65,15 @@ export function pushHomeScreen() {
               statusBar: {
                 drawBehind: true,
                 visible: true,
-                style: 'dark',
+                style: getStatusBarStyle(),
                 backgroundColor: 'transparent',
               },
               navigationBar: {
                 // visible: false,
-                backgroundColor: 'white',
+                backgroundColor: theme.primary,
               },
               layout: {
-                componentBackgroundColor: '#fff',
+                componentBackgroundColor: theme.primary,
               },
             },
           },
@@ -110,6 +116,9 @@ export function pushPlayDetailScreen(componentId, id) {
     })
   */
   InteractionManager.runAfterInteractions(() => {
+    const theme = getTheme()
+    console.log(getStatusBarStyle((store.getState())))
+
     Navigation.push(componentId, {
       component: {
         name: PLAY_DETAIL_SCREEN,
@@ -122,15 +131,15 @@ export function pushPlayDetailScreen(componentId, id) {
           statusBar: {
             drawBehind: true,
             visible: true,
-            style: 'dark',
+            style: getStatusBarStyle(),
             backgroundColor: 'transparent',
           },
           navigationBar: {
             // visible: false,
-            backgroundColor: 'white',
+            backgroundColor: theme.primary,
           },
           layout: {
-            componentBackgroundColor: '#fff',
+            componentBackgroundColor: theme.primary,
           },
           animations: {
             push: {
@@ -200,6 +209,7 @@ export function pushPlayDetailScreen(componentId, id) {
   })
 }
 export function pushSonglistDetailScreen(componentId, id) {
+  const theme = getTheme()
   InteractionManager.runAfterInteractions(() => {
     Navigation.push(componentId, {
       component: {
@@ -213,15 +223,15 @@ export function pushSonglistDetailScreen(componentId, id) {
           statusBar: {
             drawBehind: true,
             visible: true,
-            style: 'dark',
+            style: getStatusBarStyle(),
             backgroundColor: 'transparent',
           },
           navigationBar: {
             // visible: false,
-            backgroundColor: 'white',
+            backgroundColor: theme.primary,
           },
           layout: {
-            componentBackgroundColor: '#fff',
+            componentBackgroundColor: theme.primary,
           },
           animations: {
             push: {
@@ -332,6 +342,7 @@ export function pushCommentScreen(componentId) {
     })
   */
   InteractionManager.runAfterInteractions(() => {
+    const theme = getTheme()
     Navigation.push(componentId, {
       component: {
         name: COMMENT_SCREEN,
@@ -344,15 +355,15 @@ export function pushCommentScreen(componentId) {
           statusBar: {
             drawBehind: true,
             visible: true,
-            style: 'dark',
+            style: getStatusBarStyle(),
             backgroundColor: 'transparent',
           },
           navigationBar: {
             // visible: false,
-            backgroundColor: 'white',
+            backgroundColor: theme.primary,
           },
           layout: {
-            componentBackgroundColor: '#fff',
+            componentBackgroundColor: theme.primary,
           },
           animations: {
             push: {
@@ -426,7 +437,7 @@ export function pushCommentScreen(componentId) {
 //         statusBar: {
 //           drawBehind: true,
 //           visible: true,
-//           style: 'dark',
+//           style: getStatusBarStyle(),
 //           backgroundColor: 'transparent',
 //         },
 //         animations: {

src/navigation/utils.js

@@ -1,6 +1,11 @@
 import { Navigation } from 'react-native-navigation'
 import { VERSION_MODAL, PACT_MODAL } from './screenNames'
 
+import { getter, getStore } from '@/store'
+
+const store = getStore()
+const getStatusBarStyle = () => getter('common', 'isDarkTheme')(store.getState()) ? 'light' : getStatusBarStyle()
+
 export const dismissOverlay = compId => Navigation.dismissOverlay(compId)
 
 export const pop = compId => Navigation.pop(compId)
@@ -21,7 +26,7 @@ export const showPactModal = () => {
         statusBar: {
           drawBehind: true,
           visible: true,
-          style: 'dark',
+          style: getStatusBarStyle(),
           backgroundColor: 'transparent',
           animate: true,
         },
@@ -65,7 +70,7 @@ export const showVersionModal = () => {
         statusBar: {
           drawBehind: true,
           visible: true,
-          style: 'dark',
+          style: getStatusBarStyle(),
           backgroundColor: 'transparent',
           animate: true,
         },

src/screens/Comment/components/Header.js

@@ -1,12 +1,13 @@
 import React, { memo } from 'react'
 
-import { View, StyleSheet, StatusBar, TouchableOpacity, Text } from 'react-native'
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
 
 import { Icon } from '@/components/common/Icon'
 import { useGetter, useDispatch } from '@/store'
 import { pop } from '@/navigation'
 import { useTranslation } from '@/plugins/i18n'
 // import { AppColors } from '@/theme'
+import StatusBar from '@/components/common/StatusBar'
 
 
 export default memo(({ musicInfo }) => {
@@ -20,7 +21,7 @@ export default memo(({ musicInfo }) => {
 
   return (
     <View style={{ ...styles.header, backgroundColor: theme.primary }} nativeID="header">
-      <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
+      <StatusBar />
       <View style={{ ...styles.container }}>
         <TouchableOpacity onPress={back} style={{ ...styles.button }}>
           <Icon name="chevron-left" style={{ color: theme.normal }} size={24} />

src/screens/Home/SongList/ListItem.js

@@ -1,8 +1,9 @@
 import React, { memo } from 'react'
 import { View, Text, Image, StyleSheet, Platform, TouchableOpacity } from 'react-native'
-import { AppColors } from '@/theme'
+import { useGetter } from '@/store'
 
 export default memo(({ data: { index, item }, width, onPress = () => {} }) => {
+  const theme = useGetter('common', 'theme')
   const handlePress = () => {
     onPress(item, index)
   }
@@ -10,13 +11,13 @@ export default memo(({ data: { index, item }, width, onPress = () => {} }) => {
     item.source
       ? (
           <View style={{ ...styles.listItem, width: width - 20 }}>
-            <View style={{ ...styles.listItemImg, backgroundColor: AppColors.primary }}>
+            <View style={{ ...styles.listItemImg, backgroundColor: theme.primary }}>
               <TouchableOpacity activeOpacity={0.5} onPress={handlePress}>
                 <Image source={{ uri: item.img }} nativeID={`pic${item.id}`} style={{ width: width - 20, height: width - 20 }} borderRadius={4} />
               </TouchableOpacity>
             </View>
             <TouchableOpacity activeOpacity={0.5} onPress={handlePress}>
-              <Text style={{ ...styles.listItemTitle, color: AppColors.normal }} nativeID={`title${item.id}`} numberOfLines={ 2 }>{item.name}</Text>
+              <Text style={{ ...styles.listItemTitle, color: theme.normal }} nativeID={`title${item.id}`} numberOfLines={ 2 }>{item.name}</Text>
             </TouchableOpacity>
             {/* <Text>{JSON.stringify(item)}</Text> */}
           </View>

src/screens/Home/components/Header.js

@@ -1,9 +1,10 @@
 import React, { useMemo } from 'react'
-import { View, Text, StyleSheet, StatusBar, TouchableOpacity } from 'react-native'
+import { View, StyleSheet, TouchableOpacity } from 'react-native'
 // import Button from '@/components/common/Button'
 import { Icon } from '@/components/common/Icon'
 import { useGetter, useDispatch } from '@/store'
 // import { navigations } from '@/navigation'
+import StatusBar from '@/components/common/StatusBar'
 
 const useActive = index => {
   const activeIndex = useGetter('common', 'navActiveIndex')
@@ -34,7 +35,7 @@ const Header = ({ componentId }) => {
 
   return (
     <View style={{ ...styles.header, backgroundColor: theme.primary }}>
-      <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
+      <StatusBar />
       <View style={styles.container}>
         {/* <View style={styles.left}> */}
           {menus.map((item, index) => <HeaderItem info={item} index={index} key={item.id} onPress={setNavActiveIndex} />)}

src/screens/Home/components/PlayerLandscape.js

@@ -1,14 +1,14 @@
 import React from 'react'
-import { View, ScrollView, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
+import { View, ScrollView, Text, StyleSheet, Image, TouchableOpacity, useGetter } from 'react-native'
 import Button from '@/components/common/Button'
 import { Icon } from '@/components/common/Icon'
-import { AppColors } from '@/theme'
 
 export default ({
   asideWidth, targetMusic, toggleNextPlayMode,
   togglePlay, playIcon, playModeIcon, actions,
   menu, homeViewPageIndex, onLayout = () => {}, navPress = () => {},
 }) => {
+  const theme = useGetter('common', 'theme')
   const navBtnWidth = asideWidth * 0.5 - 0.1
   const imgWidth = asideWidth * 0.3
   const paddingBottom = asideWidth * 0.05
@@ -20,13 +20,13 @@ export default ({
   const navIconSize = asideWidth * 0.15
   const iconSize = asideWidth * 0.15
 
-  return <View style={{ ...styles.header, backgroundColor: AppColors.primary }} onLayout={onLayout}>
+  return <View style={{ ...styles.header, backgroundColor: theme.primary }} onLayout={onLayout}>
     <ScrollView style={{ ...styles.navBtnContainer }}>
       <View style={{ width: '100%', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}>
         {
           menu.map((item, index) =>
             <Button style={{ ...styles.btn, width: navBtnWidth, height: navBtnWidth }} key={index} onPress={() => navPress(item, index)}>
-              <Icon name={item.icon} style={{ color: homeViewPageIndex == index ? AppColors.secondary : AppColors.normal10 }} size={navIconSize} />
+              <Icon name={item.icon} style={{ color: homeViewPageIndex == index ? theme.secondary : theme.normal10 }} size={navIconSize} />
             </Button>)
         }
       </View>
@@ -36,24 +36,24 @@ export default ({
       <View style={{ flexShrink: 0, width: '100%', flexDirection: 'row', flexWrap: 'wrap' }}>
         <TouchableOpacity activeOpacity={0.5} onPress={toggleNextPlayMode}>
           <Text style={{ ...styles.cotrolBtn, ...btnStyle }}>
-            <Icon name={playModeIcon} style={{ color: AppColors.secondary10 }} size={iconSize} />
+            <Icon name={playModeIcon} style={{ color: theme.secondary10 }} size={iconSize} />
           </Text>
         </TouchableOpacity>
       </View>
       <View style={{ flexShrink: 0, width: '100%', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-evenly' }}>
         <TouchableOpacity activeOpacity={0.5} onPress={actions.playPrev}>
           <Text style={{ ...styles.cotrolBtn, ...btnStyle, transform: [{ rotate: '180deg' }] }}>
-            <Icon name='nextMusic' style={{ color: AppColors.secondary10 }} size={iconSize} />
+            <Icon name='nextMusic' style={{ color: theme.secondary10 }} size={iconSize} />
           </Text>
         </TouchableOpacity>
         <TouchableOpacity activeOpacity={0.5} onPress={togglePlay}>
           <Text style={{ ...styles.cotrolBtn, ...btnStyle }}>
-            <Icon name={playIcon} style={{ color: AppColors.secondary10 }} size={iconSize} />
+            <Icon name={playIcon} style={{ color: theme.secondary10 }} size={iconSize} />
           </Text>
         </TouchableOpacity>
         <TouchableOpacity activeOpacity={0.5} onPress={actions.playNext}>
           <Text style={{ ...styles.cotrolBtn, ...btnStyle }}>
-            <Icon name='nextMusic' style={{ color: AppColors.secondary10 }} size={iconSize} />
+            <Icon name='nextMusic' style={{ color: theme.secondary10 }} size={iconSize} />
           </Text>
         </TouchableOpacity>
       </View>
@@ -61,7 +61,7 @@ export default ({
         <View style={{ borderRadius: 4, marginTop: paddingBottom / 2 }} elevation={1}>
           <Image source={{ uri: targetMusic.img }} borderRadius={4} style={{
             ...styles.playInfoImg,
-            backgroundColor: AppColors.primary,
+            backgroundColor: theme.primary,
             width: imgWidth,
             height: imgWidth,
           }} />

src/screens/Home/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 
-import { View, StatusBar, StyleSheet } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 import Header from './components/Header'
 import HeaderLandscape from './components/HeaderLandscape'
 // import Aside from './components/Aside'
@@ -8,6 +8,7 @@ import Main from './components/Main'
 import FooterPlayer from './components/FooterPlayer'
 import { useGetter, useDispatch } from '@/store'
 import { useDimensions } from '@/utils/hooks'
+import StatusBar from '@/components/common/StatusBar'
 
 const styles = StyleSheet.create({
   container: {
@@ -20,7 +21,7 @@ const styles = StyleSheet.create({
 const Landscape = (props) => {
   return (
     <>
-      <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
+      <StatusBar />
       <View style={{ ...styles.container, backgroundColor: props.theme.primary }}>
         <HeaderLandscape componentId={props.componentId} />
         <View style={{ flex: 1, flexDirection: 'column', height: '100%', overflow: 'hidden' }}>

src/screens/PlayDetail/Landscape/index.js

@@ -1,8 +1,9 @@
 import React, { memo, useEffect, useCallback, useMemo } from 'react'
-import { View, Text, StyleSheet, StatusBar } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
 import { screenkeepAwake, screenUnkeepAwake } from '@/utils/utils'
 import { onNavigationComponentDidDisappearEvent } from '@/navigation'
+import StatusBar from '@/components/common/StatusBar'
 
 import Header from './components/Header'
 import Pic from './Pic'
@@ -37,7 +38,7 @@ export default memo(({ componentId, animated }) => {
   const component = useMemo(() => {
     return (
       <>
-        <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
+        <StatusBar />
         <View style={{ ...styles.container, backgroundColor: theme.primary }}>
           <View style={styles.left}>
             <Header />

src/screens/PlayDetail/Portrait/components/Header.js

@@ -1,6 +1,6 @@
 import React, { memo, useState, useCallback } from 'react'
 
-import { View, StyleSheet, StatusBar, TouchableOpacity, Text } from 'react-native'
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
 
 import { Icon } from '@/components/common/Icon'
 import { useGetter, useDispatch } from '@/store'
@@ -9,6 +9,7 @@ import Popup from '@/components/common/Popup'
 import Slider from '@/components/common/Slider'
 import { useTranslation } from '@/plugins/i18n'
 // import { AppColors } from '@/theme'
+import StatusBar from '@/components/common/StatusBar'
 
 const LrcFontSizeStyles = StyleSheet.create({
   content: {
@@ -85,7 +86,7 @@ export default memo(() => {
 
   return (
     <View style={{ ...styles.header, backgroundColor: theme.primary }} nativeID="header">
-      <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
+      <StatusBar />
       <View style={{ ...styles.container }}>
         <TouchableOpacity onPress={back} style={styles.button}>
           <Icon name="chevron-left" style={{ color: theme.normal }} size={24} />

src/screens/SonglistDetail/Header.js

@@ -1,18 +1,19 @@
-import React, { memo, useMemo } from 'react'
+import React, { memo } from 'react'
 import { View, Text, StyleSheet, Image } from 'react-native'
-import { AppColors, BorderWidths } from '@/theme'
+import { BorderWidths } from '@/theme'
 import { useGetter } from '@/store'
 import ButtonBar from './ActionBar'
 
 const Header = memo(({ animatePlayed }) => {
+  const theme = useGetter('common', 'theme')
   const selectListInfo = useGetter('songList', 'selectListInfo')
   const { info: listDetailDataInfo = {} } = useGetter('songList', 'listDetailData')
   const playCount = selectListInfo.play_count || listDetailDataInfo.play_count
 
   return (
-    <View style={{ ...styles.container, borderBottomColor: AppColors.borderColor }}>
+    <View style={{ ...styles.container, borderBottomColor: theme.borderColor }}>
       <View style={{ flexDirection: 'row', flexGrow: 0, flexShrink: 0, padding: 10 }}>
-        <View style={{ ...styles.listItemImg, backgroundColor: AppColors.primary }}>
+        <View style={{ ...styles.listItemImg, backgroundColor: theme.primary }}>
           <Image nativeID={`pic${selectListInfo.id}Dest`} source={{ uri: selectListInfo.img || listDetailDataInfo.img || null }} borderRadius={4} style={{ flex: 1, resizeMode: 'cover', justifyContent: 'flex-end' }} />
             {
               playCount && animatePlayed
@@ -21,9 +22,9 @@ const Header = memo(({ animatePlayed }) => {
             }
         </View>
         <View style={{ flexDirection: 'column', flexGrow: 1, flexShrink: 1, paddingLeft: 5 }} nativeID="title">
-          <Text style={{ fontSize: 13, color: AppColors.normal }} numberOfLines={ 1 }>{selectListInfo.name || listDetailDataInfo.name}</Text>
+          <Text style={{ fontSize: 13, color: theme.normal }} numberOfLines={ 1 }>{selectListInfo.name || listDetailDataInfo.name}</Text>
           <View style={{ flexGrow: 0, flexShrink: 1 }}>
-            <Text style={{ fontSize: 10, color: AppColors.normal40 }} numberOfLines={ 4 }>{selectListInfo.desc || listDetailDataInfo.desc}</Text>
+            <Text style={{ fontSize: 10, color: theme.normal40 }} numberOfLines={ 4 }>{selectListInfo.desc || listDetailDataInfo.desc}</Text>
           </View>
         </View>
       </View>

src/screens/SonglistDetail/index.js

@@ -1,9 +1,10 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'
-import { View, StatusBar } from 'react-native'
+import { View } from 'react-native'
 import List from './List'
 import { useGetter, useDispatch } from '@/store'
 import PlayerPortrait from './PlayerPortrait'
 import { useNavigationComponentDidAppear } from '@/navigation'
+import StatusBar from '@/components/common/StatusBar'
 
 
 export default ({ componentId }) => {
@@ -27,7 +28,7 @@ export default ({ componentId }) => {
 
   return (
     <View style={{ flex: 1, backgroundColor: theme.primary, paddingTop: StatusBar.currentHeight }}>
-      <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
+      <StatusBar />
       <View style={{ flex: 1 }}>
         <List animatePlayed={animatePlayed} />
       </View>

src/store/getter.js

@@ -5,19 +5,26 @@ import * as modules from './modules'
 // console.log(modules)
 const defaultGetter = state => state
 
+const getter = (moduleName, key) => {
+  const getters = modules[moduleName].getter
+  if (getters && getters[key]) return getters[key]
+  console.warn('getter not found:', moduleName, key)
+  return defaultGetter
+}
+
 const useGetter = (moduleName, key, props) => {
-  const getter = useMemo(() => {
+  const memoGetter = useMemo(() => {
-    const getters = modules[moduleName].getter
+    return getter(moduleName, key)
-    if (getters && getters[key]) return getters[key]
-    console.warn('getter not found:', moduleName, key)
-    return defaultGetter
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
-  const selecteor = useCallback(state => getter(state, props), [props])
+  const selecteor = useCallback(state => memoGetter(state, props), [props])
 
   // console.log(selector)
   // console.log(moduleName, key)
   return useSelector(selecteor)
 }
 
-export default useGetter
+export {
+  getter,
+  useGetter,
+}

src/store/index.js

@@ -1,6 +1,6 @@
 export { Provider } from './Provider'
 export { reducers } from './reducer'
-export { default as useGetter } from './useGetter'
+export * from './getter'
 export { default as useDispatch } from './useDispatch'
 export { default as connect } from './connect'
 export { default as getStore } from './store'

src/store/modules/common/getter.js

@@ -23,12 +23,17 @@ export const isPlayHighQuality = state => state.common.setting.player.highQualit
 export const isHandleAudioFocus = state => state.common.setting.player.isHandleAudioFocus
 export const playerCacheSize = state => state.common.setting.player.cacheSize
 
-export const themes = state => state.common.themes
+export const themeList = state => state.common.themes
 export const activeThemeId = state => state.common.setting.themeId
 export const theme = createSelector(
-  [themes, activeThemeId],
+  [themeList, activeThemeId],
-  (themes, activeThemeId) => (themes[activeThemeId] || themes.green).colors)
+  (themeList, activeThemeId) => (themeList.find(theme => theme.id === activeThemeId) || themeList[0]).colors)
-export const themeList = createSelector(themes, themes => Object.values(themes))
+export const isDarkTheme = createSelector(
+  [themeList, activeThemeId],
+  (themeList, activeThemeId) => (themeList.find(theme => theme.id === activeThemeId) || themeList[0]).isDark)
+export const statusBarStyle = createSelector(
+  isDarkTheme,
+  isDarkTheme => isDarkTheme ? 'light-content' : 'dark-content')
 
 export const versionInfo = state => state.common.versionInfo
 

src/theme/index.js

@@ -1,5 +1,4 @@
 import { AppColors, MaterialColors } from './Colors'
-import * as Themes from './themes'
 import {
   FontWeights,
   FontSizes,
@@ -7,6 +6,7 @@ import {
   BorderRadius,
 } from './Typography'
 
+export { default as Themes } from './themes'
 export {
   AppColors,
   MaterialColors,
@@ -14,5 +14,4 @@ export {
   FontSizes,
   BorderWidths,
   BorderRadius,
-  Themes,
 }

src/theme/themes/black.js

@@ -0,0 +1,40 @@
+export default {
+  id: 'black',
+  isDark: true,
+  colors: {
+    primary: '#1f1f1f',
+
+    normal: '#bfbfbf',
+    normal10: '#b5b5b5',
+    normal20: '#ababab',
+    normal30: '#a1a1a1',
+    normal35: '#9c9c9c',
+    normal40: '#919191',
+    normal50: '#878787',
+    normal60: '#7d7d7d',
+    normal70: '#737373',
+    normal75: '#6e6e6e',
+
+    secondary_5: '#7a7a7a',
+    secondary: '#707070',
+    secondary10: '#5c5c5c',
+    secondary20: '#474747',
+    secondary30: '#333',
+    secondary40: '#2e2e2e',
+    secondary45: '#292929',
+
+    tertiary_5: '#9b7e83',
+    tertiary: '#a68c91',
+    tertiary10: '#b19b9f',
+    tertiary20: '#bca9ac',
+    tertiary30: '#c7b7ba',
+    tertiary40: '#d2c6c8',
+    tertiary45: '#ddd4d6',
+
+    borderColor: '#0f0f0f',
+    borderColor2: '#1b1b1b',
+    borderColor3: '#292929',
+    borderColor4: '#363636',
+    borderColor5: '#424242',
+  },
+}

src/theme/themes/blue.js

@@ -1,5 +1,6 @@
 export default {
   id: 'blue',
+  isDark: false,
   colors: {
     primary: '#fff',
 

src/theme/themes/green.js

@@ -1,5 +1,6 @@
 export default {
   id: 'green',
+  isDark: false,
   colors: {
     primary: '#fff',
 

src/theme/themes/grey.js

@@ -1,5 +1,6 @@
 export default {
   id: 'grey',
+  isDark: false,
   colors: {
     primary: '#fff',
 

src/theme/themes/index.js

@@ -1,6 +1,23 @@
+import green from './green'
+import blue from './blue'
+import orange from './orange'
+import red from './red'
+import grey from './grey'
+import black from './black'
+
+export default [
+  green,
+  blue,
+  orange,
+  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'

src/theme/themes/orange.js

@@ -1,5 +1,6 @@
 export default {
   id: 'orange',
+  isDark: false,
   colors: {
     primary: '#fff',
 

src/theme/themes/pink.js

@@ -1,5 +1,6 @@
 export default {
   id: 'pink',
+  isDark: false,
   colors: {
     primary: '#fff',
 

src/theme/themes/red.js

@@ -1,5 +1,6 @@
 export default {
   id: 'red',
+  isDark: false,
   colors: {
     primary: '#fff',