mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Refactor theme colors
This commit is contained in:
parent
86e2e7fff8
commit
a98a993a4f
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1298,26 +1298,16 @@
|
||||
settings.brightness = this.color.brightness;
|
||||
settings.filterInvert = this.color.filterInvert;
|
||||
|
||||
const rgbToString = color =>
|
||||
{
|
||||
if (color.a)
|
||||
{
|
||||
return `rgba(${color.r},${color.g},${color.b},${color.a})`;
|
||||
}
|
||||
return `rgb(${color.r},${color.g},${color.b})`;
|
||||
};
|
||||
const hexToRgba = input => this.color.rgbToString(this.color.hexToRgba(input));
|
||||
let styles = [];
|
||||
styles.push("--theme-color:" + settings.customStyleColor);
|
||||
for (let opacity = 10; opacity <= 90; opacity += 10)
|
||||
{
|
||||
styles.push(`--theme-color-${opacity}:` +
|
||||
rgbToString(this.color.hexToRgba(settings.customStyleColor + opacity)));
|
||||
styles.push(`--theme-color-${opacity}:` + hexToRgba(settings.customStyleColor + opacity));
|
||||
}
|
||||
styles.push("--foreground-color:" + settings.foreground);
|
||||
styles.push("--foreground-color-b:" +
|
||||
rgbToString(this.color.hexToRgba(settings.foreground + "b")));
|
||||
styles.push("--foreground-color-d:" +
|
||||
rgbToString(this.color.hexToRgba(settings.foreground + "d")));
|
||||
styles.push("--foreground-color-b:" + hexToRgba(settings.foreground + "b"));
|
||||
styles.push("--foreground-color-d:" + hexToRgba(settings.foreground + "d"));
|
||||
styles.push("--blue-image-filter:" + settings.blueImageFilter);
|
||||
styles.push("--pink-image-filter:" + settings.pinkImageFilter);
|
||||
styles.push("--brightness:" + settings.brightness);
|
||||
|
||||
@ -1298,26 +1298,16 @@
|
||||
settings.brightness = this.color.brightness;
|
||||
settings.filterInvert = this.color.filterInvert;
|
||||
|
||||
const rgbToString = color =>
|
||||
{
|
||||
if (color.a)
|
||||
{
|
||||
return `rgba(${color.r},${color.g},${color.b},${color.a})`;
|
||||
}
|
||||
return `rgb(${color.r},${color.g},${color.b})`;
|
||||
};
|
||||
const hexToRgba = input => this.color.rgbToString(this.color.hexToRgba(input));
|
||||
let styles = [];
|
||||
styles.push("--theme-color:" + settings.customStyleColor);
|
||||
for (let opacity = 10; opacity <= 90; opacity += 10)
|
||||
{
|
||||
styles.push(`--theme-color-${opacity}:` +
|
||||
rgbToString(this.color.hexToRgba(settings.customStyleColor + opacity)));
|
||||
styles.push(`--theme-color-${opacity}:` + hexToRgba(settings.customStyleColor + opacity));
|
||||
}
|
||||
styles.push("--foreground-color:" + settings.foreground);
|
||||
styles.push("--foreground-color-b:" +
|
||||
rgbToString(this.color.hexToRgba(settings.foreground + "b")));
|
||||
styles.push("--foreground-color-d:" +
|
||||
rgbToString(this.color.hexToRgba(settings.foreground + "d")));
|
||||
styles.push("--foreground-color-b:" + hexToRgba(settings.foreground + "b"));
|
||||
styles.push("--foreground-color-d:" + hexToRgba(settings.foreground + "d"));
|
||||
styles.push("--blue-image-filter:" + settings.blueImageFilter);
|
||||
styles.push("--pink-image-filter:" + settings.pinkImageFilter);
|
||||
styles.push("--brightness:" + settings.brightness);
|
||||
|
||||
2
min/theme-colors.min.js
vendored
2
min/theme-colors.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(e,o)=>{const r={red:"#e57373",pink:"#F06292",purple:"#BA68C8",deepPurple:"#9575CD",indigo:"#7986CB",blue:"#2196F3",lightBlue:"#00A0D8",cyan:"#00ACC1",teal:"#26A69A",green:"#81C784",lightGreen:"#9CCC65",orange:"#FF9800",deepOrange:"#FF7043",brown:"#A1887F",grey:"#757575",blueGrey:"#78909C"};class t{constructor(){this.reloadColor=(()=>{const e=document.querySelector("html");return function(o){const r=new ColorProcessor(o);const t=r.hexToRgba(o+"70");$("div.custom-color-preview").css("background",o).css("box-shadow",`0px 2px 8px 1px rgba(${t.r},${t.g},${t.b},${t.a})`);e.style.setProperty("--theme-color",o);for(let t=10;t<=90;t+=10){e.style.setProperty(`--theme-color-${t}`,r.rgbToString(r.hexToRgba(o+t)))}e.style.setProperty("--foreground-color",r.foreground);e.style.setProperty("--foreground-color-b",r.rgbToString(r.hexToRgba(r.foreground+"b")));e.style.setProperty("--foreground-color-d",r.rgbToString(r.hexToRgba(r.foreground+"d")));e.style.setProperty("--blue-image-filter",r.blueImageFilter);e.style.setProperty("--pink-image-filter",r.pinkImageFilter);e.style.setProperty("--brightness",r.brightness);e.style.setProperty("--invert-filter",r.filterInvert)}})()}setupDom(){$(`input[key='customStyleColor']`).on("change",()=>{this.reloadColor($(`input[key='customStyleColor']`).val())});const e=$(".predefined-colors-grid");for(const o of Object.values(r)){$(`<div class='predefined-colors-grid-block'></div>`).appendTo(e).css("background",o).attr("data-color",o).on("click",e=>{const o=$(e.target).attr("data-color");$(`input[key='customStyleColor']`).val(o).trigger("input").change();$("div.custom-color-preview").on("click")})}$("div.custom-color-preview").on("click",()=>{const e=$(".predefined-colors");e.toggleClass("opened")})}}return{export:t}}})();
|
||||
(()=>{return(e,o)=>{const r={red:"#e57373",pink:"#F06292",purple:"#BA68C8",deepPurple:"#9575CD",indigo:"#7986CB",blue:"#2196F3",lightBlue:"#00A0D8",cyan:"#00ACC1",teal:"#26A69A",green:"#81C784",lightGreen:"#9CCC65",orange:"#FF9800",deepOrange:"#FF7043",brown:"#A1887F",grey:"#757575",blueGrey:"#78909C"};class t{constructor(){this.reloadColor=(()=>{const e=document.querySelector("html");return function(o){const r=new ColorProcessor(o);const t=e=>r.rgbToString(r.hexToRgba(e));const l=r.hexToRgba(o+"70");$("div.custom-color-preview").css("background",o).css("box-shadow",`0px 2px 8px 1px rgba(${l.r},${l.g},${l.b},${l.a})`);e.style.setProperty("--theme-color",o);for(let r=10;r<=90;r+=10){e.style.setProperty(`--theme-color-${r}`,t(o+r))}e.style.setProperty("--foreground-color",r.foreground);e.style.setProperty("--foreground-color-b",t(r.foreground+"b"));e.style.setProperty("--foreground-color-d",t(r.foreground+"d"));e.style.setProperty("--blue-image-filter",r.blueImageFilter);e.style.setProperty("--pink-image-filter",r.pinkImageFilter);e.style.setProperty("--brightness",r.brightness);e.style.setProperty("--invert-filter",r.filterInvert)}})()}setupDom(){$(`input[key='customStyleColor']`).on("change",()=>{this.reloadColor($(`input[key='customStyleColor']`).val())});const e=$(".predefined-colors-grid");for(const o of Object.values(r)){$(`<div class='predefined-colors-grid-block'></div>`).appendTo(e).css("background",o).attr("data-color",o).on("click",e=>{const o=$(e.target).attr("data-color");$(`input[key='customStyleColor']`).val(o).trigger("input").change();$("div.custom-color-preview").on("click")})}$("div.custom-color-preview").on("click",()=>{const e=$(".predefined-colors");e.toggleClass("opened")})}}return{export:t}}})();
|
||||
@ -30,6 +30,7 @@
|
||||
return function (newColor)
|
||||
{
|
||||
const color = new ColorProcessor(newColor);
|
||||
const hexToRgba = input => color.rgbToString(color.hexToRgba(input));
|
||||
|
||||
const shadowColor = color.hexToRgba(newColor + "70");
|
||||
$("div.custom-color-preview")
|
||||
@ -39,14 +40,11 @@
|
||||
html.style.setProperty("--theme-color", newColor);
|
||||
for (let opacity = 10; opacity <= 90; opacity += 10)
|
||||
{
|
||||
html.style.setProperty(`--theme-color-${opacity}`,
|
||||
color.rgbToString(color.hexToRgba(newColor + opacity)));
|
||||
html.style.setProperty(`--theme-color-${opacity}`, hexToRgba(newColor + opacity));
|
||||
}
|
||||
html.style.setProperty("--foreground-color", color.foreground);
|
||||
html.style.setProperty("--foreground-color-b",
|
||||
color.rgbToString(color.hexToRgba(color.foreground + "b")));
|
||||
html.style.setProperty("--foreground-color-d",
|
||||
color.rgbToString(color.hexToRgba(color.foreground + "d")));
|
||||
html.style.setProperty("--foreground-color-b", hexToRgba(color.foreground + "b"));
|
||||
html.style.setProperty("--foreground-color-d", hexToRgba(color.foreground + "d"));
|
||||
html.style.setProperty("--blue-image-filter", color.blueImageFilter);
|
||||
html.style.setProperty("--pink-image-filter", color.pinkImageFilter);
|
||||
html.style.setProperty("--brightness", color.brightness);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user