Refactored and improved dark-mode implementation

frontend/src/styles.scss

@@ -4,7 +4,8 @@
 @use '@angular/material' as mat;
 
 // Plus imports for other components in your app.
-@import "src/app/theme/default-theme";
+@import "src/app/themes/light-theme";
+@import "src/app/themes/dark-theme";
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
@@ -13,7 +14,11 @@
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-component-themes($custom-theme);
+@include mat.all-component-themes($light-theme);
+
+.darkMode {
+  @include mat.all-component-colors($dark-theme);
+}
 
 /* You can add global styles to this file, and also import other style files */
 html, body { height: 100%; }
@@ -23,12 +28,7 @@ html {
   overflow-y: scroll;
 }
 
-.snackbar-dark {
-  color: white;
-  $config: mat.get-color-config($custom-theme);
-  $background: map.get($config, background);
-  background: mat.get-color-from-palette($background, app-bar);
-
+.formatted-snackbar {
   // add support for formatting (newlines)
   white-space: pre-wrap;
 }