color scheme randomizer

This commit is contained in:
nelle 2024-10-30 15:45:39 -06:00
parent de57c906f0
commit 7a7a629063
3 changed files with 297 additions and 162 deletions

View file

@ -1,11 +1,12 @@
const meowEndpoint = "https://nelle.observer/api/meow"; const meowEndpoint = "https://nelle.observer/api/meow";
const beepEndpoint = "https://nelle.observer/api/beep"; const beepEndpoint = "https://nelle.observer/api/beep";
const kaomojiEndpoint = "https://nelle.observer/api/kaomoji"; const kaomojiEndpoint = "https://nelle.observer/api/kaomoji";
var random_boolean = Math.random() < 0.5; var colorBool = Math.random() < 0.5;
// loads all the functions to be loaded on load, pretty simple, it loads shit on load. // loads all the functions to be loaded on load, pretty simple, it loads shit on load.
function onLoad() { function onLoad() {
jsEnabled(); jsEnabled();
checkThemeStorage();
getSGAState(); getSGAState();
redirect(); redirect();
checkBoxes(); checkBoxes();
@ -121,4 +122,232 @@ function showNtfyInfo() {
ntfyInfoButton.innerHTML = "[show more info]" ntfyInfoButton.innerHTML = "[show more info]"
isNtfyInfoHidden = true; isNtfyInfoHidden = true;
} }
}
//// color scheme changer
///TODO: make default gray-scale?
const headTag = document.getElementsByTagName('head')[0];
const styleTag = document.createElement("style");
function checkThemeStorage() {
if (sessionStorage.getItem("themeGreen")) {
setGreen()
}
if (sessionStorage.getItem("themeOrange")) {
setOrange()
}
if (!sessionStorage.getItem("themeOrange") && !sessionStorage.getItem("themeGreen")) {
getTheme()
}
}
function setGreen() {
styleTag.innerHTML = `
:root {
--text: #e7eeea;
--background: #060d09;
--primary: #9ae2b9;
--secondary: #14904a;
--accent: #47e48a;
--content-gradient: linear-gradient(to bottom right, var(--secondary-800), var(--primary-900));
--accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
--link: var(--accent-300);
--visited: var(--accent-400);
--hover: var(--accent-500);
--text-50: #f0f4f2;
--text-100: #e1eae5;
--text-200: #c3d5cb;
--text-300: #a5c0b1;
--text-400: #88aa97;
--text-500: #6a957d;
--text-600: #557764;
--text-700: #3f5a4b;
--text-800: #2a3c32;
--text-900: #151e19;
--text-950: #0b0f0c;
--background-50: #eef7f2;
--background-100: #dcefe4;
--background-200: #b9dfc9;
--background-300: #96cfaf;
--background-400: #73bf94;
--background-500: #50af79;
--background-600: #408c61;
--background-700: #306949;
--background-800: #204630;
--background-900: #102318;
--background-950: #08110c;
--primary-50: #ebf9f1;
--primary-100: #d7f4e4;
--primary-200: #b0e8c8;
--primary-300: #88ddad;
--primary-400: #61d192;
--primary-500: #39c676;
--primary-600: #2e9e5f;
--primary-700: #227747;
--primary-800: #174f2f;
--primary-900: #0b2818;
--primary-950: #06140c;
--secondary-50: #e9fcf1;
--secondary-100: #d2f9e3;
--secondary-200: #a5f3c7;
--secondary-300: #78edab;
--secondary-400: #4be78f;
--secondary-500: #1fe073;
--secondary-600: #18b45c;
--secondary-700: #128745;
--secondary-800: #0c5a2e;
--secondary-900: #062d17;
--secondary-950: #03160b;
--accent-50: #e9fcf1;
--accent-100: #d3f8e3;
--accent-200: #a6f2c7;
--accent-300: #7aebab;
--accent-400: #4ee48f;
--accent-500: #21de73;
--accent-600: #1bb15c;
--accent-700: #148545;
--accent-800: #0d592e;
--accent-900: #072c17;
--accent-950: #03160b;
--alt-accent: #fbb055;
/* TODO: Alter This */
--glitch-1: var(--alt-accent-400);
--glitch-2: var(--alt-accent-500);
--glitch-3: var(--alt-accent-600);
--alt-accent-50: #fef3e7;
--alt-accent-100: #fce8cf;
--alt-accent-200: #fad19e;
--alt-accent-300: #f7b96e;
--alt-accent-400: #f5a23d;
--alt-accent-500: #f28b0d;
--alt-accent-600: #c26f0a;
--alt-accent-700: #915308;
--alt-accent-800: #613805;
--alt-accent-900: #301c03;
--alt-accent-950: #180e01;
}
`;
headTag.appendChild(styleTag);
sessionStorage.setItem("themeGreen", 1);
}
function setOrange() {
styleTag.innerHTML = `
:root {
--text: #f2ede7;
--background: var(--background-950);
--primary: #d7bfa2;
--secondary: #76552e;
--accent: #ffa941;
--content-gradient: linear-gradient(to bottom right, var(--secondary-800), var(--primary-900));
--accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
--link: var(--accent-300);
--visited: var(--accent-400);
--hover: var(--accent-500);
--text-50: #f6f3ee;
--text-100: #ede6de;
--text-200: #dbcebd;
--text-300: #c9b59c;
--text-400: #b89c7a;
--text-500: #a68359;
--text-600: #856947;
--text-700: #634f36;
--text-800: #423524;
--text-900: #211a12;
--text-950: #110d09;
--background-50: #f7f3ee;
--background-100: #efe7dc;
--background-200: #dfcfb9;
--background-300: #cfb696;
--background-400: #bf9e73;
--background-500: #af8650;
--background-600: #8c6b40;
--background-700: #695030;
--background-800: #463620;
--background-900: #231b10;
--background-950: #110d08;
--primary-50: #f7f3ed;
--primary-100: #f0e7db;
--primary-200: #e0ceb8;
--primary-300: #d1b694;
--primary-400: #c29d70;
--primary-500: #b3854d;
--primary-600: #8f6a3d;
--primary-700: #6b502e;
--primary-800: #47351f;
--primary-900: #241b0f;
--primary-950: #120d08;
--secondary-50: #f8f3ed;
--secondary-100: #f1e7da;
--secondary-200: #e2ceb6;
--secondary-300: #d4b691;
--secondary-400: #c69d6c;
--secondary-500: #b88547;
--secondary-600: #936a39;
--secondary-700: #6e502b;
--secondary-800: #49351d;
--secondary-900: #251b0e;
--secondary-950: #120d07;
--accent-50: #fff4e5;
--accent-100: #ffe8cc;
--accent-200: #ffd199;
--accent-300: #ffba66;
--accent-400: #ffa333;
--accent-500: #ff8c00;
--accent-600: #cc7000;
--accent-700: #995400;
--accent-800: #663800;
--accent-900: #331c00;
--accent-950: #1a0e00;
--alt-accent: #60fe35;
--glitch-1: var(--alt-accent-600);
--glitch-2: var(--alt-accent-700);
--glitch-3: var(--alt-accent-800);
--alt-accent-50: #ebffe6;
--alt-accent-100: #d7ffcc;
--alt-accent-200: #affe9a;
--alt-accent-300: #88fe67;
--alt-accent-400: #60fe34;
--alt-accent-500: #38fe01;
--alt-accent-600: #2dcb01;
--alt-accent-700: #229801;
--alt-accent-800: #166501;
--alt-accent-900: #0b3300;
--alt-accent-950: #061900;
}
`;
headTag.appendChild(styleTag);
sessionStorage.setItem("themeOrange", 1);
}
function getTheme() {
if (colorBool) {
// if true: green
setGreen()
}
else {
// if false: orange
setOrange()
}
} }

