主题编辑器添加“深色字体”选项（#1799）

publish/changeLog.md

@@ -1,3 +1,7 @@
+### 新增
+
+- 主题编辑器添加“深色字体”选项，启用后将减少字体颜色梯度，各类字体（正文、标签字体等）颜色将更接近，这有助于解决创建全透明主题时可能出现的字体配色问题（#1799）
+
 ### 优化
 
 - 主题设置默认折叠其他主题以优化进入设置界面时的性能

src/common/theme/createThemes.js

@@ -9,6 +9,7 @@ const defaultThemes = [
     id: 'green',
     name: '绿意盎然',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(77, 175, 124)',
       font: 'rgb(33, 33, 33)',
@@ -32,6 +33,7 @@ const defaultThemes = [
     id: 'blue',
     name: '蓝田生玉',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(52, 152, 219)',
       font: 'rgb(33, 33, 33)',
@@ -55,6 +57,7 @@ const defaultThemes = [
     id: 'blue_plus',
     name: '蛋雅深蓝',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(77, 131, 175)',
       font: 'rgb(33, 33, 33)',
@@ -78,6 +81,7 @@ const defaultThemes = [
     id: 'orange',
     name: '橙黄橘绿',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(245, 171, 53)',
       font: 'rgb(33, 33, 33)',
@@ -101,6 +105,7 @@ const defaultThemes = [
     id: 'red',
     name: '热情似火',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(214, 69, 65)',
       font: 'rgb(33, 33, 33)',
@@ -124,6 +129,7 @@ const defaultThemes = [
     id: 'pink',
     name: '粉装玉琢',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(241, 130, 141)',
       font: 'rgb(33, 33, 33)',
@@ -147,6 +153,7 @@ const defaultThemes = [
     id: 'purple',
     name: '重斤球紫',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(155, 89, 182)',
       font: 'rgb(33, 33, 33)',
@@ -170,6 +177,7 @@ const defaultThemes = [
     id: 'grey',
     name: '灰常美丽',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(108, 122, 137)',
       font: 'rgb(33, 33, 33)',
@@ -193,6 +201,7 @@ const defaultThemes = [
     id: 'ming',
     name: '青出于黑',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(51, 110, 123)',
       font: 'rgb(33, 33, 33)',
@@ -216,6 +225,7 @@ const defaultThemes = [
     id: 'blue2',
     name: '清热板蓝',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(79, 98, 208)',
       font: 'rgb(33, 33, 33)',
@@ -262,6 +272,7 @@ const defaultThemes = [
     id: 'mid_autumn',
     name: '月里嫦娥',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(74, 55, 82)',
       font: 'rgb(33, 33, 33)',
@@ -286,6 +297,7 @@ const defaultThemes = [
     id: 'naruto',
     name: '木叶之村',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(87, 144, 167)',
       font: 'rgb(33, 33, 33)',
@@ -309,6 +321,7 @@ const defaultThemes = [
     id: 'china_ink',
     name: '近墨者黑',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgba(47, 47, 47, 1)',
       font: 'rgb(33, 33, 33)',
@@ -333,6 +346,7 @@ const defaultThemes = [
     id: 'happy_new_year',
     name: '新年快乐',
     isDark: false,
+    isDarkFont: false,
     config: {
       primary: 'rgb(192, 57, 43)',
       font: 'rgb(33, 33, 33)',

src/common/theme/index.json

@@ -3,6 +3,7 @@
     "id": "green",
     "name": "绿意盎然",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -259,6 +260,7 @@
     "id": "blue",
     "name": "蓝田生玉",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -515,6 +517,7 @@
     "id": "blue_plus",
     "name": "蛋雅深蓝",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -771,6 +774,7 @@
     "id": "orange",
     "name": "橙黄橘绿",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -1027,6 +1031,7 @@
     "id": "red",
     "name": "热情似火",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -1283,6 +1288,7 @@
     "id": "pink",
     "name": "粉装玉琢",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -1539,6 +1545,7 @@
     "id": "purple",
     "name": "重斤球紫",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -1795,6 +1802,7 @@
     "id": "grey",
     "name": "灰常美丽",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -2051,6 +2059,7 @@
     "id": "ming",
     "name": "青出于黑",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -2307,6 +2316,7 @@
     "id": "blue2",
     "name": "清热板蓝",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -2819,6 +2829,7 @@
     "id": "mid_autumn",
     "name": "月里嫦娥",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -3075,6 +3086,7 @@
     "id": "naruto",
     "name": "木叶之村",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -3331,6 +3343,7 @@
     "id": "china_ink",
     "name": "近墨者黑",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {
@@ -3587,6 +3600,7 @@
     "id": "happy_new_year",
     "name": "新年快乐",
     "isDark": false,
+    "isDarkFont": false,
     "isCustom": false,
     "config": {
       "themeColors": {

src/common/theme/utils.js

@@ -1,6 +1,6 @@
 const { RGB_Linear_Shade, RGB_Alpha_Shade } = require('./colorUtils')
 
-exports.createThemeColors = (rgbaColor, fontRgbaColor, isDark) => {
+exports.createThemeColors = (rgbaColor, fontRgbaColor, isDark, isDarkFont) => {
   const colors = {
     '--color-primary': rgbaColor,
   }
@@ -30,19 +30,19 @@ exports.createThemeColors = (rgbaColor, fontRgbaColor, isDark) => {
 
   colors['--color-theme'] = isDark ? colors['--color-primary-light-900'] : rgbaColor
 
-  return { ...colors, ...createFontColors(fontRgbaColor, isDark) }
+  return { ...colors, ...createFontColors(fontRgbaColor, isDark, isDarkFont) }
 }
 
-const createFontColors = (rgbaColor, isDark) => {
+const createFontColors = (rgbaColor, isDark, isDarkFont) => {
   // rgb(238, 238, 238)
   // let prec = 'rgb(255, 255, 255)'
   rgbaColor ??= isDark ? 'rgb(229, 229, 229)' : 'rgb(33, 33, 33)'
-  if (isDark) return createFontDarkColors(rgbaColor)
+  if (isDark) return createFontDarkColors(rgbaColor, isDarkFont)
 
   let colors = {
     '--color-1000': rgbaColor,
   }
-  let step = isDark ? -0.05 : 0.05
+  let step = (isDarkFont ? 0.02 : 0.05) * (isDark ? -1 : 1)
   for (let i = 1; i < 21; i += 1) {
     colors[`--color-${String(1000 - 50 * i).padStart(3, '0')}`] = RGB_Linear_Shade(step * i, rgbaColor)
   }
@@ -50,14 +50,14 @@ const createFontColors = (rgbaColor, isDark) => {
   return colors
 }
 
-const createFontDarkColors = (rgbaColor) => {
+const createFontDarkColors = (rgbaColor, isDarkFont) => {
   // rgb(238, 238, 238)
   // let prec = 'rgb(255, 255, 255)'
 
   let colors = {
     '--color-1000': rgbaColor,
   }
-  const step = -0.05
+  const step = isDarkFont ? -0.015 : -0.05
   let preColor = rgbaColor
   for (let i = 1; i < 21; i += 1) {
     preColor = RGB_Linear_Shade(step, preColor)

src/common/types/theme.d.ts

@@ -262,6 +262,7 @@ declare namespace LX {
     id: string
     name: string
     isDark: boolean
+    isDarkFont: boolean
     isCustom: boolean
     config: {
       themeColors: ThemeColors

src/lang/en-us.json

@@ -640,6 +640,7 @@
   "theme_edit_modal__control_btn": "Left control button color",
   "theme_edit_modal__copy": "Copy theme",
   "theme_edit_modal__dark": "Dark theme",
+  "theme_edit_modal__dark_font": "Dark font",
   "theme_edit_modal__font": "Font color",
   "theme_edit_modal__hide_btn": "Hide play details page",
   "theme_edit_modal__main_bg": "Content area background color",

src/lang/zh-cn.json

@@ -640,6 +640,7 @@
   "theme_edit_modal__control_btn": "左侧控制按钮颜色",
   "theme_edit_modal__copy": "复制主题",
   "theme_edit_modal__dark": "暗色主题",
+  "theme_edit_modal__dark_font": "深色字体",
   "theme_edit_modal__font": "字体颜色",
   "theme_edit_modal__hide_btn": "隐藏播放详情页",
   "theme_edit_modal__main_bg": "内容区域背景颜色",

src/lang/zh-tw.json

@@ -640,6 +640,7 @@
   "theme_edit_modal__control_btn": "左側控制按鈕顏色",
   "theme_edit_modal__copy": "複製主題",
   "theme_edit_modal__dark": "暗色主題",
+  "theme_edit_modal__dark_font": "深色字體",
   "theme_edit_modal__font": "字體顏色",
   "theme_edit_modal__hide_btn": "隱藏播放詳情頁",
   "theme_edit_modal__main_bg": "內容區域背景顏色",

src/main/utils/index.ts

@@ -276,6 +276,7 @@ export const getTheme = () => {
       id: global.lx.appSetting['theme.id'],
       name: theme.name,
       isDark: theme.isDark,
+      isDarkFont: theme.isDarkFont,
       colors,
     },
   }

src/renderer/views/Setting/components/ThemeEditModal/index.vue

@@ -107,6 +107,7 @@
         <div :class="$style.subContent">
           <base-input v-model="themeName" :class="$style.input" :placeholder="$t('theme_selector_modal__theme_name')" />
           <base-checkbox id="theme_edit_modal__dark" v-model="isDark" :class="$style.checkbox" :label="$t('theme_edit_modal__dark')" @change="handleDark" />
+          <base-checkbox id="theme_edit_modal__dark_font" v-model="isDarkFont" :class="$style.checkbox" :label="$t('theme_edit_modal__dark_font')" @change="handleDarkFont" />
           <base-checkbox id="theme_edit_modal__preview" v-model="preview" :class="$style.checkbox" :label="$t('theme_edit_modal__preview')" @change="handlePreview" />
         </div>
         <div :class="$style.subContent">
@@ -161,6 +162,7 @@ export default {
   setup(props, { emit }) {
     const themeName = ref('')
     const isDark = ref(false)
+    const isDarkFont = ref(false)
     const preview = ref(false)
     const bgImg = ref('')
     let bgImgRaw = ''
@@ -227,8 +229,8 @@ export default {
     let hideBtnColorOrigin
     let hideBtnColor
 
-    const applyPrimaryColor = (color, fontColor, isDark) => {
+    const applyPrimaryColor = (color, fontColor, isDark, isDarkFont) => {
-      theme.config.themeColors = createThemeColors(color, fontColor, isDark)
+      theme.config.themeColors = createThemeColors(color, fontColor, isDark, isDarkFont)
       if (theme.config.extInfo['--color-app-background'].startsWith('var')) setAppBgColor(getColor(appBgColorOrigin, theme))
       if (theme.config.extInfo['--color-nav-font'].startsWith('var')) setAsideFontColor(getColor(asideFontColorOrigin, theme))
       if (theme.config.extInfo['--color-main-background'].startsWith('var')) setMainBgColor(getColor(mainBgColorOrigin, theme))
@@ -247,6 +249,7 @@ export default {
       // console.log(theme)
       themeName.value = theme.name
       isDark.value = theme.isDark
+      isDarkFont.value = theme.isDarkFont ?? false
       currentBgPath = ''
       if (theme.config.extInfo['--background-image'] == 'none') {
         bgImg.value = ''
@@ -279,10 +282,10 @@ export default {
       hideBtnColor = getColor(hideBtnColorOrigin, theme)
 
       initMainColor(theme.config.themeColors['--color-primary'], (color) => {
-        applyPrimaryColor(color, theme.config.themeColors['--color-1000'], theme.isDark)
+        applyPrimaryColor(color, theme.config.themeColors['--color-1000'], theme.isDark, theme.isDarkFont)
       })
       initFontColor(theme.config.themeColors['--color-1000'] ?? (isDark ? 'rgb(229, 229, 229)' : 'rgb(33, 33, 33)'), (color) => {
-        applyPrimaryColor(theme.config.themeColors['--color-primary'], color, theme.isDark)
+        applyPrimaryColor(theme.config.themeColors['--color-primary'], color, theme.isDark, theme.isDarkFont)
       })
       initAppBgColor(appBgColor, (color) => {
         // console.log('appBgColor', color)
@@ -402,7 +405,11 @@ export default {
     }
     const handleDark = (val) => {
       theme.isDark = val
-      applyPrimaryColor(theme.config.themeColors['--color-primary'], theme.config.themeColors['--color-1000'], theme.isDark)
+      applyPrimaryColor(theme.config.themeColors['--color-primary'], theme.config.themeColors['--color-1000'], theme.isDark, theme.isDarkFont)
+    }
+    const handleDarkFont = (val) => {
+      theme.isDarkFont = val
+      applyPrimaryColor(theme.config.themeColors['--color-primary'], theme.config.themeColors['--color-1000'], theme.isDark, theme.isDarkFont)
     }
     /**
      * 预览主题
@@ -506,6 +513,8 @@ export default {
       bgImg,
       isDark,
       handleDark,
+      isDarkFont,
+      handleDarkFont,
       preview,
       handlePreview,
       handleCancel,