feat: added tree and hacker themes

Makefile

@@ -32,6 +32,10 @@ build_python: check_python
 
 # JAVASCRIPT TARGETS
 
+.PHONY: install_js_reqs
+install_js_reqs:
+	npm i
+
 .PHONY: format_js
 format_js:
 	npm run format-javascript

utilities_for_me/web_app/client/react/Footer.jsx

@@ -27,6 +27,15 @@ function Footer ({ currentTheme, setTheme }) {
         <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
           <button value='theme-pink' className='focus:outline-none' onClick={handleThemeToggle}>💖</button>
         </span>
+        <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
+          |
+        </span>
+        <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
+          <button value='theme-tree' className='focus:outline-none' onClick={handleThemeToggle}>🌳</button>
+        </span>
+        <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
+          <button value='theme-hacker' className='focus:outline-none' onClick={handleThemeToggle}>🖥</button>
+        </span>
       </div>
     </div>
   )

utilities_for_me/web_app/client/react/styles/hacker-theme.css

@@ -0,0 +1,65 @@
+.theme-hacker {
+  font-family: 'Inconsolata', monospace;
+  /* Base */
+  --primary-fill: var(--blue-grey-700);
+  --primary-complement: var(--light-green-200);
+  --secondary-fill: var(--blue-grey-800);
+  --secondary-complement: var(--amber-400);
+  --emphasis-fill: var(--pink-300);
+  --emphasis-complement: var(--pink-200);
+  /* Base Text */
+  --text-primary: var(--amber-200);
+  --text-secondary: var(--blue-grey-200);
+  --text-muted: var(--grey-300);
+  --text-emphasis: var(--pink-500);
+  /* Inputs */
+  --input-primary-fill: var(--blue-grey-900);
+  --input-primary-complement: var(--amber-300);
+  --input-secondary-fill: var(--grey-200);
+  --input-secondary-complement: var(--grey-200);
+  --input-emphasis-fill: var(--grey-300);
+  --input-emphasis-complement: var(--grey-200);
+  /* Input Texts */
+  --input-text-primary: var(--green-50);
+  --input-text-secondary: var(--grey-400);
+  --input-text-muted: var(--grey-100);
+  --input-text-emphasis: var(--pink-600);
+  /* Buttons */
+  --btn-primary-fill: var(--grey-200);
+  --btn-primary-complement: var(--gray-600);
+  --btn-primary-fill-hover: var(--grey-200);
+  --btn-primary-complement-hover: var(--gray-600);
+  --btn-primary-fill-disabled: var(--grey-200);
+  --btn-primary-complement-disabled: var(--gray-600);
+  --btn-secondary-fill: var(--grey-200);
+  --btn-secondary-complement: var(--gray-600);
+  --btn-secondary-fill-hover: var(--grey-200);
+  --btn-secondary-complement-hover: var(--gray-600);
+  --btn-secondary-fill-disabled: var(--grey-200);
+  --btn-secondary-complement-disabled: var(--gray-600);
+  --btn-emphasis-fill: var(--grey-200);
+  --btn-emphasis-complement: var(--gray-600);
+  --btn-emphasis-fill-hover: var(--grey-200);
+  --btn-emphasis-complement-hover: var(--gray-600);
+  --btn-emphasis-fill-disabled: var(--grey-200);
+  --btn-emphasis-complement-disabled: var(--gray-600);
+  /* Button Texts */
+  --btn-text-primary: var(--gray-600);
+  --btn-text-primary-hover: var(--gray-600);
+  --btn-text-primary-disabled: var(--gray-600);
+  --btn-text-secondary: var(--gray-600);
+  --btn-text-secondary-hover: var(--gray-600);
+  --btn-text-secondary-disabled: var(--gray-600);
+  --btn-text-emphasis: var(--gray-600);
+  --btn-text-emphasis-hover: var(--gray-600);
+  --btn-text-emphasis-disabled: var(--gray-600);
+  /* Components */
+  --comp-primary-fill: var(--amber-300);
+  --comp-secondary-fill: var(--green-100);
+  --comp-emphasis-fill: var(--pink-600);
+  /* Component Texts */
+  --comp-text-primary: var(--blue-grey-700);
+  --comp-text-secondary: var(--blue-grey-500);
+  --comp-text-muted: var(--grey-300);
+  --comp-text-emphasis: var(--pink-500);
+}

