myxelium/Bridge-Multi
1
0
Fork 0
mirror of https://github.com/Myxelium/Bridge-Multi.git synced 2026-04-11 14:19:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add custom themes

Browse Source
This commit is contained in:
Geomitron
2024-07-11 23:10:34 -05:00
parent 2e08dec589
commit cb6e51be24
12 changed files with 347 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src-angular/app/components/settings/settings.component.html
View File

@@ -17,38 +17,11 @@
</div>
</label>
<label class="form-control w-full max-w-xs">
<div class="form-control w-full max-w-xs">
<div class="label">
<span class="label-text">Appearance</span>
</div>
<div class="flex gap-3 items-center">
<div class="dropdown dropdown-hover">
<label tabindex="0" class="btn btn-neutral">{{ capitalize(settingsService.theme) }}</label>
<ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-neutral text-neutral-content rounded-box w-36">
<li>
<h2 class="menu-title text-neutral-content text-opacity-50">Dark</h2>
<ul>
<li><a (click)="setTheme('business')">Business</a></li>
<li><a (click)="setTheme('dark')">Dark</a></li>
<li><a (click)="setTheme('dim')">Dim</a></li>
<li><a (click)="setTheme('night')">Night</a></li>
<li><a (click)="setTheme('sunset')">Sunset</a></li>
<li><a (click)="setTheme('synthwave')">Synthwave</a></li>
</ul>
</li>
<li>
<h2 class="menu-title text-neutral-content text-opacity-50">Light</h2>
<ul>
<li><a (click)="setTheme('aqua')">Aqua</a></li>
<li><a (click)="setTheme('emerald')">Emerald</a></li>
<li><a (click)="setTheme('lemonade')">Lemonade</a></li>
<li><a (click)="setTheme('nord')">Nord</a></li>
<li><a (click)="setTheme('valentine')">Valentine</a></li>
<li><a (click)="setTheme('winter')">Winter</a></li>
</ul>
</li>
</ul>
</div>
<div class="join join-vertical">
<div class="tooltip tooltip-right" data-tip="Zoom In (ctrl +)">
<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomIn()">
@@ -61,8 +34,40 @@
</button>
</div>
</div>
@if (!settingsService.customTheme) {
<div class="dropdown dropdown-hover">
<label tabindex="0" class="btn btn-neutral">{{ capitalize(settingsService.theme) }}</label>
<ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-neutral text-neutral-content rounded-box w-36">
<li>
<h2 class="menu-title text-neutral-content text-opacity-50">Dark</h2>
<ul>
<li><a (click)="setTheme('business')">Business</a></li>
<li><a (click)="setTheme('dark')">Dark</a></li>
<li><a (click)="setTheme('dim')">Dim</a></li>
<li><a (click)="setTheme('night')">Night</a></li>
<li><a (click)="setTheme('sunset')">Sunset</a></li>
<li><a (click)="setTheme('synthwave')">Synthwave</a></li>
</ul>
</li>
<li>
<h2 class="menu-title text-neutral-content text-opacity-50">Light</h2>
<ul>
<li><a (click)="setTheme('aqua')">Aqua</a></li>
<li><a (click)="setTheme('emerald')">Emerald</a></li>
<li><a (click)="setTheme('lemonade')">Lemonade</a></li>
<li><a (click)="setTheme('nord')">Nord</a></li>
<li><a (click)="setTheme('valentine')">Valentine</a></li>
<li><a (click)="setTheme('winter')">Winter</a></li>
</ul>
</li>
</ul>
</div>
<button (click)="getCustomTheme()" class="btn btn-primary">Use custom theme</button>
} @else {
<button (click)="clearCustomTheme()" class="btn btn-neutral">Clear custom theme</button>
}
</div>
</label>
</div>
<div class="form-control">
<div class="label">

25
src-angular/app/components/settings/settings.component.ts
View File

@@ -76,6 +76,31 @@ export class SettingsComponent implements OnInit {
}
}
async getCustomTheme() {
const result = await window.electron.invoke.showOpenDialog({
title: 'Choose custom theme',
defaultPath: this.settingsService.libraryDirectory || '',
properties: ['openFile'],
filters: [
{ name: "Themes", extensions: ["json"] },
],
})
if (result.canceled === false) {
const newThemeColors = await window.electron.invoke.getThemeColors(result.filePaths[0])
if (newThemeColors) {
this.settingsService.customTheme = newThemeColors
} else {
alert(`ERROR: ${result.filePaths[0]} was not a valid JSON file.`)
}
}
}
clearCustomTheme() {
this.settingsService.customTheme = null
}
openLibraryDirectory() {
if (this.settingsService.libraryDirectory) {
window.electron.emit.showFolder(this.settingsService.libraryDirectory)

48
src-angular/app/core/services/settings.service.ts
View File

@@ -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
}
}