Color Theme applies to scrollbars (#793)

* Moved more scss to use syntax to reduce css size

* Hooked in color-scheme to help brower render scroll bars appropriately depending on color scheme user selects

UI/Web/src/app/_services/nav.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 
 @Injectable({
@@ -13,7 +13,10 @@ export class NavService {
   private darkModeSource = new ReplaySubject<boolean>(1);
   darkMode$ = this.darkModeSource.asObservable();
 
-  constructor() {
+  private renderer: Renderer2;
+
+  constructor(rendererFactory: RendererFactory2) {
+    this.renderer = rendererFactory.createRenderer(null, null);
     this.showNavBar();
   }
 
@@ -27,13 +30,23 @@ export class NavService {
 
   toggleDarkMode() {
     this.darkMode = !this.darkMode;
+    this.updateColorScheme();
     this.darkModeSource.next(this.darkMode);
   }
 
   setDarkMode(mode: boolean) {
     this.darkMode = mode;
+    this.updateColorScheme();
     this.darkModeSource.next(this.darkMode);
   }
 
+  private updateColorScheme() {
+    if (this.darkMode) {
+      this.renderer.setStyle(document.querySelector('html'), 'color-scheme', 'dark');
+    } else {
+      this.renderer.setStyle(document.querySelector('html'), 'color-scheme', 'light');
+    }
+  }
+
 
 }

UI/Web/src/app/cards/card-item/card-item.component.scss

@@ -1,4 +1,4 @@
-@import '../../../theme/colors';
+@use '../../../theme/colors';
 
 $triangle-size: 40px;
 $image-height: 230px;
@@ -7,7 +7,7 @@ $image-width: 160px;
 .error-banner {
     width: 160px;
     height: 18px;
-    background-color: $error-color;
+    background-color: colors.$error-color;
     font-size: 12px;
     color: white;
     text-transform: uppercase;
@@ -49,7 +49,7 @@ $image-width: 160px;
     height: 5px;
 
     .progress {
-        color: $primary-color;
+        color: colors.$primary-color;
         background-color: transparent;
     }
 }
@@ -70,7 +70,7 @@ $image-width: 160px;
     height: 0;
     border-style: solid;
     border-width: 0 $triangle-size $triangle-size 0;
-    border-color: transparent $primary-color transparent transparent;
+    border-color: transparent colors.$primary-color transparent transparent;
 }
 
 

UI/Web/src/app/collections/collection-detail/collection-detail.component.scss

@@ -1,4 +1,4 @@
-@import '~bootstrap/scss/mixins/_breakpoints.scss';
+@import '~bootstrap/scss/mixins/breakpoints';
 
 .poster {
     width: 100%;

UI/Web/src/app/nav-events-toggle/nav-events-toggle.component.scss

@@ -1,4 +1,4 @@
-@import "../../theme/colors";
+@use "../../theme/colors";
 
 .small-spinner {
     width: 1rem;
@@ -18,6 +18,6 @@
 }
 
 .colored {
-    background-color: $primary-color;
+    background-color: colors.$primary-color;
     border-radius: 60px;
 }

UI/Web/src/app/nav-header/nav-header.component.scss

@@ -1,4 +1,4 @@
-@import '~bootstrap/scss/mixins/_breakpoints.scss'; // TODO: Use @forwards for this?
+@import '~bootstrap/scss/mixins/_breakpoints.scss';
 
 $primary-color: white;
 $bg-color: rgb(22, 27, 34);

UI/Web/src/app/person-badge/person-badge.component.scss

@@ -1,4 +1,4 @@
-@import '../../theme/colors';
+@use '../../theme/colors';
 
 $bg-color: #c9c9c9;
 $bdr-color: #f2f2f2;
@@ -14,7 +14,7 @@ $bdr-color: #f2f2f2;
     display: inline-block;
 
     i {
-        color: $primary-color;
+        color: colors.$primary-color;
         font-size: 14px;
         font-weight: bold;
         margin-left: 10px;

UI/Web/src/app/typeahead/typeahead.component.scss

@@ -1,4 +1,4 @@
-@import "../../theme/colors";
+@use "../../theme/colors";
 
 input {
     width: 15px;
@@ -39,12 +39,12 @@ input {
 
 ::ng-deep .bg-dark .typeahead-input {
     color: #efefef;
-    background-color: $dark-bg-color;
+    background-color: colors.$dark-bg-color;
 }
 
 // Causes bleedover
 ::ng-deep .bg-dark .dropdown .list-group-item.active {
-    background-color: $dark-hover-color;
+    background-color: colors.$dark-hover-color;
 }
 
 .dropdown {

UI/Web/src/styles.scss

@@ -8,13 +8,6 @@
 
 @import '~swiper/swiper.scss';
 
-
-@keyframes fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-
 @import './assets/themes/dark.scss';
 
 // Global Styles
@@ -30,6 +23,14 @@ label, select, .clickable {
   color: white;
 }
 
+:root {
+  color-scheme: light;
+}
+
+// :root .bg-dark {
+//   color-scheme: dark;
+// }
+
 @font-face {
   font-family: "EBGarmond";
   src: url("assets/fonts/EBGarmond/EBGaramond-VariableFont_wght.ttf") format("truetype");
@@ -65,6 +66,11 @@ body {
   }
 }
 
+@keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
 // Debug styles
 .redlines * {
   outline: 1px solid red;