♻️ Move colors to css variables

src/views/HistoryView.vue

@@ -23,11 +23,11 @@ function getChar(type) {
 function getColor(type) {
   switch (type) {
     case "change":
-      return "background-color: #14587E;";
+      return "background-color: var(--substitution-background-change)";
     case "addition":
-      return "background-color: #476331;";
+      return "background-color: var(--substitution-background-addition);";
     case "deletion":
-      return "background-color: #7D2B2D;";
+      return "background-color: var(--substitution-background-deletion);";
   }
 }
 </script>
@@ -70,7 +70,6 @@ function getColor(type) {
 
 .change {
   display: grid;
-  background-color: #26272a;
   min-height: 35px;
   border-radius: 11px;
   margin: 10px 0px;

src/views/LoginView.vue

@@ -24,7 +24,7 @@
   align-items: center;
   flex-direction: column;
   font-family: Arial, Helvetica, sans-serif;
-  color: #bdbdbd;
+  color: var(--text-color);
 }
 
 form {
@@ -36,10 +36,10 @@ form {
 input {
   border: 0px;
   outline: none;
-  background-color: #3a3737;
+  background-color: var(--element-color);
   padding: 5px 5px;
   margin: 5px 0;
-  border: 2px solid #34631f;
+  border: 2px solid var(--element-border-input);
   border-radius: 5px;
   color: #bdbdbd;
 }
@@ -47,9 +47,9 @@ input {
 button {
   outline: none;
   padding: 5px 5px;
-  border: 2px solid #1f5b63;
+  border: 2px solid var(--element-border-action);
   border-radius: 5px;
-  color: #bdbdbd;
-  background-color: #242121;
+  color: var(--text-color);
+  background-color: var(--element-color);
 }
 </style>

src/views/SettingsView.vue

@@ -87,7 +87,7 @@ select {
   padding: 5px 0px;
   margin: 5px 0px;
   outline: none;
-  border: 2px solid #34631f;
+  border: 2px solid var(--element-border-input);
   border-radius: 5px;
 }
 

src/views/SubstitutionView.vue

@@ -37,7 +37,7 @@ const substitutions = computed(() => {
 
 .substitution {
   display: grid;
-  background-color: #26272a;
+  background-color: var(--substitution-background-unchanged);
   min-height: 35px;
   border-radius: 11px;
   margin: 10px 0px;

src/views/TimetableView.vue

@@ -95,7 +95,7 @@ function isCancelled(substitution) {
 
 .lesson {
   display: grid;
-  background-color: #26272a;
+  background-color: var(--substitution-background-unchanged);
   min-height: 50px;
   border-radius: 11px;
   margin: 10px 0px;