Bilibili-Evolved/utils/gui-settings/theme-colors.js
2019-03-24 12:37:22 +08:00

84 lines
3.2 KiB
JavaScript

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));
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();
});
}
const box = document.querySelector(".predefined-colors");
document.querySelector("div.custom-color-preview").addEventListener("click", () =>
{
box.classList.toggle("opened");
});
}
}
export default {
export: { ThemeColors }
};