From 7a7a6290634f76a7defbd1868387422457a31a01 Mon Sep 17 00:00:00 2001
From: limepotato <limepot@protonmail.ch>
Date: Wed, 30 Oct 2024 15:45:39 -0600
Subject: [PATCH] color scheme randomizer

---
 frontend/public/scripts/main.js             | 231 +++++++++++++++++++-
 frontend/public/styles/css/color-scheme.css | 226 ++++++-------------
 frontend/src/layouts/Layout.astro           |   2 +-
 3 files changed, 297 insertions(+), 162 deletions(-)

diff --git a/frontend/public/scripts/main.js b/frontend/public/scripts/main.js
index 3c6c01f..ee4f8d0 100644
--- a/frontend/public/scripts/main.js
+++ b/frontend/public/scripts/main.js
@@ -1,11 +1,12 @@
 const meowEndpoint = "https://nelle.observer/api/meow";
 const beepEndpoint = "https://nelle.observer/api/beep";
 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.
 function onLoad() {
   jsEnabled();
+  checkThemeStorage();
   getSGAState();
   redirect();
   checkBoxes();
@@ -121,4 +122,232 @@ function showNtfyInfo() {
     ntfyInfoButton.innerHTML = "[show more info]"
     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()
+  }
 }
\ No newline at end of file
diff --git a/frontend/public/styles/css/color-scheme.css b/frontend/public/styles/css/color-scheme.css
index 931002c..2498012 100644
--- a/frontend/public/styles/css/color-scheme.css
+++ b/frontend/public/styles/css/color-scheme.css
@@ -1,83 +1,84 @@
 /* default */
 :root {
-    --text: #f2ede7;
-    --background: var(--background-950);
-    --primary: #d7bfa2;
-    --secondary: #76552e;
-    --accent: #ffa941;
+    --text: #f5efef;
+    --background: #030303;
+    --primary: #9a9a9a;
+    --secondary: #505050;
+    /*--accent: #232323;*/
+    --accent: var(--accent-500);
 
     --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);
     --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;
+    --text-50: #f5efef;
+    --text-100: #ebe0e0;
+    --text-200: #d8c0c0;
+    --text-300: #c4a1a1;
+    --text-400: #b08282;
+    --text-500: #9d6262;
+    --text-600: #7d4f4f;
+    --text-700: #5e3b3b;
+    --text-800: #3f2727;
+    --text-900: #1f1414;
+    --text-950: #100a0a;
 
-    --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;
+    --background-50: #f2f2f2;
+    --background-100: #e6e6e6;
+    --background-200: #cccccc;
+    --background-300: #b3b3b3;
+    --background-400: #999999;
+    --background-500: #808080;
+    --background-600: #666666;
+    --background-700: #4d4d4d;
+    --background-800: #333333;
+    --background-900: #1a1a1a;
+    --background-950: #0d0d0d;
 
-    --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;
+    --primary-50: #f2f2f2;
+    --primary-100: #e6e6e6;
+    --primary-200: #cccccc;
+    --primary-300: #b3b3b3;
+    --primary-400: #999999;
+    --primary-500: #808080;
+    --primary-600: #666666;
+    --primary-700: #4d4d4d;
+    --primary-800: #333333;
+    --primary-900: #1a1a1a;
+    --primary-950: #0d0d0d;
 
-    --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;
+    --secondary-50: #f2f2f2;
+    --secondary-100: #e6e6e6;
+    --secondary-200: #cccccc;
+    --secondary-300: #b3b3b3;
+    --secondary-400: #999999;
+    --secondary-500: #808080;
+    --secondary-600: #666666;
+    --secondary-700: #4d4d4d;
+    --secondary-800: #333333;
+    --secondary-900: #1a1a1a;
+    --secondary-950: #0d0d0d;
 
-    --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;
+    --accent-50: #f2f2f2;
+    --accent-100: #e6e6e6;
+    --accent-200: #cccccc;
+    --accent-300: #b3b3b3;
+    --accent-400: #999999;
+    --accent-500: #808080;
+    --accent-600: #666666;
+    --accent-700: #4d4d4d;
+    --accent-800: #333333;
+    --accent-900: #1a1a1a;
+    --accent-950: #0d0d0d;
 
-    --alt-accent: #60fe35;
+    --alt-accent: #677967;
 
-    --glitch-1: var(--alt-accent-600);
-    --glitch-2: var(--alt-accent-700);
-    --glitch-3: var(--alt-accent-800);
+    --glitch-1: var(--alt-accent-200);
+    --glitch-2: var(--alt-accent-300);
+    --glitch-3: var(--alt-accent-400);
 
     --alt-accent-50: #ebffe6;
     --alt-accent-100: #d7ffcc;
@@ -90,99 +91,4 @@
     --alt-accent-800: #166501;
     --alt-accent-900: #0b3300;
     --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;
 }
\ No newline at end of file
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index ddf3eb7..74550da 100755
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -16,7 +16,7 @@ const { title } = Astro.props;
   <head>
     <Head title={title} />
   </head>
-  <body onload="onLoad()" id="body">
+  <body onload="onLoad()" id="green">
     <Header />
     <section class="content center">
       <h1 class="title">{title}</h1>