feat: add editor themeing support

apps/web/src/app.css

@@ -6,6 +6,7 @@
   -ms-user-select: none;
   user-select: none;
   cursor: default;
+  outline: none;
 }
 
 *::-moz-focus-inner {

apps/web/src/components/editor/editor.css

@@ -30,7 +30,50 @@
 .ql-toolbar.ql-snow {
   width: 100%;
   border: none !important;
-  border-bottom: 1px solid #f0f0f0 !important;
-  border-top: 1px solid #f0f0f0 !important;
+  border-bottom: 1px solid var(--border) !important;
+  border-top: 1px solid var(--border) !important;
   padding: 5px !important;
 }
+
+/*Color Overrides*/
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active {
+  color: var(--primary) !important;
+  transition: color 300ms linear;
+}
+
+.ql-snow.ql-toolbar :not(.ql-background).ql-picker .ql-picker-item:hover,
+.ql-snow .ql-toolbar :not(.ql-background).ql-picker .ql-picker-item:hover,
+.ql-snow.ql-toolbar
+  :not(.ql-background).ql-picker
+  .ql-picker-item.ql-selected:hover,
+.ql-snow
+  .ql-toolbar
+  :not(.ql-background).ql-picker
+  .ql-picker-item.ql-selected:hover {
+  background-color: var(--shade) !important;
+}
+
+.ql-snow.ql-toolbar .ql-picker-item {
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+}
+
+.ql-snow .ql-picker {
+  color: var(--text) !important;
+}
+
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  border: 0px !important;
+  border-radius: 5px;
+  background-color: var(--accent) !important;
+  padding: 5px 0px !important;
+}

apps/web/src/components/menu/index.js

@@ -33,8 +33,7 @@ function Menu(props) {
             sx={{
               color: item.color || "fontPrimary",
               ":hover": {
-                backgroundColor: "primary",
-                color: "fontSecondary"
+                backgroundColor: "shade"
               }
             }}
           >

apps/web/src/index.css

@@ -16,10 +16,8 @@ body,
   transition: background-color 300ms linear, border-color 300ms linear;
 }
 
-body {
+* {
   font-family: "Noto Sans", sans-serif;
-  font-weight: normal;
-  font-size: 14px;
 }
 
 @keyframes fadeUp {

apps/web/src/utils/css.js

@@ -1,8 +1,22 @@
 export function addCss(rule) {
+  let variableCss = document.getElementById("variables");
+  let head = document.getElementsByTagName("head")[0];
+  if (variableCss) {
+    head.removeChild(variableCss);
+  }
   let css = document.createElement("style");
   css.type = "text/css";
-  if (css.styleSheet) css.styleSheet.cssText = rule;
+  css.id = "variables";
   // Support for IE
-  else css.appendChild(document.createTextNode(rule)); // Support for the rest
-  document.getElementsByTagName("head")[0].appendChild(css);
+  if (css.styleSheet) css.styleSheet.cssText = rule;
+  // Support for the rest
+  else css.appendChild(document.createTextNode(rule));
+  head.insertBefore(css, getRootStylesheet());
+}
+function getRootStylesheet() {
+  for (let sty of document.getElementsByTagName("style")) {
+    if (sty.innerHTML.includes("#root")) {
+      return sty;
+    }
+  }
 }

apps/web/src/utils/theme.js

@@ -2,6 +2,7 @@ import React from "react";
 import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
 import { ev } from "../common";
 import { useEffect } from "react";
+import { addCss } from "./css";
 
 const colorsLight = primary =>
   makeTheme({
@@ -13,7 +14,8 @@ const colorsLight = primary =>
     hover: "#e0e0e0",
     fontSecondary: "white",
     text: "black",
-    overlay: "rgba(255, 255, 255, 0.75)"
+    overlay: "rgba(255, 255, 255, 0.75)",
+    secondary: "white"
   });
 const colorsDark = primary =>
   makeTheme({
@@ -25,8 +27,10 @@ const colorsDark = primary =>
     hover: "#3b3b3b",
     fontSecondary: "#000",
     text: "#fff",
-    overlay: "rgba(0, 0, 0, 0.75)"
+    overlay: "rgba(0, 0, 0, 0.75)",
+    secondary: "black"
   });
+
 const shadowsDark = {
   1: "0 0 0px 0px #00000000",
   2: "0 0 8px 0px #55555544",
@@ -174,11 +178,13 @@ function makeTheme({
   hover,
   fontSecondary,
   text,
-  overlay
+  overlay,
+  secondary
 }) {
   return {
     background,
     primary,
+    shade: primary + "12",
     //secondary: "",
     accent,
     //custom
@@ -190,7 +196,8 @@ function makeTheme({
     transparent: "#00000000",
     text,
     overlay,
-    static: "white"
+    static: "white",
+    secondary
   };
 }
 
@@ -214,6 +221,7 @@ export const ThemeProvider = props => {
     };
   }, []);
   const theme = getTheme(currentTheme, currentAccent);
+  addCss(cssTheme(theme));
   return (
     <EmotionThemeProvider theme={theme}>
       {props.children instanceof Function
@@ -242,3 +250,11 @@ export const ButtonPressedStyle = {
     opacity: "0.8"
   }
 };
+
+const cssTheme = theme => {
+  let root = ":root {";
+  for (let color in theme.colors) {
+    root += `--${color}: ${theme.colors[color]};`;
+  }
+  return root + "}";
+};