utilities_for_me/web_app/client/react/styles/index.css

@@ -6,6 +6,9 @@
 @import url("./green-theme.css");
 @import url("./light-theme.css");
 @import url("./dark-theme.css");
+@import url("./tree-theme.css");
+@import url("./hacker-theme.css");
+
 
 @tailwind base;
 @tailwind components;
@@ -28,11 +31,11 @@ html, body {
 }
 
 @keyframes blinkingText{
-  0%{     color: #212529;    }
-  49%{    color: #212529; }
+  0%{     color: var(text-primary);    }
+  49%{    color: var(text-primary); }
   60%{    color: transparent; }
   99%{    color:transparent;  }
-  100%{   color: #212529;    }
+  100%{   color: var(text-primary);    }
 }
 
 *::selection {

utilities_for_me/web_app/client/react/styles/tree-theme.css

@@ -0,0 +1,77 @@
+.theme-tree {
+  font-family: 'Noto Sans HK', sans-serif;
+
+    /* Base */
+    --primary-fill: var(--brown-400);
+    --primary-complement: var(--green-800);
+    --secondary-fill: var(--brown-500);
+    --secondary-complement: var(--green-500);
+    --emphasis-fill: var(--pink-300);
+    --emphasis-complement: var(--pink-200);
+
+    /* Base Text */
+    --text-primary: var(--green-50);
+    --text-secondary: var(--green-400);
+    --text-muted: var(--grey-300);
+    --text-emphasis: var(--green-500);
+
+  /* Inputs */
+  --input-primary-fill: var(--brown-300);
+  --input-primary-complement: var(--green-500);
+  --input-secondary-fill: var(--grey-200);
+  --input-secondary-complement: var(--grey-200);
+  --input-emphasis-fill: var(--grey-300);
+  --input-emphasis-complement: var(--grey-200);
+
+  /* Input Texts */
+  --input-text-primary: var(--green-50);
+  --input-text-secondary: var(--grey-400);
+  --input-text-muted: var(--grey-100);
+  --input-text-emphasis: var(--pink-600);
+
+  /* Buttons */
+  --btn-primary-fill: var(--grey-200);
+  --btn-primary-complement: var(--gray-600);
+  --btn-primary-fill-hover: var(--grey-200);
+  --btn-primary-complement-hover: var(--gray-600);
+  --btn-primary-fill-disabled: var(--grey-200);
+  --btn-primary-complement-disabled: var(--gray-600);
+
+  --btn-secondary-fill: var(--grey-200);
+  --btn-secondary-complement: var(--gray-600);
+  --btn-secondary-fill-hover: var(--grey-200);
+  --btn-secondary-complement-hover: var(--gray-600);
+  --btn-secondary-fill-disabled: var(--grey-200);
+  --btn-secondary-complement-disabled: var(--gray-600);
+
+  --btn-emphasis-fill: var(--grey-200);
+  --btn-emphasis-complement: var(--gray-600);
+  --btn-emphasis-fill-hover: var(--grey-200);
+  --btn-emphasis-complement-hover: var(--gray-600);
+  --btn-emphasis-fill-disabled: var(--grey-200);
+  --btn-emphasis-complement-disabled: var(--gray-600);
+
+    /* Button Texts */
+    --btn-text-primary: var(--gray-600);
+    --btn-text-primary-hover: var(--gray-600);
+    --btn-text-primary-disabled: var(--gray-600);
+
+    --btn-text-secondary: var(--gray-600);
+    --btn-text-secondary-hover: var(--gray-600);
+    --btn-text-secondary-disabled: var(--gray-600);
+
+    --btn-text-emphasis: var(--gray-600);
+    --btn-text-emphasis-hover: var(--gray-600);
+    --btn-text-emphasis-disabled: var(--gray-600);
+
+    /* Components */
+    --comp-primary-fill: var(--green-400);
+    --comp-secondary-fill: var(--green-100);
+    --comp-emphasis-fill: var(--pink-600);
+
+    /* Component Texts */
+    --comp-text-primary: var(--brown-700);
+    --comp-text-secondary: var(--brown-800);
+    --comp-text-muted: var(--grey-300);
+    --comp-text-emphasis: var(--brown-500);
+}