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);
 }