ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

v2.0.0

Browse Source
This commit is contained in:
lyswhut
2022-10-29 11:36:35 +08:00
parent 66b965d9f7
commit e45cee6596
715 changed files with 57096 additions and 31771 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/theme/colorUtils.js
+73
View File
@@ -0,0 +1,73 @@
/* eslint-disable */
// https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)#micro-functions-version-4
/**
* Blend color (Lighten or Darken)
* @param {number} p 混合百分比 范围 0.0 - 1.0
* @param {string} c0 rgb(a) color1
* @param {string} c1 rgb(a) color2
* @returns color
*/
exports.RGB_Linear_Blend=(p,c0,c1)=>{
var i=parseInt,r=Math.round,P=1-p,[a,b,c,d]=c0.split(","),[e,f,g,h]=c1.split(","),x=d||h,j=x?","+(!d?h:!h?d:r((parseFloat(d)*P+parseFloat(h)*p)*1000)/1000+")"):")";
return"rgb"+(x?"a(":"(")+r(i(a[3]=="a"?a.slice(5):a.slice(4))*P+i(e[3]=="a"?e.slice(5):e.slice(4))*p)+","+r(i(b)*P+i(f)*p)+","+r(i(c)*P+i(g)*p)+j;
}
/**
* Blend color (Lighten or Darken)
* @param {number} p 混合百分比 范围 0.0 - 1.0
* @param {string} c0 rgb(a) color1
* @param {string} c1 rgb(a) color2
* @returns color
*/
exports.RGB_Log_Blend=(p,c0,c1)=>{
var i=parseInt,r=Math.round,P=1-p,[a,b,c,d]=c0.split(","),[e,f,g,h]=c1.split(","),x=d||h,j=x?","+(!d?h:!h?d:r((parseFloat(d)*P+parseFloat(h)*p)*1000)/1000+")"):")";
return"rgb"+(x?"a(":"(")+r((P*i(a[3]=="a"?a.slice(5):a.slice(4))**2+p*i(e[3]=="a"?e.slice(5):e.slice(4))**2)**0.5)+","+r((P*i(b)**2+p*i(f)**2)**0.5)+","+r((P*i(c)**2+p*i(g)**2)**0.5)+j;
}
/**
* Shade color (Lighten or Darken)
* @param {number} p Shade 百分比范围为 -1.0 - 1.0 负为黑色，正为白色
* @param {string} c0 rgb(a) color
* @returns color
*/
exports.RGB_Linear_Shade=(p,c0)=>{
var i=parseInt,r=Math.round,[a,b,c,d]=c0.split(","),n=p<0,t=n?0:255*p,P=n?1+p:1-p;
return"rgb"+(d?"a(":"(")+r(i(a[3]=="a"?a.slice(5):a.slice(4))*P+t)+","+r(i(b)*P+t)+","+r(i(c)*P+t)+(d?","+d:")");
}
/**
* Shade color (Lighten or Darken)
* @param {number} p Shade 百分比范围为 -1.0 - 1.0 负为黑色，正为白色
* @param {string} c0 rgb(a) color
* @returns color
*/
exports.RGB_Log_Shade=(p,c0)=>{
var i=parseInt,r=Math.round,[a,b,c,d]=c0.split(","),n=p<0,t=n?0:p*255**2,P=n?1+p:1-p;
return"rgb"+(d?"a(":"(")+r((P*i(a[3]=="a"?a.slice(5):a.slice(4))**2+t)**0.5)+","+r((P*i(b)**2+t)**0.5)+","+r((P*i(c)**2+t)**0.5)+(d?","+d:")");
}
/**
* 修改透明度
* @param {number} p 透明度 -1.0 - 1.0
* @param {string} color
* @returns color
*/
exports.RGB_Alpha_Shade = (p, color) => {
var i = parseInt
var n = p < 0
var [r, g, b, a] = color.split(",")
r = r[3] == 'a' ? r.slice(5) : r.slice(4)
if (a) {
a = parseFloat(a)
a = a - (n ? (1 - a) * p : a * p)
a = n ? Math.max(0, a) : Math.min(1, a)
} else {
a = 1 - p
a = Math.min(1, a)
}
return `rgba(${i(r)}, ${i(g)}, ${i(b)}, ${a.toFixed(2)})`
}
src/common/theme/createThemes.js
+331
View File
@@ -0,0 +1,331 @@
//! 更新默认主题配置后，需要执行 npm run build:theme 重新构建index.json
const fs = require('fs')
const path = require('path')
const { createThemeColors } = require('./utils')
const defaultThemes = [
{
id: 'green',
name: '绿意盎然',
isDark: false,
config: {
primary: 'rgb(77, 175, 124)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'none',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': '#4baed5',
'--color-badge-tertiary': '#e7aa36',
},
},
{
id: 'blue',
name: '蓝田生玉',
isDark: false,
config: {
primary: 'rgb(52, 152, 219)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'none',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': '#5cbf9b',
'--color-badge-tertiary': '#5cbf9b',
},
},
{
id: 'blue_plus',
name: '蛋雅深蓝',
isDark: false,
config: {
primary: 'rgb(77, 131, 175)',
'--color-app-background': 'var(--color-primary-light-600-alpha-600)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'none',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': 'rgba(66.6, 150.7, 171, 1)',
'--color-badge-tertiary': 'rgba(54, 196, 231, 1)',
},
},
{
id: 'orange',
name: '橙黄橘绿',
isDark: false,
config: {
primary: 'rgb(245, 171, 53)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'none',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': '#9ed458',
'--color-badge-tertiary': '#9ed458',
},
},
{
id: 'red',
name: '热情似火',
isDark: false,
config: {
primary: 'rgb(214, 69, 65)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'none',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': '#dfbb6b',
'--color-badge-tertiary': '#dfbb6b',
},
},
{
id: 'pink',
name: '粉装玉琢',
isDark: false,
config: {
primary: 'rgb(241, 130, 141)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'none',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': '#f5b684',
'--color-badge-tertiary': '#f5b684',
},
},
{
id: 'purple',
name: '重斤球紫',
isDark: false,
config: {
primary: 'rgb(155, 89, 182)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'none',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': '#e5a39f',
'--color-badge-tertiary': '#e5a39f',
},
},
{
id: 'grey',
name: '灰常美丽',
isDark: false,
config: {
primary: 'rgb(108, 122, 137)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'none',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': '#b19b9f',
'--color-badge-tertiary': '#b19b9f',
},
},
{
id: 'ming',
name: '青出于黑',
isDark: false,
config: {
primary: 'rgb(51, 110, 123)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'none',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': '#6376a2',
'--color-badge-tertiary': '#6376a2',
},
},
{
id: 'blue2',
name: '清热板蓝',
isDark: false,
config: {
primary: 'rgb(79, 98, 208)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'none',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': '#b080db',
'--color-badge-tertiary': '#b080db',
},
},
{
id: 'black',
name: '黑灯瞎火',
isDark: true,
config: {
primary: 'rgb(150, 150, 150)',
'--color-app-background': 'rgba(0, 0, 0, 0)',
'--color-main-background': 'rgba(19, 19, 19, 0.9)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'url(./theme_images/landingMoon.png)',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary-dark-200)',
'--color-badge-secondary': 'var(--color-primary)',
'--color-badge-tertiary': 'var(--color-primary-dark-300)',
},
},
{
id: 'mid_autumn',
name: '月里嫦娥',
isDark: false,
config: {
primary: 'rgb(74, 55, 82)',
'--color-app-background': 'rgba(255, 255, 255, 0)',
'--color-main-background': 'rgba(255, 255, 255, 0.9)',
'--color-nav-font': 'var(--color-primary-light-600)',
'--background-image': 'url(./theme_images/jqbg.jpg)',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': '#af9479',
'--color-badge-tertiary': '#af9479',
},
},
{
id: 'naruto',
name: '木叶之村',
isDark: false,
config: {
primary: 'rgb(87, 144, 167)',
'--color-app-background': 'rgba(255, 255, 255, 0.15)',
'--color-main-background': 'rgba(255, 255, 255, 0.8)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'url(./theme_images/myzcbg.jpg)',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': 'var(--color-primary)',
'--color-badge-secondary': 'var(--color-primary-light-100)',
'--color-badge-tertiary': 'var(--color-primary-light-100)',
},
},
{
id: 'happy_new_year',
name: '新年快乐',
isDark: false,
config: {
primary: 'rgb(192, 57, 43)',
'--color-app-background': 'rgba(255, 255, 255, 0.15)',
'--color-main-background': 'rgba(255, 255, 255, 0.8)',
'--color-nav-font': 'var(--color-primary)',
'--background-image': 'url(./theme_images/xnkl.png)',
'--background-image-position': 'center',
'--background-image-size': 'cover',
'--color-btn-hide': '#3bc2b2',
'--color-btn-min': '#85c43b',
'--color-btn-close': '#fab4a0',
'--color-badge-primary': '#7fb575',
'--color-badge-secondary': '#dfbb6b',
'--color-badge-tertiary': 'var(--color-primary-light-100)',
},
},
]
const themes = defaultThemes.map(({ config: { primary, ...extInfo }, ...themeInfo }) => {
return {
...themeInfo,
isCustom: false,
config: {
themeColors: createThemeColors(primary, themeInfo.isDark),
extInfo,
},
}
})
fs.writeFileSync(path.join(__dirname, 'index.json'), JSON.stringify(themes, null, 2))
src/common/theme/images/jqbg.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 353 KiB

