theme settings

src/app/accounts/settings.component.html

@@ -62,6 +62,13 @@
                             </div>
                             <small class="help-block">{{'gaDesc' | i18n}}</small>
                         </div>
+                        <div class="form-group">
+                            <label for="theme">{{'theme' | i18n}}</label>
+                            <select id="theme" name="Theme" [(ngModel)]="theme" (change)="saveTheme()">
+                                <option *ngFor="let o of themeOptions" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                            <small class="help-block">{{'themeDesc' | i18n}}</small>
+                        </div>
                         <div class="form-group">
                             <label for="locale">{{'language' | i18n}}</label>
                             <select id="locale" name="Locale" [(ngModel)]="locale" (change)="saveLocale()">

src/app/accounts/settings.component.ts

@@ -33,6 +33,8 @@ export class SettingsComponent implements OnInit {
     locale: string;
     lockOptions: any[];
     localeOptions: any[];
+    theme: string;
+    themeOptions: any[];
 
     constructor(private analytics: Angulartics2, private toasterService: ToasterService,
         private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
@@ -57,6 +59,12 @@ export class SettingsComponent implements OnInit {
         i18nService.supportedTranslationLocales.forEach((locale) => {
             this.localeOptions.push({ name: locale, value: locale });
         });
+
+        this.themeOptions = [
+            { name: i18nService.t('default'), value: null },
+            { name: i18nService.t('light'), value: 'light' },
+            { name: i18nService.t('dark'), value: 'dark' },
+        ];
     }
 
     async ngOnInit() {
@@ -66,6 +74,7 @@ export class SettingsComponent implements OnInit {
         this.enableMinToTray = await this.storageService.get<boolean>(ElectronConstants.enableMinimizeToTrayKey);
         this.enableTray = await this.storageService.get<boolean>(ElectronConstants.enableTrayKey);
         this.locale = await this.storageService.get<string>(ConstantsService.localeKey);
+        this.theme = await this.storageService.get<string>(ConstantsService.themeKey);
 
         const disableGa = await this.storageService.get<boolean>(ConstantsService.disableGaKey);
         const disableGaByDefault = this.platformUtilsService.isFirefox() || this.platformUtilsService.isMacAppStore();
@@ -109,6 +118,11 @@ export class SettingsComponent implements OnInit {
         this.analytics.eventTrack.next({ action: 'Set Locale ' + this.locale });
     }
 
+    async saveTheme() {
+        await this.storageService.save(ConstantsService.themeKey, this.theme);
+        this.analytics.eventTrack.next({ action: 'Set Theme ' + this.theme });
+    }
+
     private callAnalytics(name: string, enabled: boolean) {
         const status = enabled ? 'Enabled' : 'Disabled';
         this.analytics.eventTrack.next({ action: `${status} ${name}` });

src/app/services.module.ts

@@ -119,6 +119,10 @@ export function initFactory(): Function {
         const htmlEl = window.document.documentElement;
         htmlEl.classList.add('os_' + platformUtilsService.getDeviceString());
         htmlEl.classList.add('locale_' + i18nService.translationLocale);
+        const theme = await storageService.get<string>(ConstantsService.themeKey);
+        if (theme != null) {
+            htmlEl.classList.add('theme_' + theme);
+        }
         stateService.save(ConstantsService.disableFaviconKey,
             await storageService.get<boolean>(ConstantsService.disableFaviconKey));
 

src/locales/en/messages.json

@@ -788,6 +788,20 @@
   "languageDesc": {
     "message": "Change the language used by the application. Restart is required."
   },
+  "theme": {
+    "message": "Theme"
+  },
+  "themeDesc": {
+    "message": "Change the application's color theme. Restart is required."
+  },
+  "dark": {
+    "message": "Dark",
+    "description": "Dark color"
+  },
+  "light": {
+    "message": "Light",
+    "description": "Light color"
+  },
   "copy": {
     "message": "Copy",
     "description": "Copy to clipboard"