View file

@ -1,83 +1,84 @@
/* default */ /* default */
:root { :root {
--text: #f2ede7; --text: #f5efef;
--background: var(--background-950); --background: #030303;
--primary: #d7bfa2; --primary: #9a9a9a;
--secondary: #76552e; --secondary: #505050;
--accent: #ffa941; /*--accent: #232323;*/
--accent: var(--accent-500);
--content-gradient: linear-gradient(to bottom right, var(--secondary-800), var(--primary-900)); --content-gradient: linear-gradient(to bottom right, var(--secondary-800), var(--primary-900));
--accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%); --accent-gradient: linear-gradient(to bottom right, var(--accent-300), var(--accent-200) 30%, var(--text) 60%);
--link: var(--accent-300); --link: var(--accent-300);
--visited: var(--accent-400); --visited: var(--accent-400);
--hover: var(--accent-500); --hover: var(--accent-500);
--text-50: #f6f3ee; --text-50: #f5efef;
--text-100: #ede6de; --text-100: #ebe0e0;
--text-200: #dbcebd; --text-200: #d8c0c0;
--text-300: #c9b59c; --text-300: #c4a1a1;
--text-400: #b89c7a; --text-400: #b08282;
--text-500: #a68359; --text-500: #9d6262;
--text-600: #856947; --text-600: #7d4f4f;
--text-700: #634f36; --text-700: #5e3b3b;
--text-800: #423524; --text-800: #3f2727;
--text-900: #211a12; --text-900: #1f1414;
--text-950: #110d09; --text-950: #100a0a;
--background-50: #f7f3ee; --background-50: #f2f2f2;
--background-100: #efe7dc; --background-100: #e6e6e6;
--background-200: #dfcfb9; --background-200: #cccccc;
--background-300: #cfb696; --background-300: #b3b3b3;
--background-400: #bf9e73; --background-400: #999999;
--background-500: #af8650; --background-500: #808080;
--background-600: #8c6b40; --background-600: #666666;
--background-700: #695030; --background-700: #4d4d4d;
--background-800: #463620; --background-800: #333333;
--background-900: #231b10; --background-900: #1a1a1a;
--background-950: #110d08; --background-950: #0d0d0d;
--primary-50: #f7f3ed; --primary-50: #f2f2f2;
--primary-100: #f0e7db; --primary-100: #e6e6e6;
--primary-200: #e0ceb8; --primary-200: #cccccc;
--primary-300: #d1b694; --primary-300: #b3b3b3;
--primary-400: #c29d70; --primary-400: #999999;
--primary-500: #b3854d; --primary-500: #808080;
--primary-600: #8f6a3d; --primary-600: #666666;
--primary-700: #6b502e; --primary-700: #4d4d4d;
--primary-800: #47351f; --primary-800: #333333;
--primary-900: #241b0f; --primary-900: #1a1a1a;
--primary-950: #120d08; --primary-950: #0d0d0d;
--secondary-50: #f8f3ed; --secondary-50: #f2f2f2;
--secondary-100: #f1e7da; --secondary-100: #e6e6e6;
--secondary-200: #e2ceb6; --secondary-200: #cccccc;
--secondary-300: #d4b691; --secondary-300: #b3b3b3;
--secondary-400: #c69d6c; --secondary-400: #999999;
--secondary-500: #b88547; --secondary-500: #808080;
--secondary-600: #936a39; --secondary-600: #666666;
--secondary-700: #6e502b; --secondary-700: #4d4d4d;
--secondary-800: #49351d; --secondary-800: #333333;
--secondary-900: #251b0e; --secondary-900: #1a1a1a;
--secondary-950: #120d07; --secondary-950: #0d0d0d;
--accent-50: #fff4e5; --accent-50: #f2f2f2;
--accent-100: #ffe8cc; --accent-100: #e6e6e6;
--accent-200: #ffd199; --accent-200: #cccccc;
--accent-300: #ffba66; --accent-300: #b3b3b3;
--accent-400: #ffa333; --accent-400: #999999;
--accent-500: #ff8c00; --accent-500: #808080;
--accent-600: #cc7000; --accent-600: #666666;
--accent-700: #995400; --accent-700: #4d4d4d;
--accent-800: #663800; --accent-800: #333333;
--accent-900: #331c00; --accent-900: #1a1a1a;
--accent-950: #1a0e00; --accent-950: #0d0d0d;
--alt-accent: #60fe35; --alt-accent: #677967;
--glitch-1: var(--alt-accent-600); --glitch-1: var(--alt-accent-200);
--glitch-2: var(--alt-accent-700); --glitch-2: var(--alt-accent-300);
--glitch-3: var(--alt-accent-800); --glitch-3: var(--alt-accent-400);
--alt-accent-50: #ebffe6; --alt-accent-50: #ebffe6;
--alt-accent-100: #d7ffcc; --alt-accent-100: #d7ffcc;
@ -90,99 +91,4 @@
--alt-accent-800: #166501; --alt-accent-800: #166501;
--alt-accent-900: #0b3300; --alt-accent-900: #0b3300;
--alt-accent-950: #061900; --alt-accent-950: #061900;
}
/* green */
#green :root {
--text: #e7eeea;
--background: #060d09;
--primary: #9ae2b9;
--secondary: #14904a;
--accent: #47e48a;
--content-gradient: linear-gradient(to bottom right, var(--secondary-800), var(--primary-900));
--accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
--link: var(--accent-300);
--visited: var(--accent-400);
--hover: var(--accent-500);
--text-50: #f0f4f2;
--text-100: #e1eae5;
--text-200: #c3d5cb;
--text-300: #a5c0b1;
--text-400: #88aa97;
--text-500: #6a957d;
--text-600: #557764;
--text-700: #3f5a4b;
--text-800: #2a3c32;
--text-900: #151e19;
--text-950: #0b0f0c;
--background-50: #eef7f2;
--background-100: #dcefe4;
--background-200: #b9dfc9;
--background-300: #96cfaf;
--background-400: #73bf94;
--background-500: #50af79;
--background-600: #408c61;
--background-700: #306949;
--background-800: #204630;
--background-900: #102318;
--background-950: #08110c;
--primary-50: #ebf9f1;
--primary-100: #d7f4e4;
--primary-200: #b0e8c8;
--primary-300: #88ddad;
--primary-400: #61d192;
--primary-500: #39c676;
--primary-600: #2e9e5f;
--primary-700: #227747;
--primary-800: #174f2f;
--primary-900: #0b2818;
--primary-950: #06140c;
--secondary-50: #e9fcf1;
--secondary-100: #d2f9e3;
--secondary-200: #a5f3c7;
--secondary-300: #78edab;
--secondary-400: #4be78f;
--secondary-500: #1fe073;
--secondary-600: #18b45c;
--secondary-700: #128745;
--secondary-800: #0c5a2e;
--secondary-900: #062d17;
--secondary-950: #03160b;
--accent-50: #e9fcf1;
--accent-100: #d3f8e3;
--accent-200: #a6f2c7;
--accent-300: #7aebab;
--accent-400: #4ee48f;
--accent-500: #21de73;
--accent-600: #1bb15c;
--accent-700: #148545;
--accent-800: #0d592e;
--accent-900: #072c17;
--accent-950: #03160b;
--alt-accent: #fbb055;
/* TODO: Alter This */
--glitch-1: var(--alt-accent-400);
--glitch-2: var(--alt-accent-500);
--glitch-3: var(--alt-accent-600);
--alt-accent-50: #fef3e7;
--alt-accent-100: #fce8cf;
--alt-accent-200: #fad19e;
--alt-accent-300: #f7b96e;
--alt-accent-400: #f5a23d;
--alt-accent-500: #f28b0d;
--alt-accent-600: #c26f0a;
--alt-accent-700: #915308;
--alt-accent-800: #613805;
--alt-accent-900: #301c03;
--alt-accent-950: #180e01;
} }

View file

@ -16,7 +16,7 @@ const { title } = Astro.props;
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body onload="onLoad()" id="body"> <body onload="onLoad()" id="green">
<Header /> <Header />
<section class="content center"> <section class="content center">
<h1 class="title">{title}</h1> <h1 class="title">{title}</h1>