隐藏黑色主题背景设置

publish/changeLog.md

@@ -1,3 +1,3 @@
-### 修复
+### 新增
 
-- 修复歌单详情页内歌曲最多只加载30首的问题
+- 隐藏黑色主题背景设置，默认关闭，可以去设置-主题设置更改

src/config/defaultSetting.ts

@@ -63,6 +63,7 @@ const defaultSetting: LX.AppSetting = {
   'theme.id': 'blue_plus',
   'theme.lightId': 'green',
   'theme.darkId': 'black',
+  'theme.hideBgDark': false,
 }
 
 

src/lang/en_us.json

@@ -203,6 +203,7 @@
   "setting_basic_startup_auto_play": "Play music automatically after startup",
   "setting_basic_theme": "Theme",
   "setting_basic_theme_auto_theme": "Follow the system light and dark mode to switch themes",
+  "setting_basic_theme_hide_bg_dark": "Hide black theme",
   "setting_list": "List settings",
   "setting_list_add_music_location_type": "Position when the song was added to the list",
   "setting_list_add_music_location_type_bottom": "Bottom",

src/lang/zh_cn.json

@@ -203,6 +203,7 @@
   "setting_basic_startup_auto_play": "启动后自动播放音乐",
   "setting_basic_theme": "主题颜色",
   "setting_basic_theme_auto_theme": "跟随系统亮、暗模式切换主题",
+  "setting_basic_theme_hide_bg_dark": "隐藏黑色主题背景",
   "setting_list": "列表设置",
   "setting_list_add_music_location_type": "添加歌曲到列表时的位置",
   "setting_list_add_music_location_type_bottom": "底部",

src/screens/Home/Views/Setting/settings/Theme/IsHideBgDark.tsx

@@ -0,0 +1,37 @@
+import React, { memo } from 'react'
+import { View } from 'react-native'
+
+import CheckBoxItem from '../../components/CheckBoxItem'
+import { createStyle } from '@/utils/tools'
+import { useI18n } from '@/lang'
+import { updateSetting } from '@/core/common'
+import { useSettingValue } from '@/store/setting/hook'
+import { getTheme } from '@/theme/themes'
+import { applyTheme } from '@/core/theme'
+import settingState from '@/store/setting/state'
+
+export default memo(() => {
+  const t = useI18n()
+  const isHideBgDark = useSettingValue('theme.hideBgDark')
+  const setIsAutoTheme = (isHideBgDark: boolean) => {
+    updateSetting({ 'theme.hideBgDark': isHideBgDark })
+    void getTheme().then(theme => {
+      if (theme.id != 'black' || !settingState.setting['common.isAutoTheme']) return
+      applyTheme(theme)
+    })
+  }
+
+
+  return (
+    <View style={styles.content}>
+      <CheckBoxItem check={isHideBgDark} label={t('setting_basic_theme_hide_bg_dark')} onChange={setIsAutoTheme} />
+    </View>
+  )
+})
+
+const styles = createStyle({
+  content: {
+    marginTop: 5,
+    // marginBottom: 5,
+  },
+})

src/screens/Home/Views/Setting/settings/Theme/index.tsx

@@ -3,6 +3,7 @@ import React, { memo } from 'react'
 import Section from '../../components/Section'
 import Theme from './Theme'
 import IsAutoTheme from './IsAutoTheme'
+import IsHideBgDark from './IsHideBgDark'
 import { useI18n } from '@/lang/i18n'
 
 export default memo(() => {
@@ -12,6 +13,7 @@ export default memo(() => {
     <Section title={t('setting_theme')}>
       <Theme />
       <IsAutoTheme />
+      <IsHideBgDark />
     </Section>
   )
 })

src/theme/themes/index.ts

@@ -55,7 +55,9 @@ export const buildActiveThemeColors = (theme: LX.Theme): LX.ActiveTheme => {
     }
   } else {
     const extInfo = (theme as LocalTheme).config.extInfo
-    if (extInfo['bg-image']) bgImg = BG_IMAGES[extInfo['bg-image']]
+    if (extInfo['bg-image']) {
+      if (theme.id != 'black' || !settingState.setting['theme.hideBgDark']) bgImg = BG_IMAGES[extInfo['bg-image']]
+    }
   }
 
   theme.config.extInfo = { ...theme.config.extInfo }

src/types/app_setting.d.ts

@@ -71,6 +71,11 @@ declare global {
        */
       'theme.darkId': string
 
+      /**
+       * 隐藏黑色主题背景
+       */
+      'theme.hideBgDark': boolean
+
       /**
            * 启动时自动播放歌曲
            */