Fix bug in theme color

This commit is contained in:
the1812 2019-07-30 21:55:26 +08:00
parent f9367627f0
commit 82be414f18
4 changed files with 67 additions and 83 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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}}}})();

View File

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