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