Switch to using base16 for theme

Author: grant0417

src/cd/folderPreview.tsx

@@ -37,7 +37,7 @@ const Preview = ({
 
   return (
     <div
-      className="bg-main-bg text-main-text p-2 rounded overflow-y-scroll shadow-[0px_0px_3px_0px_rgb(85,_85,_85)]"
+      className="bg-shade0 text-shade6 p-2 rounded overflow-y-scroll shadow-[0px_0px_3px_0px_rgb(85,_85,_85)]"
       style={{
         maxHeight,
       }}

tailwind.config.js

@@ -4,16 +4,32 @@ export default {
   theme: {
     extend: {
       colors: {
-        "main-bg": "var(--main-bg-color, rgb(48, 48, 48))",
-        "main-text": "var(--main-text-color, rgb(180, 180, 180))",
-        "description-text": "var(--description-text-color, rgb(180, 180, 180))",
-        "description-border":
-          "var(--description-border-color, rgb(65, 65, 65))",
-        "selected-bg": "var(--selected-bg-color, rgb(30, 90, 199))",
-        "selected-text": "var(--selected-text-color, rgb(253, 253, 253))",
-        "matching-bg": "var(--matching-bg-color, rgb(95, 89, 56))",
-        "selected-matching-bg":
-          "var(--selected-matching-bg-color, rgb(106, 142, 218))",
+        // the background color of the page
+        shade0: "rgb(var(--shade0-color, 45 45 45) / <alpha-value>)",
+        shade1: "rgb(var(--shade1-color, 57 57 57) / <alpha-value>)",
+        shade2: "rgb(var(--shade2-color, 81 81 81) / <alpha-value>)",
+        shade3: "rgb(var(--shade3-color, 119 119 119) / <alpha-value>)",
+        shade4: "rgb(var(--shade4-color, 180 183 180) / <alpha-value>)",
+        shade5: "rgb(var(--shade5-color, 204 204 204) / <alpha-value>)",
+        shade6: "rgb(var(--shade6-color, 224 224 224) / <alpha-value>)",
+        // the "brightest" color, used for text
+        shade7: "rgb(var(--shade7-color, 255 255 255) / <alpha-value>)",
+        // Typically Red
+        accent0: "rgb(var(--accent0-color, 210 82 82) / <alpha-value>)",
+        // Typically Orange
+        accent1: "rgb(var(--accent1-color, 249 169 89) / <alpha-value>)",
+        // Typically Yellow
+        accent2: "rgb(var(--accent2-color, 255 198 109) / <alpha-value>)",
+        // Typically Green
+        accent3: "rgb(var(--accent3-color, 165 194 97) / <alpha-value>)",
+        // Typically Light Blue
+        accent4: "rgb(var(--accent4-color, 190 214 255) / <alpha-value>)",
+        // Typically Dark Blue
+        accent5: "rgb(var(--accent5-color, 108 153 187) / <alpha-value>)",
+        // Typically Purple
+        accent6: "rgb(var(--accent6-color, 209 151 217) / <alpha-value>)",
+        // Varies,
+        accent7: "rgb(var(--accent7-color, 249 115 148) / <alpha-value>)",
       },
     },
   },