src/common/theme/images/landingMoon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

src/common/theme/images/myzcbg.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

src/common/theme/images/xnkl.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 997 KiB

src/common/theme/index.json
+3292
View File
File diff suppressed because it is too large Load Diff
src/common/theme/utils.js
+42
View File
@@ -0,0 +1,42 @@
const { RGB_Linear_Shade, RGB_Alpha_Shade } = require('./colorUtils')
exports.createThemeColors = (rgbaColor, isDark) => {
const colors = {
'--color-primary': rgbaColor,
}
let preColor = rgbaColor
for (let i = 1; i < 11; i += 1) {
preColor = RGB_Linear_Shade(isDark ? 0.2 : -0.1, preColor)
colors[`--color-primary-dark-${i * 100}`] = preColor
for (let j = 1; j < 10; j += 1) {
colors[`--color-primary-dark-${i * 100}-alpha-${j * 100}`] = RGB_Alpha_Shade(0.1 * j, preColor)
colors[`--color-primary-alpha-${j * 100}`] = RGB_Alpha_Shade(0.1 * j, rgbaColor)
}
}
preColor = rgbaColor
for (let i = 1; i < 10; i += 1) {
preColor = RGB_Linear_Shade(isDark ? -0.1 : 0.2, preColor)
colors[`--color-primary-light-${i * 100}`] = preColor
for (let j = 1; j < 10; j += 1) {
colors[`--color-primary-light-${i * 100}-alpha-${j * 100}`] = RGB_Alpha_Shade(0.1 * j, preColor)
}
}
preColor = RGB_Linear_Shade(isDark ? -0.2 : 1, preColor)
colors[`--color-primary-light-${1000}`] = preColor
for (let j = 1; j < 10; j += 1) {
colors[`--color-primary-light-${1000}-alpha-${j * 100}`] = RGB_Alpha_Shade(0.1 * j, preColor)
}
colors['--color-theme'] = isDark ? colors['--color-primary-light-900'] : rgbaColor
return colors
}
// rgb(238, 238, 238)
// let prec = 'rgb(255, 255, 255)'
// let colors = [prec]
// for (let j = 1; j < 11; j += 1) {
// colors.push(prec = RGB_Linear_Shade(-0.15, prec))
// }
// console.log(colors)