Merge pull request #69 from ishythefishy/dark-mode

Added a dark theme, it is dark by default
whitep4nth3r · Jul 2, 2020 · 9062d37 · 9062d37
2 parents 51594fd + 41696dc
commit 9062d37
Show file tree

Hide file tree

Showing 49 changed files with 2,234 additions and 1,862 deletions.
diff --git a/apps/fretonator-web/src/app/app.component.html b/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>
diff --git a/apps/fretonator-web/src/app/app.component.scss b/apps/fretonator-web/src/app/app.component.scss
@@ -0,0 +1,3 @@
+.app__wrapper {
+  background-color: var(--background-color-base);
+}
diff --git a/apps/fretonator-web/src/app/app.component.ts b/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;
+  }
 }
diff --git a/apps/fretonator-web/src/app/app.module.ts b/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: [],

diff --git a/apps/fretonator-web/src/app/common/footer/footer.component.html b/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>

diff --git a/apps/fretonator-web/src/app/common/footer/footer.component.scss b/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);

diff --git a/apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.component.scss b/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);
 }
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/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>
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss b/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 {

diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts b/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;

diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html
@@ -1,4 +1,4 @@
-<h5 class="fretonator__sectionTitle">Check out the fretboard</h5>
+<h2 class="fretonator__sectionTitle">Check out the fretboard</h2>
 
 <app-fretboard [fretMap]="fretMap"
                [mode]="mode"></app-fretboard>
@@ -15,7 +15,7 @@ <h5 class="fretonator__sectionTitle">Check out the fretboard</h5>
   <app-video-loader [jamTrack]="note | symbolToNoteObj: noteExtender | getJamTrack: mode"></app-video-loader>
 </ng-container>
 
-<h5 class="fretonator__sectionTitle">Learn the theory</h5>
+<h2 class="fretonator__sectionTitle">Learn the theory</h2>
 
 <div class="infoContainer">
   <app-scale-map [mode]="mode"

diff --git a/apps/fretonator-web/src/app/common/fretonator/interval-map/interval-map.component.scss b/apps/fretonator-web/src/app/common/fretonator/interval-map/interval-map.component.scss
@@ -39,6 +39,7 @@
   margin-right: pxToRem($grid-unit);
   margin-bottom: pxToRem($grid-unit);
   font-weight: var(--font-weight-bold);
+  color: var(--foreground-color-base);
 }
 
 .intervalMap__separator {

diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html
@@ -1,12 +1,12 @@
 <div class="scaleMap__row">
   <div class="scaleDisplay">
-    <h4 class="scaleDisplay__title"
-        [class.infoHighlight]="isTheoretical"><span *ngIf="isTheoretical">Theoretical &nbsp;</span>Scale</h4>
+    <h3 class="scaleDisplay__title"
+        [class.infoHighlight]="isTheoretical"><span *ngIf="isTheoretical">Theoretical &nbsp;</span>Scale</h3>
     <div class="scaleDisplay__notes">
       <ng-container *ngFor="let note of modeMap; let i = index">
-        <h5 class="scaleDisplay__note">
+        <p class="scaleDisplay__note">
           {{ note.displayName }}
-        </h5>
+        </p>
       </ng-container>
     </div>
     <div class="buttonRow">
@@ -49,14 +49,14 @@ <h4 class="scaleMap__title">Degrees</h4>
 <div class="infoBlock infoBlock--theoreticalScales"
      [attr.aria-expanded]="showTheoreticalScalesInfo"
      *ngIf="showTheoreticalScalesInfo">
-  <h2 class="infoBlock__title">About Theoretical Scales
+  <h3 class="infoBlock__title">About Theoretical Scales
     <button class="infoBlock__close"
             aria-label="Theoretical Scales Info Close"
             type="button"
             (click)="toggleTheoreticalScaleInfo()">
       <app-cross-svg></app-cross-svg>
     </button>
-  </h2>
+  </h3>
   <p class="infoBlock__copy">A theoretical scale or <em>impossible key</em> is a key whose key signature has at least
     one double flat (𝄫) or double sharp (x).</p>
   <p class="infoBlock__copy">{{modeDisplayString}} is a theoretical scale and looks unnecessarily complicated. We can
@@ -74,14 +74,14 @@ <h2 class="infoBlock__title">About Theoretical Scales
 <div class="infoBlock infoBlock--scaleDegrees"
      [attr.aria-expanded]="showScaleMapInfo"
      *ngIf="showScaleMapInfo">
-  <h2 class="infoBlock__title">About Scale Degrees
+  <h3 class="infoBlock__title">About Scale Degrees
     <button class="infoBlock__close"
             aria-label="Scale Degrees Info Close"
             type="button"
             (click)="toggleScaleMapInfo()">
       <app-cross-svg></app-cross-svg>
     </button>
-  </h2>
+  </h3>
   <p class="infoBlock__copy">
     Each of the 7 notes of a mode or scale is called a <em>scale degree</em>, and has a specific name.
   </p>

diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss
@@ -106,6 +106,7 @@
   justify-content: space-between;
   align-items: center;
   height: $infoContainer_info_row_height;
+  color: var(--foreground-color-base);
 }
 
 .scaleDisplay__note {
@@ -154,7 +155,6 @@
   }
 
   display: none;
-
 }
 
 .button__playScale__svg {
@@ -166,8 +166,8 @@
 
 .button__infoToggle {
   @include chip_button_base();
-  border-color: var(--grey);
-  color: var(--grey);
+  border-color: var(--info-toggle-foreground-color);
+  color: var(--info-toggle-foreground-color);
   margin-top: pxToRem($grid-unit * 2);
 }