appview-less bluesky client
1<script lang="ts">
2 import ColorPicker from 'svelte-awesome-color-picker';
3 import type { Settings } from '$lib/settings';
4
5 interface Props {
6 localSettings: Settings;
7 }
8
9 let { localSettings = $bindable() }: Props = $props();
10</script>
11
12{#snippet color(name: string, desc: string)}
13 <div>
14 <label for={name} class="settings-desc block">
15 {desc}
16 </label>
17 <div class="color-picker">
18 <ColorPicker
19 bind:hex={localSettings.theme[name]}
20 isAlpha={false}
21 position="responsive"
22 label={localSettings.theme[name]}
23 />
24 </div>
25 </div>
26{/snippet}
27
28<div class="space-y-5 p-4">
29 <div>
30 <h3 class="settings-header">colors</h3>
31 <div class="settings-box">
32 {@render color('fg', 'foreground color')}
33 {@render color('bg', 'background color')}
34 {@render color('accent', 'accent color')}
35 {@render color('accent2', 'secondary accent color')}
36 </div>
37 </div>
38</div>