diff --git a/publish/changeLog.md b/publish/changeLog.md
index 4e58654135..c9584481bc 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -1,3 +1,7 @@
+### 新增
+
+- 主题编辑器添加“深色字体”选项，启用后将减少字体颜色梯度，各类字体（正文、标签字体等）颜色将更接近，这有助于解决创建全透明主题时可能出现的字体配色问题（#1799）
+
### 优化
- 主题设置默认折叠其他主题以优化进入设置界面时的性能
diff --git a/src/common/theme/createThemes.js b/src/common/theme/createThemes.js
index fa6ee02766..e19a100f74 100644
--- a/src/common/theme/createThemes.js
+++ b/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)',
diff --git a/src/common/theme/index.json b/src/common/theme/index.json
index 19de3bdfb7..84f11ca102 100644
--- a/src/common/theme/index.json
+++ b/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": {
@@ -3839,4 +3853,4 @@
}
}
}
-]
\ No newline at end of file
+]
diff --git a/src/common/theme/utils.js b/src/common/theme/utils.js
index 49d2d2341f..68cab69f6b 100644
--- a/src/common/theme/utils.js
+++ b/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)
diff --git a/src/common/types/theme.d.ts b/src/common/types/theme.d.ts
index 8de2c63801..c91498395b 100644
--- a/src/common/types/theme.d.ts
+++ b/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
diff --git a/src/lang/en-us.json b/src/lang/en-us.json
index a9789e8f90..b44e2414af 100644
--- a/src/lang/en-us.json
+++ b/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",
diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json
index 8fc6678ac3..671b9c1b56 100644
--- a/src/lang/zh-cn.json
+++ b/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": "内容区域背景颜色",
diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json
index d60903f06f..1126a4a361 100644
--- a/src/lang/zh-tw.json
+++ b/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": "內容區域背景顏色",
diff --git a/src/main/utils/index.ts b/src/main/utils/index.ts
index 8e399750ec..e187359159 100644
--- a/src/main/utils/index.ts
+++ b/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,
},
}
diff --git a/src/renderer/views/Setting/components/ThemeEditModal/index.vue b/src/renderer/views/Setting/components/ThemeEditModal/index.vue
index 6160fb6fa2..388b2577e9 100644
--- a/src/renderer/views/Setting/components/ThemeEditModal/index.vue
+++ b/src/renderer/views/Setting/components/ThemeEditModal/index.vue
@@ -107,6 +107,7 @@
+
@@ -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) => {
- theme.config.themeColors = createThemeColors(color, fontColor, isDark)
+ const applyPrimaryColor = (color, fontColor, isDark, isDarkFont) => {
+ 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,