src/app/modules/pro/channel/channel.component.ts

@@ -3,7 +3,8 @@ import {
  ChangeDetectorRef,
  Component,
  ElementRef,
- HostBinding, HostListener,
+ HostBinding,
+ HostListener,
  OnDestroy,
  OnInit
 } from '@angular/core';
@@ -164,6 +165,14 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  return `url(${this.channel.pro_settings.background_image})`;
  }
 
+ @HostBinding('class') get cssColorSchemeOverride() {
+ if (!this.channel) {
+ return '';
+ }
+
+ return `m-theme--wrapper__${this.channel.pro_settings.scheme || 'light'}`;
+ }
+
  @HostListener('window:resize') onResize() {
  this.collapseNavItems = window.innerWidth <= 992 ? true : false;
  }

src/app/modules/pro/pro.service.ts

@@ -29,7 +29,23 @@ export class ProService {
  }
 
  async get(): Promise<{ isActive, settings }> {
- return await this.client.get('api/v2/pro/settings', {}, {cache: false}) as any;
+ const { isActive, settings } = await this.client.get('api/v2/pro/settings', {}, {cache: false}) as any;
+
+ if (settings) {
+ if (settings.tag_list) {
+ settings.tag_list = settings.tag_list.map(({ tag, label }) => {
+ const formattedTag = `#${tag}`;
+
+ return { tag: formattedTag, label };
+ });
+ }
+
+ if (!settings.scheme) {
+ settings.scheme = 'light';
+ }
+ }
+
+ return { isActive, settings };
  }
 
  async set(settings): Promise<boolean> {

src/app/modules/pro/settings/settings.component.html

@@ -97,7 +97,7 @@
 
  <ng-template ngSwitchCase="theme">
  <p class="m-pro--settings--note" i18n>
- Set up your colors schema below.
+ Set up your color scheme below.
  </p>
 
  <div class="m-pro--settings--field">
@@ -115,6 +115,16 @@
  <input type="color" id="plain_background_color" name="plain_background_color" [(ngModel)]="settings.plain_background_color">
  </div>
 
+ <div class="m-pro--settings--field">
+ <label i18n>Color Schema</label>
+
+ <input type="radio" id="scheme_light" name="scheme" value="light" [(ngModel)]="settings.scheme">
+ <label for="scheme_light" class="m-pro--settings--inline-label">Light</label>
+
+ <input type="radio" id="scheme_dark" name="scheme" value="dark" [(ngModel)]="settings.scheme">
+ <label for="scheme_dark" class="m-pro--settings--inline-label">Dark</label>
+ </div>
+
  <div class="m-pro--settings--field">
  <label for="logo_guid" i18n>Logo Asset GUID</label>
  <input type="text" id="logo_guid" name="logo_guid" [(ngModel)]="settings.logo_guid">

src/app/modules/pro/settings/settings.component.scss

@@ -38,6 +38,12 @@
  @include m-theme() {
  color: themed($m-grey-800);
  }
+
+ &.m-pro--settings--inline-label {
+ display: inline-block;
+ padding: 0;
+ margin: 0 0.35em;
+ }
  }
 
  input[type=text],

src/app/modules/pro/settings/settings.component.ts

@@ -45,14 +45,6 @@ export class ProSettingsComponent implements OnInit {
 
  this.settings = settings;
 
- if (this.settings && this.settings.tag_list) {
- this.settings.tag_list = this.settings.tag_list.map(({ tag, label }) => {
- const formattedTag = `#${tag}`;
-
- return { tag: formattedTag, label };
- });
- }
-
  this.title.setTitle('Pro Settings');
 
  this.inProgress = false;

src/stylesheets/themes.scss

@@ -3,7 +3,8 @@
 // Colors change when .theme__light/.theme__dark classes are toggled on body tag
 @mixin m-theme() {
  @each $theme, $colors in $themes {
- body.m-theme__#{$theme} & {
+ body.m-theme__#{$theme} &,
+ body .m-theme--wrapper__#{$theme} & {
  $theme-map: () !global;
  @each $color-name, $color in $colors {
  $value: map-get(map-get($themes, $theme), '#{$color-name}');