helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: theme manager (#17976)

Browse source
This commit is contained in:
Jason Rasmussen 2025-04-29 17:44:09 -04:00 • committed by GitHub
parent 2c2dd01bf0
commit 038a82c4f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 197 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/src/lib/components/shared-components/map/map.svelte
View file

@ -9,15 +9,15 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { Theme } from '$lib/constants';
import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
import { themeManager } from '$lib/managers/theme-manager.svelte';
import { mapSettings } from '$lib/stores/preferences.store';
import { serverConfig } from '$lib/stores/server-config.store';
import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
import { type MapMarkerResponseDto } from '@immich/sdk';
import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
import { type GeoJSONSource, GlobeControl, type LngLatLike } from 'maplibre-gl';
import maplibregl from 'maplibre-gl';
import maplibregl, { GlobeControl, type GeoJSONSource, type LngLatLike } from 'maplibre-gl';
import { t } from 'svelte-i18n';
import {
AttributionControl,
@ -68,7 +68,7 @@
let map: maplibregl.Map | undefined = $state();
let marker: maplibregl.Marker | null = null;
const theme = $derived($mapSettings.allowDarkMode ? $colorTheme.value : Theme.LIGHT);
const theme = $derived($mapSettings.allowDarkMode ? themeManager.value : Theme.LIGHT);
const styleUrl = $derived(theme === Theme.DARK ? $serverConfig.mapDarkStyleUrl : $serverConfig.mapLightStyleUrl);
export function addClipMapMarker(lng: number, lat: number) {

6
web/src/lib/components/shared-components/qrcode.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import QRCode from 'qrcode';
import { colorTheme } from '$lib/stores/preferences.store';
import { Theme } from '$lib/constants';
import { themeManager } from '$lib/managers/theme-manager.svelte';
import QRCode from 'qrcode';
import { t } from 'svelte-i18n';
type Props = {
@ -14,7 +14,7 @@
let promise = $derived(
QRCode.toDataURL(value, {
color: { dark: $colorTheme.value === Theme.DARK ? '#ffffffff' : '#000000ff', light: '#00000000' },
color: { dark: themeManager.value === Theme.DARK ? '#ffffffff' : '#000000ff', light: '#00000000' },
margin: 0,
width,
}),

14
web/src/lib/components/shared-components/theme-button.svelte
View file

@ -1,13 +1,11 @@
<script lang="ts">
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
import CircleIconButton, { type Padding } from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { Theme } from '$lib/constants';
import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
import { themeManager } from '$lib/managers/theme-manager.svelte';
import { t } from 'svelte-i18n';
let icon = $derived($colorTheme.value === Theme.LIGHT ? moonPath : sunPath);
let viewBox = $derived($colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox);
let isDark = $derived($colorTheme.value === Theme.DARK);
let icon = $derived(themeManager.isDark ? sunPath : moonPath);
let viewBox = $derived(themeManager.isDark ? sunViewBox : moonViewBox);
interface Props {
padding?: Padding;
@ -16,14 +14,14 @@
let { padding = '3' }: Props = $props();
</script>
{#if !$colorTheme.system}
{#if !themeManager.theme.system}
<CircleIconButton
title={$t('toggle_theme')}
{icon}
{viewBox}
role="switch"
aria-checked={isDark ? 'true' : 'false'}
onclick={handleToggleTheme}
aria-checked={themeManager.isDark ? 'true' : 'false'}
onclick={() => themeManager.toggleTheme()}
{padding}
/>
{/if}