Style tweaks for learn dark theme

Author: salmacodecomputerlove

apps/fretonator-web/src/app/app.component.ts

@@ -23,10 +23,6 @@ export class AppComponent implements AfterViewInit {
   }
 
   setDarkColorMode(dark: Boolean) {
-    if (dark) {
-      this.colorMode = ColorModes.dark;
-    } else {
-      this.colorMode = ColorModes.light;
-    }
+    this.colorMode = dark ? ColorModes.dark : ColorModes.light;
   }
 }

apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss

@@ -277,6 +277,12 @@ $note-height: 36;
     &:after {
       background-color: var(--note-background-learn-theme);
     }
+
+    &[data-degree="ghost"] {
+      &:after {
+        background-color: var(--note-bg-ghost);
+      }
+    }
   }
 
   &:nth-child(-n + 13):after {

apps/fretonator-web/src/styles.scss

@@ -179,8 +179,8 @@
   --note-bg-tonic: var(--peach);
   --note-color-tonic: var(--black);
 
-  --note-background-learn-theme: var(--peach);
-  --note-bg-ghost: var(--note-background);
+  --note-background-learn-theme: var(--mint);
+  --note-bg-ghost: #e0e0e0;
 
   --note-bg-mediant: var(--coral);
   --note-color-mediant: var(--black);