Merge pull request #69 from ishythefishy/dark-mode

Added a dark theme, it is dark by default

Author: whitep4nth3r

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

@@ -1,5 +1,8 @@
-<app-header></app-header>
-<div #globalScrollTarget>
-  <router-outlet></router-outlet>
+<div class="app__wrapper"
+     [attr.color-mode]="colorMode">
+  <app-header (setDarkColorMode)="setDarkColorMode($event)"></app-header>
+  <main #globalScrollTarget role="main">
+    <router-outlet></router-outlet>
+  </main>
+  <app-footer></app-footer>
 </div>
-<app-footer></app-footer>

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

@@ -0,0 +1,3 @@
+.app__wrapper {
+  background-color: var(--background-color-base);
+}

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

@@ -1,18 +1,28 @@
 import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 import { GlobalService } from './global.service';
 
+export const ColorModes = {
+  light: 'light',
+  dark: 'dark'
+};
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements AfterViewInit {
   @ViewChild('globalScrollTarget') globalScrollTarget: ElementRef<HTMLElement>;
+  colorMode = ColorModes.dark;
 
   constructor(private globalService: GlobalService) {
   }
 
   ngAfterViewInit() {
     this.globalService.setGlobalScrollTarget(this.globalScrollTarget.nativeElement);
   }
+
+  setDarkColorMode(dark: Boolean) {
+    this.colorMode = dark ? ColorModes.dark : ColorModes.light;
+  }
 }

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

@@ -6,6 +6,8 @@ import { AppComponent } from './app.component';
 import { HeaderModule } from './common/header/header.module';
 import { FooterModule } from './common/footer/footer.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MoonModule } from './common/svgs/moon/moon.module';
+import { SunModule } from './common/svgs/sun/sun.module';
 
 // import { ServiceWorkerModule } from '@angular/service-worker';
 
@@ -16,7 +18,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     BrowserAnimationsModule,
     AppRoutingModule,
     HeaderModule,
-    FooterModule
+    FooterModule,
+    MoonModule,
+    SunModule
     // ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
   ],
   providers: [],

apps/fretonator-web/src/app/common/footer/footer.component.html

@@ -2,9 +2,9 @@
   <div class="footer__inner">
 
     <div class="footer__leftColumn">
-      <h6 class="footer__sectionTitle">
+      <h5 class="footer__sectionTitle">
         Fretonator is open source
-      </h6>
+      </h5>
       <p class="footer__copy">
         Thank you to the following generous contributors:
       </p>

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

