url scheme done, switch between apps and orgs mostly done

ui/_/code/quill.js

@@ -51,12 +51,17 @@ window.setQuery = function(key, value) {
 
     return newUrl;
 };
-  
+
 window.navigateTo = function(url) {
     window.dispatchEvent(new Event('navigate'));
     window.history.pushState({}, '', url);
 }
 
+window.setLocation = function(url) {
+    window.dispatchEvent(new Event('navigate'));
+    window.history.replaceState({}, '', url);
+}
+
 /* $ SELECTOR */
 
 HTMLElement.prototype.$ = function(selector) {
@@ -91,8 +96,6 @@ console.green = function(message) {
 }
 
 /* GET CSS VARIABLES FOR DARK OR LIGHT MODE */
-window.darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-document.documentElement.classList.add(darkMode ? 'dark' : 'light');
 
 window.getColor = function(name) {
     const rootStyles = getComputedStyle(document.documentElement);
@@ -815,6 +818,20 @@ window.input = function(placeholder = "", width, height) {
     return el
 }
 
+window.select = function(cb) {
+    let el = document.createElement("select")
+    el.render = cb
+    quill.render(el)
+    return el
+}
+
+window.option = function(placeholder = "") {
+    let el = document.createElement("option")
+    el.innerText = placeholder
+    quill.render(el)
+    return el
+}
+
 window.label = function(inside) {
     let el = document.createElement("label")
     if(typeof inside === "string") {
@@ -1034,7 +1051,7 @@ HTMLElement.prototype.onInput = function(cb) {
 };
 
 HTMLElement.prototype.onChange = function(cb) {
-    if(!this.matches('input, textarea, [contenteditable=""], [contenteditable="true"]'))
+    if(!this.matches('input, textarea, select, [contenteditable=""], [contenteditable="true"]'))
         throw new Error("Can't put input event on non-input element!")
     this._storeListener("change", cb);
     return this;

ui/_/code/shared.css

@@ -1,8 +1,10 @@
 :root {
-    --main: var(--brown);
-    --accent: var(--gold);
-    --accent2: var(--green);
+    --main: var(--parchment);
+    --app: var(--parchment);
+    --accent: black;
+    --accent2: black;
 
+    --parchment: #FFEBCC;
     --gold: #FEBA7D;
     --divider: #bb7c36;
     --green: #0857265c;
@@ -11,15 +13,15 @@
     --brown: #812A18;
     --darkbrown: #3f0808;
 
-    --house-src: "/_/icons/house.svg";
-    --nodes-src: "/_/icons/nodes.svg";
-    --forum-src: "/_/icons/forum.svg";
-    --people-src: "/_/icons/people.svg";
+    --house-src: /_/icons/house.svg;
+    --nodes-src: /_/icons/nodes.svg;
+    --forum-src: /_/icons/forum.svg;
+    --people-src: /_/icons/people.svg;
 }
 
-@media (prefers-color-scheme: dark) {
-:root {
+:root.dark {
     --main: #000000;
+    --app: #180404;
     --accent: #695b4d;
     --accent2: var(--gold);
 
@@ -28,12 +30,23 @@
     --forum-src: /_/icons/forumdark.svg;
     --people-src: /_/icons/peopledark.svg;
 }
-}
 
 :root.red {
     --main: var(--red);
-    --accent: #6a0000;
+    --app: var(--red);
+    --accent: black;
     --accent2: var(--green);
+
+    --house-src: /_/icons/house.svg;
+    --nodes-src: /_/icons/nodes.svg;
+    --forum-src: /_/icons/forum.svg;
+    --people-src: /_/icons/people.svg;
+
+    --quill-src: /_/icons/people.svg;
+}
+
+:root.public {
+    --accent: var(--gold);
 }
 
 @font-face {