mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Fix bug in theme color
This commit is contained in:
parent
f9367627f0
commit
82be414f18
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
min/theme-colors.min.js
vendored
2
min/theme-colors.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(e,r)=>{const t={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 o{constructor(){this.reloadColor=(()=>{const e=document.querySelector("html");return function(r){const t=new ColorProcessor(r);const o=e=>t.rgbToString(t.hexToRgba(e));const n=t.hexToRgba(r+"70");const l=document.querySelector("div.custom-color-preview");l.style.background=r;l.style.boxShadow=`0px 2px 8px 1px rgba(${n.r},${n.g},${n.b},${n.a})`;e.style.setProperty("--theme-color",r);for(let t=10;t<=90;t+=10){e.style.setProperty(`--theme-color-${t}`,o(r+t))}e.style.setProperty("--foreground-color",t.foreground);e.style.setProperty("--foreground-color-b",o(t.foreground+"b"));e.style.setProperty("--foreground-color-d",o(t.foreground+"d"));e.style.setProperty("--blue-image-filter",t.blueImageFilter);e.style.setProperty("--pink-image-filter",t.pinkImageFilter);e.style.setProperty("--brightness",t.brightness);e.style.setProperty("--invert-filter",t.filterInvert)}})()}setupDom(){const e=document.querySelector(`input[key='customStyleColor']`);e.addEventListener("change",()=>{this.reloadColor(e.value)});const r=document.querySelector(".predefined-colors-grid");for(const o of Object.values(t)){const t=document.createElement("div");r.insertAdjacentElement("beforeend",t);t.classList.add("predefined-colors-grid-block");t.style.background=o;t.setAttribute("data-color",o);t.addEventListener("click",r=>{const t=r.target.getAttribute("data-color");e.value=t;raiseEvent(e,"input");raiseEvent(e,"change")})}const o=document.querySelector(".predefined-colors");document.querySelector("div.custom-color-preview").addEventListener("click",()=>{o.classList.toggle("opened")})}}return{export:{ThemeColors:o}}}})();
|
||||
(()=>{return(e,r)=>{const t={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 o{constructor(){this.reloadColor=(()=>{const e=document.querySelector("html");return function(r){const t=new ColorProcessor(r);const o=e=>t.rgbToString(t.hexToRgba(e));e.style.setProperty("--theme-color",r);for(let t=10;t<=90;t+=10){e.style.setProperty(`--theme-color-${t}`,o(r+t))}e.style.setProperty("--foreground-color",t.foreground);e.style.setProperty("--foreground-color-b",o(t.foreground+"b"));e.style.setProperty("--foreground-color-d",o(t.foreground+"d"));e.style.setProperty("--blue-image-filter",t.blueImageFilter);e.style.setProperty("--pink-image-filter",t.pinkImageFilter);e.style.setProperty("--brightness",t.brightness);e.style.setProperty("--invert-filter",t.filterInvert)}})()}setupDom(){const e=document.querySelector(`input[key='customStyleColor']`);e.addEventListener("change",()=>{this.reloadColor(e.value)});const r=document.querySelector(".predefined-colors-grid");for(const o of Object.values(t)){const t=document.createElement("div");r.insertAdjacentElement("beforeend",t);t.classList.add("predefined-colors-grid-block");t.style.background=o;t.setAttribute("data-color",o);t.addEventListener("click",r=>{const t=r.target.getAttribute("data-color");e.value=t;raiseEvent(e,"input");raiseEvent(e,"change")})}const o=document.querySelector(".predefined-colors");document.querySelector("div.custom-color-preview").addEventListener("click",()=>{o.classList.toggle("opened")})}}return{export:{ThemeColors:o}}}})();
|
||||
@ -1,84 +1,68 @@
|
||||
const colors = {
|
||||
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"
|
||||
};
|
||||
export class ThemeColors
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
this.reloadColor = (() =>
|
||||
{
|
||||
const html = document.querySelector("html");
|
||||
return function (newColor)
|
||||
{
|
||||
const color = new ColorProcessor(newColor);
|
||||
const hexToRgba = input => color.rgbToString(color.hexToRgba(input));
|
||||
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'
|
||||
}
|
||||
export class ThemeColors {
|
||||
constructor () {
|
||||
this.reloadColor = (() => {
|
||||
const html = document.querySelector('html')
|
||||
return function (newColor) {
|
||||
const color = new ColorProcessor(newColor)
|
||||
const hexToRgba = input => color.rgbToString(color.hexToRgba(input))
|
||||
|
||||
const shadowColor = color.hexToRgba(newColor + "70");
|
||||
const preview = document.querySelector("div.custom-color-preview");
|
||||
preview.style.background = newColor;
|
||||
preview.style.boxShadow = `0px 2px 8px 1px rgba(${shadowColor.r},${shadowColor.g},${shadowColor.b},${shadowColor.a})`;
|
||||
|
||||
html.style.setProperty("--theme-color", newColor);
|
||||
for (let opacity = 10; opacity <= 90; opacity += 10)
|
||||
{
|
||||
html.style.setProperty(`--theme-color-${opacity}`, hexToRgba(newColor + opacity));
|
||||
}
|
||||
html.style.setProperty("--foreground-color", color.foreground);
|
||||
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);
|
||||
html.style.setProperty("--invert-filter", color.filterInvert);
|
||||
};
|
||||
})();
|
||||
}
|
||||
setupDom()
|
||||
{
|
||||
const input = document.querySelector(`input[key='customStyleColor']`);
|
||||
input.addEventListener("change", () =>
|
||||
{
|
||||
this.reloadColor(input.value);
|
||||
});
|
||||
const grid = document.querySelector(".predefined-colors-grid");
|
||||
for (const color of Object.values(colors))
|
||||
{
|
||||
const block = document.createElement("div");
|
||||
grid.insertAdjacentElement("beforeend", block);
|
||||
block.classList.add("predefined-colors-grid-block");
|
||||
block.style.background = color;
|
||||
block.setAttribute("data-color", color);
|
||||
block.addEventListener("click", e =>
|
||||
{
|
||||
const newColor = e.target.getAttribute("data-color");
|
||||
input.value = newColor;
|
||||
raiseEvent(input, "input");
|
||||
raiseEvent(input, "change");
|
||||
// document.querySelector("div.custom-color-preview").click();
|
||||
});
|
||||
html.style.setProperty('--theme-color', newColor)
|
||||
for (let opacity = 10; opacity <= 90; opacity += 10) {
|
||||
html.style.setProperty(`--theme-color-${opacity}`, hexToRgba(newColor + opacity))
|
||||
}
|
||||
const box = document.querySelector(".predefined-colors");
|
||||
document.querySelector("div.custom-color-preview").addEventListener("click", () =>
|
||||
{
|
||||
box.classList.toggle("opened");
|
||||
});
|
||||
html.style.setProperty('--foreground-color', color.foreground)
|
||||
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)
|
||||
html.style.setProperty('--invert-filter', color.filterInvert)
|
||||
}
|
||||
})()
|
||||
}
|
||||
setupDom () {
|
||||
const input = document.querySelector(`input[key='customStyleColor']`)
|
||||
input.addEventListener('change', () => {
|
||||
this.reloadColor(input.value)
|
||||
})
|
||||
const grid = document.querySelector('.predefined-colors-grid')
|
||||
for (const color of Object.values(colors)) {
|
||||
const block = document.createElement('div')
|
||||
grid.insertAdjacentElement('beforeend', block)
|
||||
block.classList.add('predefined-colors-grid-block')
|
||||
block.style.background = color
|
||||
block.setAttribute('data-color', color)
|
||||
block.addEventListener('click', e => {
|
||||
const newColor = e.target.getAttribute('data-color')
|
||||
input.value = newColor
|
||||
raiseEvent(input, 'input')
|
||||
raiseEvent(input, 'change')
|
||||
})
|
||||
}
|
||||
const box = document.querySelector('.predefined-colors')
|
||||
document.querySelector('div.custom-color-preview').addEventListener('click', () => {
|
||||
box.classList.toggle('opened')
|
||||
})
|
||||
}
|
||||
}
|
||||
export default {
|
||||
export: { ThemeColors }
|
||||
};
|
||||
export: { ThemeColors }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user