Refactor SCSS to use CSS variables (#455)

* refactor: start using css variables for theming

* refactor: finish defining all currently used css vars

* refactor: create dark mode with css vars

* refactor: move color vars to own file

* fix: switch order of style tags to priorize custom styles over main.css

---------

Co-authored-by: TheLD <lars@adornis.de>

web/styles/main.scss

@@ -1,6 +1,7 @@
 @use "editor";
 @use "modals";
 @use "theme";
+@use "colors";
 
 @font-face {
   font-family: "iA-Mono";
@@ -80,7 +81,7 @@ body {
         font-size: 15px;
         z-index: 100;
 
-        >div {
+        > div {
           padding: 3px;
           margin-bottom: 3px;
           border-radius: 5px;
@@ -132,7 +133,6 @@ body {
       height: 20px;
       border-radius: 50%;
       font-size: 6px;
-
     }
 
     // .progress-bar::before {
@@ -204,4 +204,4 @@ body {
       margin: 0;
     }
   }
-}
+}