mirror of
https://github.com/immich-app/immich.git
synced 2025-12-23 07:29:28 -08:00
f446bc8caa
* First test * Added translation using Weblate (French) * Translated using Weblate (German) Currently translated at 100.0% (4 of 4 strings) Translation: immich/web Translate-URL: http://familie-mach.net/projects/immich/web/de/ * Translated using Weblate (French) Currently translated at 100.0% (4 of 4 strings) Translation: immich/web Translate-URL: http://familie-mach.net/projects/immich/web/fr/ * Further testing * Further testing * Translated using Weblate (German) Currently translated at 100.0% (18 of 18 strings) Translation: immich/web Translate-URL: http://familie-mach.net/projects/immich/web/de/ * Further work * Update string file. * More strings * Automatically changed strings * Add automatically translated german file for testing purposes * Fix merge-face-selector component * Make server stats strings uppercase * Fix uppercase string * Fix some strings in jobs-panel * Fix lower and uppercase strings. Add a few additional string. Fix a few unnecessary replacements * Update german test translations * Fix typo in locales file * Change string keys * Extract more strings * Extract and replace some more strings * Update testtranslationfile * Change translation keys * Fix rebase errors * Fix one more rebase error * Remove german translation file * Co-authored-by: Daniel Dietzler <danieldietzler@users.noreply.github.com> * chore: clean up translations * chore: add new line * fix formatting * chore: fixes * fix: loading and tests --------- Co-authored-by: root <root@Blacki> Co-authored-by: admin <admin@example.com> Co-authored-by: Jason Rasmussen <jrasm91@gmail.com> Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
61 lines
2.3 KiB
Svelte
61 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { mdiArrowRight } from '@mdi/js';
|
|
import Button from '../elements/buttons/button.svelte';
|
|
import Icon from '../elements/icon.svelte';
|
|
import OnboardingCard from './onboarding-card.svelte';
|
|
import { createEventDispatcher } from 'svelte';
|
|
import { colorTheme } from '$lib/stores/preferences.store';
|
|
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
|
|
import { Theme } from '$lib/constants';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
const dispatch = createEventDispatcher<{
|
|
done: void;
|
|
previous: void;
|
|
}>();
|
|
</script>
|
|
|
|
<OnboardingCard>
|
|
<p class="text-xl text-immich-primary dark:text-immich-dark-primary">{$t('color_theme').toUpperCase()}</p>
|
|
|
|
<div>
|
|
<p class="pb-6 font-light">Choose a color theme for your instance. You can change this later in your settings.</p>
|
|
</div>
|
|
|
|
<div class="flex gap-4 mb-6">
|
|
<button
|
|
type="button"
|
|
class="w-1/2 aspect-square bg-immich-bg rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-dark-primary/80 border-immich-primary dark:border dark:border-transparent"
|
|
on:click={() => ($colorTheme.value = Theme.LIGHT)}
|
|
>
|
|
<div
|
|
class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-primary"
|
|
>
|
|
<Icon path={sunPath} viewBox={sunViewBox} size="96" />
|
|
<p class="font-semibold text-4xl">{$t('light').toUpperCase()}</p>
|
|
</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl dark:border-[3px] dark:border-immich-dark-primary/80 dark:border-immich-dark-primary border border-transparent"
|
|
on:click={() => ($colorTheme.value = Theme.DARK)}
|
|
>
|
|
<div
|
|
class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-dark-primary"
|
|
>
|
|
<Icon path={moonPath} viewBox={moonViewBox} size="96" />
|
|
<p class="font-semibold text-4xl">{$t('dark').toUpperCase()}</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<div class="w-full flex place-content-end">
|
|
<Button class="flex gap-2 place-content-center" on:click={() => dispatch('done')}>
|
|
<p>{$t('admin.storage_template_settings')}</p>
|
|
<Icon path={mdiArrowRight} size="18" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</OnboardingCard>
|