@@ -4,10 +4,10 @@
 @import '../../../styles/typography';
 
 .footer {
-  background-color: var(--black);
+  background-color: var(--footer-background);
   box-sizing: border-box;
   padding: pxToRem($grid-unit * 6);
-  border-top: pxToRem($grid-unit) solid var(--peach);
+  border-top: pxToRem($grid-unit) solid var(--footer-border-color);
 }
 
 .footer__inner {
@@ -56,7 +56,7 @@
   @include font_bodyCopy;
   font-size: pxToRem(15);
   line-height: pxToRem(22);
-  color: var(--offwhite);
+  color: var(--footer-copy-color);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -79,8 +79,8 @@
 
 .footer__copy--link {
   @include text_link();
-  color: var(--peach);
-  border-color: var(--peach);
+  color: var(--footer-link-color);
+  border-color: var(--footer-link-color);
 }
 
 .footer__sectionTitle {
@@ -89,7 +89,7 @@
   line-height: pxToRem(28);
   margin-top: pxToRem($grid-unit);
   margin-bottom: pxToRem($grid-unit);
-  color: var(--peach);
+  color: var(--footer-title-color);
   font-weight: var(--font-weight-bold);
   display: flex;
   text-align: center;
@@ -114,19 +114,19 @@
   @include font_bodyCopy;
   font-size: pxToRem(15);
   line-height: pxToRem(26);
-  color: var(--offwhite);
+  color: var(--footer-copy-color);
 }
 
 .footer__listItemLink {
   @include text_link();
-  color: var(--yellow);
-  border-color: var(--yellow);
+  color: var(--footer-list-link-color);
+  border-color: var(--footer-list-link-color);
 
   @include focus_accessible();
 }
 
 .footer__copyright {
-  color: var(--offwhite);
+  color: var(--footer-copy-color);
   font-size: pxToRem(12);
   letter-spacing: var(--letter-spacing-display);
   font-weight: var(--font-weight-bold);
@@ -153,11 +153,11 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  background-color: var(--black);
+  background-color: var(--footer-background);
   margin-top: pxToRem($grid-unit * 4);
   padding: pxToRem($grid-unit / 2) pxToRem($grid-unit * 2);
-  color: var(--yellow);
-  border-color: var(--yellow);
+  color: var(--footer-small-button-accent-color);
+  border-color: var(--footer-small-button-accent-color);
 
   &:focus {
     border-color: transparent;
@@ -172,7 +172,7 @@
 
 .footer__twitchButton {
   background-color: #9147ff;
-  color: var(--white);
+  color: #ffffff;
   padding: pxToRem($grid-unit * 2);
   font-family: var(--font-family-main);
   font-weight: var(--font-weight-bold);

apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.component.scss

@@ -40,4 +40,5 @@
   margin-right: pxToRem($grid-unit);
   margin-bottom: pxToRem($grid-unit);
   font-weight: var(--font-weight-bold);
+  color: var(--foreground-color-base);
 }

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

@@ -2,6 +2,7 @@
   <ng-container *ngFor="let fret of frets">
     <div
       class="fretboard__cell"
+      [class.learn__theme]="configuration === 'learn'"
       [class.fretboard__cell--string]="fret === 0"
       [class.fretboard__cell--selected]="fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive"
       [attr.data-string-name]="fret === 0 ? stringName : null"
@@ -100,9 +101,9 @@
   </div>
 </div>
 
-<h4 class="fretonator__playCta">
+<p class="fretonator__playCta">
   <span class="fretonator__playCtaIcon">
     <app-speaker-svg></app-speaker-svg>
   </span>
   Tap notes on the fretboard for sound!
-</h4>
+</p>

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

@@ -47,7 +47,7 @@ $note-height: 36;
       font-family: var(--font-family-main);
       font-style: italic;
       font-weight: var(--font-weight-bold);
-      color: var(--grey);
+      color: var(--fretboard-help-text-color);
       font-size: pxToRem(14);
       opacity: 0.5;
     }
@@ -225,7 +225,7 @@ $note-height: 36;
   &[data-string="G"][data-fret="21"],
   &[data-string="B"][data-fret="12"],
   &[data-string="D"][data-fret="12"] {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23dbdae0' /%3E%3C/svg%3E");
+    background-image: var(--fret-marker-url);
     background-repeat: no-repeat;
     background-position: center calc(var(--string-height-base) - 15px);
     background-size: 30px 30px;
@@ -241,7 +241,7 @@ $note-height: 36;
   &[data-string="D"][data-fret="21"],
   &[data-string="G"][data-fret="12"],
   &[data-string="A"][data-fret="12"] {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23dbdae0' /%3E%3C/svg%3E");
+    background-image: var(--fret-marker-url);
     background-repeat: no-repeat;
     background-position: center -15px;
     background-size: 30px 30px;
@@ -273,6 +273,18 @@ $note-height: 36;
     direction: ltr;
   }
 
+  &.learn__theme {
+    &:after {
+      background-color: var(--note-background-learn-theme);
+    }
+
+    &[data-degree="ghost"] {
+      &:after {
+        background-color: var(--note-bg-ghost);
+      }
+    }
+  }
+
   &:nth-child(-n + 13):after {
     transform: translate(-50%, 6px);
   }
@@ -427,7 +439,7 @@ $note-height: 36;
   justify-content: center;
   align-items: center;
   margin-bottom: pxToRem($grid-unit * 2);
-  color: var(--grey);
+  color: var(--fretboard-play-cta-color);
   line-height: 1;
   margin-left: auto;
   margin-right: auto;
@@ -469,8 +481,8 @@ $note-height: 36;
 }
 
 .fretboard__toggleButton--active {
-  background-color: var(--black);
-  color: var(--offwhite);
+  background-color: var(--chip-background-color-active);
+  color: var(--chip-foreground-color-active);
 }
 
 .fretboard__toggleButton--left {

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

@@ -1,17 +1,6 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  ViewChild
-} from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';
 import { FretMap, Mode } from '../../../util/types';
 import { NotePlaybackService } from '../../playback/note-playback.service';
-import { GlobalService } from '../../../global.service';
 import { AbstractDataService } from '../../abstract-data/abstract-data.service';
 
 export enum FretMode {
@@ -46,6 +35,7 @@ export class FretboardComponent implements OnChanges, OnInit {
   @Input() mode: Mode;
   @Input() stringNamesAreCaseSensitive = false;
   @Input() loadExpanded = false;
+  @Input() configuration;
   orientation;
   fretMode;
   frets;