mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
84 lines
3.2 KiB
JavaScript
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 }
|
|
}; |