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)