♻️ Move colors to css variables

src/assets/base.css

@@ -1,12 +1,23 @@
 :root {
   --bg-color: #353535;
+  --element-color: #333030;
+  --element-color-hover: #292424;
+  --element-border-input: #34631f;
+  --element-border-action: #1f5b63;
   --text-color: #bdbdbd;
   --font-family: "sourcesanspro";
   --titlebar-color: #212121;
+  --titlebar-element-active-color: #335723;
   --bottomnav-color: #555555;
   --bottomnav-icon-color: #c7c7c7;
   --bottomnav-icon-active-color: #456c47;
   --bottomnav-active-color: #7ca74b;
+  --loader-color: #7ca74b;
+  --substitution-background-change: #14587e;
+  --substitution-background-cancellation: #7d2b2d;
+  --substitution-background-addition: #476331;
+  --substitution-background-deletion: #7d2b2d;
+  --substitution-background-unchanged: #26272a;
 }
 
 html,

src/components/loading-element.vue

@@ -34,7 +34,7 @@ defineProps({
   width: 48px;
   height: 48px;
   border: 5px solid;
-  border-color: #7ca74b transparent;
+  border-color: var(--loader-color) transparent;
   border-radius: 50%;
   display: inline-block;
   box-sizing: border-box;

src/components/titlebar-element.vue

@@ -61,7 +61,7 @@ a {
 }
 
 a.router-link-active {
-  background-color: #335723;
+  background-color: var(--titlebar-element-active-color);
   border-radius: 5px;
 }
 </style>

src/util.js

@@ -29,8 +29,8 @@ export function getSubstitutionColor(substitution) {
   if (!substitution) return;
   switch (substitution.type) {
     case "change":
-      return "background-color: #14587e;";
+      return "background-color: var(--substitution-background-change);";
     case "cancellation":
-      return "background-color: #7d2b2d;";
+      return "background-color: var(--substitution-background-cancellation);";
   }
 }

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;
+  color: var(--text-color);
-  background-color: #242121;
+  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;