github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/1072/merge
lyswhut 2024-03-01 14:56:12 +08:00
parent 07ed408129
commit 17d45d7406
10 changed files with 59 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
publish/changeLog.md
View File

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

14
src/common/theme/createThemes.js
View File

@ -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)',

14
src/common/theme/index.json
View File

@ -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": {

14
src/common/theme/utils.js
View File

@ -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)

1
src/common/types/theme.d.ts vendored
View File

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

1
src/lang/en-us.json
View File

@ -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",

1
src/lang/zh-cn.json
View File

@ -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": "内容区域背景颜色",

1
src/lang/zh-tw.json
View File

@ -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": "內容區域背景顏色",

1
src/main/utils/index.ts
View File

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

19
src/renderer/views/Setting/components/ThemeEditModal/index.vue
View File

@ -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) => {
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,