Update theme and browserlist

Front/skydivelogs-app/.browserslistrc

@@ -2,6 +2,9 @@
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
 
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.dev/reference/versions#browser-support
+
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
@@ -9,4 +12,12 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 9-11 # For IE 9-11 support, remove 'not'.
+
+#last 2 Chrome versions
+#last 1 Firefox version
+#last 2 Edge major versions
+#last 2 Safari major versions
+#last 2 iOS major versions
+#last 2 Android major versions
+#Firefox ESR

Front/skydivelogs-app/src/assets/css/new-theme.scss

@@ -1,9 +1,139 @@
+/* These tokens are generated using https://themes.angular-material.dev/ */
+/* Preview: https://themes.angular-material.dev/?seed-error=%23FF5449&seed-neutral=%23938F94&seed-neutral-variant=%23948F99&seed-primary=%236750A4&seed-secondary=%23958DA4&seed-tertiary=%23B58392 */
+/* Seed Colors: primary: #6750A4, secondary: #958DA4, tertiary: #B58392, error: #FF5449, neutral: #938F94, neutral-variant: #948F99 */
+
+@use "@angular/material" as mat;
+
+
+/* Light Theme */
+:root, :host {
+  @include mat.theme-overrides((
+    primary: #6750a4,
+    on-primary: #ffffff,
+    primary-container: #e9ddff,
+    on-primary-container: #22005d,
+    inverse-primary: #cfbcff,
+    primary-fixed: #e9ddff,
+    primary-fixed-dim: #cfbcff,
+    on-primary-fixed: #22005d,
+    on-primary-fixed-variant: #4f378a,
+    secondary: #625b70,
+    on-secondary: #ffffff,
+    secondary-container: #e8def8,
+    on-secondary-container: #1e192b,
+    secondary-fixed: #e8def8,
+    secondary-fixed-dim: #ccc2db,
+    on-secondary-fixed: #1e192b,
+    on-secondary-fixed-variant: #4a4458,
+    tertiary: #7e5260,
+    on-tertiary: #ffffff,
+    tertiary-container: #ffd9e3,
+    on-tertiary-container: #31101d,
+    tertiary-fixed: #ffd9e3,
+    tertiary-fixed-dim: #efb8c8,
+    on-tertiary-fixed: #31101d,
+    on-tertiary-fixed-variant: #633b48,
+    background: #fdf8f8,
+    on-background: #1c1b1c,
+    surface: #fdf8f8,
+    surface-dim: #ddd9d9,
+    surface-bright: #fdf8f8,
+    surface-container-lowest: #ffffff,
+    surface-container-low: #f7f3f2,
+    surface-container: #f1eded,
+    surface-container-high: #ebe7e7,
+    surface-container-highest: #e6e1e1,
+    on-surface: #1c1b1c,
+    shadow: #000000,
+    scrim: #000000,
+    surface-tint: #605d62,
+    inverse-surface: #313030,
+    inverse-on-surface: #f4f0f0,
+    outline: #79767b,
+    outline-variant: #cac5cb,
+    neutral: #797676,
+    neutral10: #1c1b1c,
+    error: #ba1a1a,
+    error-container: #ffdad6,
+    on-error: #ffffff,
+    on-error-container: #410002,
+    surface-variant: #e6e1e7,
+    on-surface-variant: #48464b,
+    neutral-variant: #79767b,
+    neutral-variant20: #322f34,
+    inverse-secondary: #ccc2db,
+    inverse-tertiary: #efb8c8,
+  ));
+}
+
+/* Dark Theme */
+.dark {
+  @include mat.theme-overrides((
+    primary: #cfbcff,
+    on-primary: #381e72,
+    primary-container: #4f378a,
+    on-primary-container: #e9ddff,
+    inverse-primary: #6750a4,
+    primary-fixed: #e9ddff,
+    primary-fixed-dim: #cfbcff,
+    on-primary-fixed: #22005d,
+    on-primary-fixed-variant: #4f378a,
+    secondary: #ccc2db,
+    on-secondary: #332d40,
+    secondary-container: #4a4458,
+    on-secondary-container: #e8def8,
+    secondary-fixed: #e8def8,
+    secondary-fixed-dim: #ccc2db,
+    on-secondary-fixed: #1e192b,
+    on-secondary-fixed-variant: #4a4458,
+    tertiary: #efb8c8,
+    on-tertiary: #4a2532,
+    tertiary-container: #633b48,
+    on-tertiary-container: #ffd9e3,
+    tertiary-fixed: #ffd9e3,
+    tertiary-fixed-dim: #efb8c8,
+    on-tertiary-fixed: #31101d,
+    on-tertiary-fixed-variant: #633b48,
+    background: #141313,
+    on-background: #e6e1e1,
+    surface: #141313,
+    surface-dim: #141313,
+    surface-bright: #3a3939,
+    surface-container-lowest: #0f0e0e,
+    surface-container-low: #1c1b1c,
+    surface-container: #201f20,
+    surface-container-high: #2b2a2a,
+    surface-container-highest: #363435,
+    on-surface: #e6e1e1,
+    shadow: #000000,
+    scrim: #000000,
+    surface-tint: #cac5ca,
+    inverse-surface: #e6e1e1,
+    inverse-on-surface: #313030,
+    outline: #938f95,
+    outline-variant: #48464b,
+    neutral: #797676,
+    neutral10: #1c1b1c,
+    error: #ffb4ab,
+    error-container: #93000a,
+    on-error: #690005,
+    on-error-container: #ffdad6,
+    surface-variant: #48464b,
+    on-surface-variant: #cac5cb,
+    neutral-variant: #79767b,
+    neutral-variant20: #322f34,
+    inverse-secondary: #625b70,
+    inverse-tertiary: #7e5260,
+  ));
+}
+
+
 // https://theme-builder-1623190217839.web.app/
 
   // @use '@angular/material' as mat;
 
-  @import "Material-Icons";
-  @import "Roboto";
+  // @import "Material-Icons";
+  // @import "Roboto";
 
   /*
   // Be sure that you only ever include this mixin once!