84e60ea155
* move from app.html to user-page-layout.svelte * fix: use layout.svelte * simplify * fix: map style don't change * fix: auto switch theme map * use constants * simplify * rename * rename settign * fix: remove * pr feedback * fix: tests * fix: migration * fix: migration * pr feedback * simplify * simplify * pr feedback * fix: merge * chore: set insetad of toggle on click --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
25 lines
734 B
Svelte
25 lines
734 B
Svelte
<script lang="ts">
|
|
import { fade } from 'svelte/transition';
|
|
import { colorTheme } from '../../stores/preferences.store';
|
|
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
|
|
|
|
export const handleToggle = () => {
|
|
$colorTheme.system = !$colorTheme.system;
|
|
};
|
|
</script>
|
|
|
|
<section class="my-4">
|
|
<div in:fade={{ duration: 500 }}>
|
|
<div class="ml-4 mt-4 flex flex-col gap-4">
|
|
<div class="ml-4">
|
|
<SettingSwitch
|
|
title="Theme selection"
|
|
subtitle="Automatically set the theme to light or dark based on your browser's system preference"
|
|
bind:checked={$colorTheme.system}
|
|
on:toggle={handleToggle}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|