132 lines
6.3 KiB
JavaScript
132 lines
6.3 KiB
JavaScript
if (!localStorage.getItem("theme")) {
|
|
localStorage.setItem("theme", "light-breeze");
|
|
}
|
|
|
|
function plan9_acme()
|
|
{
|
|
document.documentElement.style.setProperty("--bg", "#FFFFEC");
|
|
document.documentElement.style.setProperty("--accent-bg", "#EEEEA7");
|
|
document.documentElement.style.setProperty("--text", "#424242");
|
|
document.documentElement.style.setProperty("--text-light", "#999957");
|
|
document.documentElement.style.setProperty("--border", "#B7B19C");
|
|
document.documentElement.style.setProperty("--accent", "#030093");
|
|
document.documentElement.style.setProperty("--accent-hover", "#2A8DC5");
|
|
document.documentElement.style.setProperty("--accent-text", "var(--bg)");
|
|
document.documentElement.style.setProperty("--code", "#57864E");
|
|
document.documentElement.style.setProperty("--preformatted", "#424242");
|
|
document.documentElement.style.setProperty("--marked", "#B85C57");
|
|
document.documentElement.style.setProperty("--disabled", "#EAEBDB");
|
|
}
|
|
|
|
function light_breeze()
|
|
{
|
|
document.documentElement.style.setProperty("--bg", "#F0F2F5");
|
|
document.documentElement.style.setProperty("--accent-bg", "#E3E6EA");
|
|
document.documentElement.style.setProperty("--text", "#2C2C2C");
|
|
document.documentElement.style.setProperty("--text-light", "#9A9A9A");
|
|
document.documentElement.style.setProperty("--border", "#D1D7DC");
|
|
document.documentElement.style.setProperty("--accent", "#3454D1");
|
|
document.documentElement.style.setProperty("--accent-hover", "#6A8ED8");
|
|
document.documentElement.style.setProperty("--accent-text", "var(--bg)");
|
|
document.documentElement.style.setProperty("--code", "#3C9E47");
|
|
document.documentElement.style.setProperty("--preformatted", "#2C2C2C");
|
|
document.documentElement.style.setProperty("--marked", "#D6674B");
|
|
document.documentElement.style.setProperty("--disabled", "#F1F3F6");
|
|
}
|
|
|
|
function bold_navy()
|
|
{
|
|
document.documentElement.style.setProperty("--bg", "#F0F4FF");
|
|
document.documentElement.style.setProperty("--accent-bg", "#E0E6F1");
|
|
document.documentElement.style.setProperty("--text", "#2D3A58");
|
|
document.documentElement.style.setProperty("--text-light", "#7A8C9E");
|
|
document.documentElement.style.setProperty("--border", "#BCC6D8");
|
|
document.documentElement.style.setProperty("--accent", "#1E2A5B");
|
|
document.documentElement.style.setProperty("--accent-hover", "#2A3F80");
|
|
document.documentElement.style.setProperty("--accent-text", "var(--bg)");
|
|
document.documentElement.style.setProperty("--code", "#4A7C2F");
|
|
document.documentElement.style.setProperty("--preformatted", "#2D3A58");
|
|
document.documentElement.style.setProperty("--marked", "#F18F5D");
|
|
document.documentElement.style.setProperty("--disabled", "#E8ECF5");
|
|
}
|
|
|
|
function soft_lavander()
|
|
{
|
|
document.documentElement.style.setProperty("--bg", "#F5F2FF");
|
|
document.documentElement.style.setProperty("--accent-bg", "#E1D1FF");
|
|
document.documentElement.style.setProperty("--text", "#3D2B6F");
|
|
document.documentElement.style.setProperty("--text-light", "#8D8B9B");
|
|
document.documentElement.style.setProperty("--border", "#C1B5D6");
|
|
document.documentElement.style.setProperty("--accent", "#7A4FE3");
|
|
document.documentElement.style.setProperty("--accent-hover", "#8D6DE8");
|
|
document.documentElement.style.setProperty("--accent-text", "var(--bg)");
|
|
document.documentElement.style.setProperty("--code", "#5D7C42");
|
|
document.documentElement.style.setProperty("--preformatted", "#3D2B6F");
|
|
document.documentElement.style.setProperty("--marked", "#F77A63");
|
|
document.documentElement.style.setProperty("--disabled", "#E9E4FF");
|
|
}
|
|
|
|
function neon_cyber()
|
|
{
|
|
document.documentElement.style.setProperty("--bg", "#121212");
|
|
document.documentElement.style.setProperty("--accent-bg", "#1C1C1C");
|
|
document.documentElement.style.setProperty("--text", "#00FF00");
|
|
document.documentElement.style.setProperty("--text-light", "#A1FF3D");
|
|
document.documentElement.style.setProperty("--border", "#006400");
|
|
document.documentElement.style.setProperty("--accent", "#FF007F");
|
|
document.documentElement.style.setProperty("--accent-hover", "#FF3399");
|
|
document.documentElement.style.setProperty("--accent-text", "var(--bg)");
|
|
document.documentElement.style.setProperty("--code", "#2AFF32");
|
|
document.documentElement.style.setProperty("--preformatted", "#00FF00");
|
|
document.documentElement.style.setProperty("--marked", "#FF6F00");
|
|
document.documentElement.style.setProperty("--disabled", "#333333");
|
|
}
|
|
|
|
function dark_easy()
|
|
{
|
|
document.documentElement.style.setProperty("--bg", "#1A1A1A");
|
|
document.documentElement.style.setProperty("--accent-bg", "#2E2E2E");
|
|
document.documentElement.style.setProperty("--text", "#DCDCDC");
|
|
document.documentElement.style.setProperty("--text-light", "#A3A3A3");
|
|
document.documentElement.style.setProperty("--border", "#585858");
|
|
document.documentElement.style.setProperty("--accent", "#FF5722");
|
|
document.documentElement.style.setProperty("--accent-hover", "#F4511E");
|
|
document.documentElement.style.setProperty("--accent-text", "#1A1A1A");
|
|
document.documentElement.style.setProperty("--code", "#8BC34A");
|
|
document.documentElement.style.setProperty("--preformatted", "#A3A3A3");
|
|
document.documentElement.style.setProperty("--marked", "#FF7043");
|
|
document.documentElement.style.setProperty("--disabled", "#383838");
|
|
}
|
|
|
|
const themes = {
|
|
"light-breeze": light_breeze,
|
|
"plan9-acme": plan9_acme,
|
|
"bold-navy": bold_navy,
|
|
"soft-lavander": soft_lavander,
|
|
"neon-cyber": neon_cyber,
|
|
"dark-easy": dark_easy,
|
|
};
|
|
|
|
|
|
const footer = document.getElementsByTagName("footer")[0];
|
|
const select = document.createElement("select");
|
|
select.id = "theme-picker";
|
|
footer.children[0].appendChild(select);
|
|
for (const prop in themes) {
|
|
const option = document.createElement("option");
|
|
option.value = prop;
|
|
option.innerHTML = prop;
|
|
if (prop == localStorage.getItem("theme")) {
|
|
option.selected = true;
|
|
}
|
|
select.appendChild(option);
|
|
}
|
|
|
|
const theme_picker = document.getElementById("theme-picker");
|
|
theme_picker.addEventListener("change", function (e) {
|
|
const theme_name = e.target.value;
|
|
localStorage.setItem("theme", theme_name);
|
|
themes[localStorage.getItem("theme")]()
|
|
});
|
|
themes[localStorage.getItem("theme")]()
|