Add custom themes

src-angular/app/core/services/settings.service.ts

@@ -4,7 +4,9 @@ import { Inject, Injectable } from '@angular/core'
 import _ from 'lodash'
 import { Difficulty, Instrument } from 'scan-chart'
 
+import { ThemeColors } from '../../../../src-shared/interfaces/theme.interface.js'
 import { Settings, themes } from '../../../../src-shared/Settings.js'
+import { colorNames, convertColorFormat } from '../../../../src-shared/UtilFunctions.js'
 
 @Injectable({
 	providedIn: 'root',
@@ -19,18 +21,20 @@ export class SettingsService {
 
 	async loadSettings() {
 		this.settings = await window.electron.invoke.getSettings()
-		if (!themes.includes(this.settings.theme)) {
+		if (this.settings.customTheme) {
+			setThemeColors(this.settings.customTheme)
+		} else if (!themes.includes(this.settings.theme)) {
 			this.changeTheme('dark')
 		} else {
 			this.changeTheme(this.settings.theme)
 		}
 	}
 
-	saveSettings() {
+	private saveSettings() {
 		window.electron.emit.setSettings(this.settings)
 	}
 
-	changeTheme(theme: typeof themes[number]) {
+	private changeTheme(theme: typeof themes[number]) {
 		this.document.documentElement.setAttribute('data-theme', theme)
 	}
 
@@ -50,7 +54,6 @@ export class SettingsService {
 		this.saveSettings()
 	}
 
-	// Individual getters/setters
 	get libraryDirectory() {
 		return this.settings.libraryPath
 	}
@@ -70,9 +73,27 @@ export class SettingsService {
 	get theme() {
 		return this.settings.theme
 	}
-	set theme(newValue: typeof themes[number]) {
-		this.settings.theme = newValue
-		this.changeTheme(newValue)
+	set theme(value: typeof themes[number]) {
+		this.settings.theme = value
+		if (!this.settings.customTheme) {
+			this.changeTheme(value)
+		}
+		this.saveSettings()
+	}
+	get customTheme() {
+		return this.settings.customTheme
+	}
+	set customTheme(value: ThemeColors | null) {
+		if (value) {
+			const failed = setThemeColors(value)
+			if (failed) { return }
+		} else {
+			for (const themeColor in colorNames) {
+				document.documentElement.style.removeProperty(colorNames[themeColor])
+			}
+			this.changeTheme(this.settings.theme)
+		}
+		this.settings.customTheme = value
 		this.saveSettings()
 	}
 
@@ -108,3 +129,16 @@ export class SettingsService {
 		}
 	}
 }
+
+function setThemeColors(themeColors: ThemeColors) {
+	try {
+		const result = convertColorFormat(themeColors)
+		for (const cssKey in result) {
+			document.documentElement.style.setProperty(cssKey, result[cssKey])
+		}
+		return false
+	} catch (err) {
+		alert(`ERROR: the provided color theme is improperly formatted.`)
+		return true
+	}
+}