💄 Add "Darker" theme

src/App.vue

@@ -16,7 +16,7 @@ import {
 } from "@/store";
 import { computed, ref } from "vue";
 
-const autoThemes = { true: "dark", false: "light" };
+const autoThemes = { true: "darker", false: "light" };
 const autoTheme = ref("dark");
 const colorSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
 autoTheme.value = autoThemes[colorSchemeMedia.matches];

src/assets/themes.css

@@ -3,7 +3,6 @@
   --element-color: #212121;
   --element-color-hover: #1b1b1b;
   --element-border-input: #4e7a3a;
-  --element-border-focus: #9ac982;
   --element-border-action: #1f5b63;
   --text-color: #bdbdbd;
   --font-family: "sourcesanspro";
@@ -31,7 +30,6 @@
   --element-color: #bdbdbd;
   --element-color-hover: #ada9a9;
   --element-border-input: #4caf50;
-  --element-border-focus: #7ba764;
   --element-border-action: #3f51b5;
   --text-color: #353131;
   --font-family: "sourcesanspro";
@@ -53,3 +51,30 @@
   --timetable-trust-warning-border: #b71c1c;
   --timetable-trust-warning-background: #dabcbc;
 }
+
+.app.theme-darker {
+  --bg-color: #111111;
+  --element-color: #252525;
+  --element-color-hover: #1d1d1d;
+  --element-border-input: #4e7a3a;
+  --element-border-action: #1f5b63;
+  --text-color: #bdbdbd;
+  --font-family: "sourcesanspro";
+  --titlebar-color: #1d1d1d;
+  --titlebar-element-active-color: #44573b;
+  --titlebar-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
+  --bottomnav-color: hsl(137, 8%, 17%);
+  --bottomnav-icon-color: #899c8b;
+  --bottomnav-icon-active-color: #1e271f;
+  --bottomnav-active-color: #7c8670;
+  --bottomnav-shadow: 5px 7px 19px 0px rgba(0, 0, 0, 0.25);
+  --loader-color: #7ca74b;
+  --loader-error-color: #a54a4a;
+  --substitution-background-change: #095079;
+  --substitution-background-cancellation: #7d2b2d;
+  --substitution-background-addition: #326430;
+  --substitution-background-deletion: #7d2b2d;
+  --substitution-background-unchanged: #1c1e1d;
+  --timetable-trust-warning-border: #b71c1c;
+  --timetable-trust-warning-background: #412727;
+}

src/components/timetable-setup.vue

@@ -89,8 +89,4 @@ select {
 select:hover {
   background-color: var(--element-color-hover);
 }
-
-select:focus {
-  border-color: var(--element-border-focus);
-}
 </style>

src/strings.js

@@ -62,6 +62,7 @@ export const strings = {
         auto: "Auto",
         dark: "Dark",
         light: "Light",
+        darker: "Darker",
       },
     },
     timetable: {
@@ -192,6 +193,7 @@ export const strings = {
         auto: "Automatisch",
         dark: "Dunkel",
         light: "Hell",
+        darker: "Darker",
       },
     },
     timetable: {

src/views/settings/AppearanceSettings.vue

@@ -12,8 +12,9 @@ import i18n, { language, localeNames } from "@/i18n";
       $t('settings.theme.auto'),
       $t('settings.theme.light'),
       $t('settings.theme.dark'),
+      $t('settings.theme.darker'),
     ]"
-    :values="['auto', 'light', 'dark']"
+    :values="['auto', 'light', 'dark', 'darker']"
     v-model="theme"
   />
   <div class="spacer" />