diff --git a/web/src/lib/components/shared-components/change-location.svelte b/web/src/lib/modals/GeolocationPointPickerModal.svelte
similarity index 85%
rename from web/src/lib/components/shared-components/change-location.svelte
rename to web/src/lib/modals/GeolocationPointPickerModal.svelte
index 1abb2dacce..87b1df081a 100644
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/modals/GeolocationPointPickerModal.svelte
@@ -1,30 +1,27 @@
{#snippet prompt()}
{$t('update_location_action_prompt', { values: { count: assetCount } })}
- - {$t('latitude')}: {location.latitude}
- - {$t('longitude')}: {location.longitude}
+ - {$t('latitude')}: {point.lat}
+ - {$t('longitude')}: {point.lng}
{/snippet}
diff --git a/web/src/lib/services/album.service.ts b/web/src/lib/services/album.service.ts
index 6ccd67584e..3a70d72478 100644
--- a/web/src/lib/services/album.service.ts
+++ b/web/src/lib/services/album.service.ts
@@ -1,5 +1,4 @@
import { goto } from '$app/navigation';
-import ToastAction from '$lib/components/ToastAction.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { eventManager } from '$lib/managers/event-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@@ -138,16 +137,8 @@ const notifyAddToAlbum = ($t: MessageFormatter, albumId: string, assetIds: strin
description = $t('assets_were_part_of_album_count', { values: { count: duplicateCount } });
}
- toastManager.custom(
- {
- component: ToastAction,
- props: {
- title: $t('info'),
- color: 'primary',
- description,
- button: { text: $t('view_album'), color: 'primary', onClick: () => goto(Route.viewAlbum({ id: albumId })) },
- },
- },
+ toastManager.primary(
+ { description, button: { label: $t('view_album'), onclick: () => goto(Route.viewAlbum({ id: albumId })) } },
{ timeout: 5000 },
);
};
@@ -229,18 +220,9 @@ export const handleUpdateAlbum = async ({ id }: { id: string }, dto: UpdateAlbum
try {
const response = await updateAlbumInfo({ id, updateAlbumDto: dto });
eventManager.emit('AlbumUpdate', response);
- toastManager.custom({
- component: ToastAction,
- props: {
- color: 'primary',
- title: $t('success'),
- description: $t('album_info_updated'),
- button: {
- text: $t('view_album'),
- color: 'primary',
- onClick: () => goto(Route.viewAlbum({ id })),
- },
- },
+ toastManager.primary({
+ description: $t('album_info_updated'),
+ button: { label: $t('view_album'), onclick: () => goto(Route.viewAlbum({ id })) },
});
return true;
diff --git a/web/src/lib/services/asset.service.ts b/web/src/lib/services/asset.service.ts
index c8614186fd..76ac0b7fc0 100644
--- a/web/src/lib/services/asset.service.ts
+++ b/web/src/lib/services/asset.service.ts
@@ -8,17 +8,16 @@ import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
import { user as authUser, preferences } from '$lib/stores/user.store';
import type { AssetControlContext } from '$lib/types';
-import { getSharedLink, sleep } from '$lib/utils';
+import { getAssetMediaUrl, getSharedLink, sleep } from '$lib/utils';
import { downloadUrl } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
import { getFormatter } from '$lib/utils/i18n';
-import { asQueryString } from '$lib/utils/shared-links';
import {
AssetJobName,
+ AssetMediaSize,
AssetTypeEnum,
AssetVisibility,
getAssetInfo,
- getBaseUrl,
runAssetJobs,
updateAsset,
type AssetJobsDto,
@@ -308,6 +307,7 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
{
filename: asset.originalFileName,
id: asset.id,
+ cacheKey: asset.thumbhash,
},
];
@@ -321,13 +321,12 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
assets.push({
filename: motionAsset.originalFileName,
id: asset.livePhotoVideoId,
+ cacheKey: motionAsset.thumbhash,
});
}
}
- const queryParams = asQueryString(authManager.params);
-
- for (const [i, { filename, id }] of assets.entries()) {
+ for (const [i, { filename, id, cacheKey }] of assets.entries()) {
if (i !== 0) {
// play nice with Safari
await sleep(500);
@@ -335,12 +334,7 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
try {
toastManager.primary($t('downloading_asset_filename', { values: { filename } }));
- downloadUrl(
- getBaseUrl() +
- `/assets/${id}/original` +
- (queryParams ? `?${queryParams}&edited=${edited}` : `?edited=${edited}`),
- filename,
- );
+ downloadUrl(getAssetMediaUrl({ id, size: AssetMediaSize.Original, edited, cacheKey }), filename);
} catch (error) {
handleError(error, $t('errors.error_downloading', { values: { filename } }));
}
diff --git a/web/src/lib/stores/album-asset-selection.store.ts b/web/src/lib/stores/album-asset-selection.store.ts
deleted file mode 100644
index a99e2baaca..0000000000
--- a/web/src/lib/stores/album-asset-selection.store.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { writable } from 'svelte/store';
-
-function createAlbumAssetSelectionStore() {
- const isAlbumAssetSelectionOpen = writable
(false);
- return {
- isAlbumAssetSelectionOpen,
- };
-}
-
-export const albumAssetSelectionStore = createAlbumAssetSelectionStore();
diff --git a/web/src/lib/stores/asset-editor.store.ts b/web/src/lib/stores/asset-editor.store.ts
deleted file mode 100644
index cc764cf7ad..0000000000
--- a/web/src/lib/stores/asset-editor.store.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { writable } from 'svelte/store';
-
-//-----other
-export const lastChosenLocation = writable<{ lng: number; lat: number } | null>(null);
diff --git a/web/src/lib/stores/asset-viewing.store.ts b/web/src/lib/stores/asset-viewing.store.ts
deleted file mode 100644
index 3cd2cd9579..0000000000
--- a/web/src/lib/stores/asset-viewing.store.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { type AssetGridRouteSearchParams } from '$lib/utils/navigation';
-import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
-import { readonly, writable } from 'svelte/store';
-
-function createAssetViewingStore() {
- const viewingAssetStoreState = writable();
- const viewState = writable(false);
- const gridScrollTarget = writable();
-
- const setAsset = (asset: AssetResponseDto) => {
- viewingAssetStoreState.set(asset);
- viewState.set(true);
- };
-
- const setAssetId = async (id: string): Promise => {
- const asset = await getAssetInfo({ ...authManager.params, id });
- setAsset(asset);
- return asset;
- };
-
- const showAssetViewer = (show: boolean) => {
- viewState.set(show);
- };
-
- return {
- asset: readonly(viewingAssetStoreState),
- isViewing: viewState,
- gridScrollTarget,
- setAsset,
- setAssetId,
- showAssetViewer,
- };
-}
-
-export const assetViewingStore = createAssetViewingStore();
diff --git a/web/src/lib/stores/upload.ts b/web/src/lib/stores/upload.ts
index 8e775b7b79..b36a2e5e70 100644
--- a/web/src/lib/stores/upload.ts
+++ b/web/src/lib/stores/upload.ts
@@ -80,7 +80,34 @@ function createUploadStore() {
};
const removeItem = (id: string) => {
- uploadAssets.update((uploadingAsset) => uploadingAsset.filter((a) => a.id != id));
+ uploadAssets.update((uploadingAsset) => {
+ const assetToRemove = uploadingAsset.find((a) => a.id === id);
+ if (assetToRemove) {
+ stats.update((stats) => {
+ switch (assetToRemove.state) {
+ case UploadState.DONE: {
+ stats.success--;
+ break;
+ }
+
+ case UploadState.DUPLICATED: {
+ stats.duplicates--;
+ break;
+ }
+
+ case UploadState.ERROR: {
+ stats.errors--;
+ break;
+ }
+ }
+
+ stats.total--;
+ return stats;
+ });
+ }
+
+ return uploadingAsset.filter((a) => a.id != id);
+ });
};
const dismissErrors = () =>
diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
index 25524f1eea..619195711a 100644
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -5,6 +5,8 @@ import type { ActionItem } from '@immich/ui';
import type { DateTime } from 'luxon';
import type { SvelteSet } from 'svelte/reactivity';
+export type LatLng = { lng: number; lat: number };
+
export interface ReleaseEvent {
isAvailable: boolean;
/** ISO8601 */
diff --git a/web/src/lib/utils/actions.ts b/web/src/lib/utils/actions.ts
index 05de75d3bc..46265a78bb 100644
--- a/web/src/lib/utils/actions.ts
+++ b/web/src/lib/utils/actions.ts
@@ -1,4 +1,3 @@
-import ToastAction from '$lib/components/ToastAction.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import type { StackResponse } from '$lib/utils/asset-utils';
@@ -32,24 +31,15 @@ export const deleteAssets = async (
await deleteBulk({ assetBulkDeleteDto: { ids, force } });
onAssetDelete(ids);
- toastManager.custom(
+ toastManager.primary(
{
- component: ToastAction,
- props: {
- title: $t('success'),
- description: force
- ? $t('assets_permanently_deleted_count', { values: { count: ids.length } })
- : $t('assets_trashed_count', { values: { count: ids.length } }),
- color: 'success',
- button:
- onUndoDelete && !force
- ? {
- color: 'secondary',
- text: $t('undo'),
- onClick: () => undoDeleteAssets(onUndoDelete, assets),
- }
- : undefined,
- },
+ description: force
+ ? $t('assets_permanently_deleted_count', { values: { count: ids.length } })
+ : $t('assets_trashed_count', { values: { count: ids.length } }),
+ button:
+ onUndoDelete && !force
+ ? { label: $t('undo'), color: 'secondary', onclick: () => undoDeleteAssets(onUndoDelete, assets) }
+ : undefined,
},
{ timeout: 5000 },
);
diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index 8605b7ffd0..79b5c207fa 100644
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -1,4 +1,3 @@
-import ToastAction from '$lib/components/ToastAction.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { downloadManager } from '$lib/managers/download-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
@@ -326,16 +325,11 @@ export const stackAssets = async (assets: { id: string }[], showNotification = t
try {
const stack = await createStack({ stackCreateDto: { assetIds: assets.map(({ id }) => id) } });
if (showNotification) {
- toastManager.custom({
- component: ToastAction,
- props: {
- title: $t('success'),
- description: $t('stacked_assets_count', { values: { count: stack.assets.length } }),
- color: 'success',
- button: {
- text: $t('view_stack'),
- onClick: () => navigate({ targetRoute: 'current', assetId: stack.primaryAssetId }),
- },
+ toastManager.primary({
+ description: $t('stacked_assets_count', { values: { count: stack.assets.length } }),
+ button: {
+ label: $t('view_stack'),
+ onclick: () => navigate({ targetRoute: 'current', assetId: stack.primaryAssetId }),
},
});
}
diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts
index f2a4cdec4f..2950563a85 100644
--- a/web/src/lib/utils/file-uploader.ts
+++ b/web/src/lib/utils/file-uploader.ts
@@ -216,7 +216,7 @@ async function fileUploader({
uploadAssetsStore.track('success');
}
- if (albumId) {
+ if (albumId && !authManager.isSharedLink) {
uploadAssetsStore.updateItem(deviceAssetId, { message: $t('asset_adding_to_album') });
await addAssetsToAlbums([albumId], [responseData.id], { notify: false });
uploadAssetsStore.updateItem(deviceAssetId, { message: $t('asset_added_to_album') });
diff --git a/web/src/routes/(user)/+layout.svelte b/web/src/routes/(user)/+layout.svelte
index e6e349fe91..983d25eced 100644
--- a/web/src/routes/(user)/+layout.svelte
+++ b/web/src/routes/(user)/+layout.svelte
@@ -1,30 +1,28 @@
-
+
{@render children?.()}
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 2e911d8330..9010efe535 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -46,7 +46,6 @@
import { getGlobalActions } from '$lib/services/app.service';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
- import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import { preferences, user } from '$lib/stores/user.store';
import { handlePromiseError } from '$lib/utils';
@@ -86,14 +85,9 @@
}
let { data = $bindable() }: Props = $props();
-
- let { isViewing: showAssetViewer, setAssetId, gridScrollTarget } = assetViewingStore;
let { slideshowState, slideshowNavigation } = slideshowStore;
-
let oldAt: AssetGridRouteSearchParams | null | undefined = $state();
-
let viewMode: AlbumPageViewMode = $state(AlbumPageViewMode.VIEW);
-
let timelineManager = $state
() as TimelineManager;
let showAlbumUsers = $derived(timelineManager?.showAssetOwners ?? false);
@@ -114,7 +108,9 @@
? await timelineManager.getRandomAsset()
: timelineManager.months[0]?.dayGroups[0]?.viewerAssets[0]?.asset;
if (asset) {
- handlePromiseError(setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)));
+ handlePromiseError(
+ assetViewerManager.setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)),
+ );
}
};
@@ -128,7 +124,7 @@
await handleCloseSelectAssets();
return;
}
- if ($showAssetViewer) {
+ if (assetViewerManager.isViewing) {
return;
}
if (assetInteraction.selectionActive) {
@@ -240,7 +236,7 @@
const isShared = $derived(viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : album.albumUsers.length > 0);
$effect(() => {
- if ($showAssetViewer || !isShared) {
+ if (assetViewerManager.isViewing || !isShared) {
return;
}
@@ -252,7 +248,9 @@
let isOwned = $derived($user.id == album.ownerId);
let showActivityStatus = $derived(
- album.albumUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || activityManager.commentCount > 0),
+ album.albumUsers.length > 0 &&
+ !assetViewerManager.isViewing &&
+ (album.isActivityEnabled || activityManager.commentCount > 0),
);
let isEditor = $derived(
album.albumUsers.find(({ user: { id } }) => id === $user.id)?.role === AlbumUserRole.Editor ||
@@ -287,7 +285,11 @@
}
};
- const onAlbumAddAssets = async () => {
+ const onAlbumAddAssets = async ({ albumIds }: { albumIds: string[] }) => {
+ if (!albumIds.includes(album.id)) {
+ return;
+ }
+
await refreshAlbum();
timelineInteraction.clearMultiselect();
await setModeToView();
@@ -318,7 +320,7 @@
type: $t('command'),
icon: mdiArrowLeft,
onAction: handleEscape,
- $if: () => !$showAssetViewer,
+ $if: () => !assetViewerManager.isViewing,
shortcuts: { key: 'Escape' },
});
@@ -472,13 +474,6 @@
- {#if assetInteraction.selectedAssets.length === 1}
- updateThumbnailUsingCurrentSelection()}
- />
- {/if}
{/if}
+ {#if assetInteraction.selectedAssets.length === 1}
+ updateThumbnailUsingCurrentSelection()}
+ />
+ {/if}
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
@@ -514,7 +516,7 @@
onclick={async () => {
timelineManager.suspendTransitions = true;
viewMode = AlbumPageViewMode.SELECT_ASSETS;
- oldAt = { at: $gridScrollTarget?.at };
+ oldAt = { at: assetViewerManager.gridScrollTarget?.at };
await navigate(
{ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: { at: null } },
{ replaceState: true },
@@ -617,7 +619,7 @@
{/if}
{/if}
());
let selectedClusterBBox = $state.raw();
let isTimelinePanelVisible = $state(false);
@@ -34,7 +31,7 @@
}
onDestroy(() => {
- assetViewingStore.showAssetViewer(false);
+ assetViewerManager.showAssetViewer(false);
});
if (!featureFlagsManager.value.map) {
@@ -42,7 +39,7 @@
}
async function onViewAssets(assetIds: string[]) {
- await setAssetId(assetIds[0]);
+ await assetViewerManager.setAssetId(assetIds[0]);
closeTimelinePanel();
}
@@ -50,7 +47,7 @@
selectedClusterIds = new Set(assetIds);
selectedClusterBBox = bbox;
isTimelinePanelVisible = true;
- assetViewingStore.showAssetViewer(false);
+ assetViewerManager.showAssetViewer(false);
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
}
@@ -89,13 +86,13 @@
- {#if $showAssetViewer}
+ {#if assetViewerManager.isViewing}
{#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
{
- assetViewingStore.showAssetViewer(false);
+ assetViewerManager.showAssetViewer(false);
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
}}
isShared={false}
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
index 31a991fa8f..21f51a8f49 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -20,13 +20,13 @@
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AssetAction } from '$lib/constants';
+ import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+ import { memoryManager } from '$lib/managers/memory-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { Route } from '$lib/route';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
- import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
- import { memoryStore } from '$lib/stores/memory.store.svelte';
import { preferences, user } from '$lib/stores/user.store';
import { getAssetMediaUrl, memoryLaneTitle } from '$lib/utils';
import {
@@ -43,7 +43,6 @@
import { mdiDotsVertical } from '@mdi/js';
import { t } from 'svelte-i18n';
- let { isViewing: showAssetViewer } = assetViewingStore;
let timelineManager = $state() as TimelineManager;
const options = { visibility: AssetVisibility.Timeline, withStacked: true, withPartners: true };
@@ -62,7 +61,7 @@
});
const handleEscape = () => {
- if ($showAssetViewer) {
+ if (assetViewerManager.isViewing) {
return;
}
if (assetInteraction.selectionActive) {
@@ -91,7 +90,7 @@
});
const items = $derived(
- memoryStore.memories.map((memory) => ({
+ memoryManager.memories.map((memory) => ({
id: memory.id,
title: $memoryLaneTitle(memory),
href: Route.memories({ id: memory.assets[0].id }),
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
index f1b9ca7614..c7d30febc7 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -4,11 +4,11 @@
import { shortcuts } from '$lib/actions/shortcut';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import DuplicatesCompareControl from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
+ import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import DuplicatesInformationModal from '$lib/modals/DuplicatesInformationModal.svelte';
import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
import { Route } from '$lib/route';
- import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { locale } from '$lib/stores/preferences.store';
import { stackAssets } from '$lib/utils/asset-utils';
import { suggestDuplicate } from '$lib/utils/duplicate-utils';
@@ -57,7 +57,6 @@
};
let duplicates = $state(data.duplicates);
- const { isViewing: showAssetViewer } = assetViewingStore;
const correctDuplicatesIndex = (index: number) => {
return Math.max(0, Math.min(index, duplicates.length - 1));
@@ -178,19 +177,7 @@
const handleFirst = () => navigateToIndex(0);
const handlePrevious = () => navigateToIndex(Math.max(duplicatesIndex - 1, 0));
- const handlePreviousShortcut = async () => {
- if ($showAssetViewer) {
- return;
- }
- await handlePrevious();
- };
const handleNext = async () => navigateToIndex(Math.min(duplicatesIndex + 1, duplicates.length - 1));
- const handleNextShortcut = async () => {
- if ($showAssetViewer) {
- return;
- }
- await handleNext();
- };
const handleLast = () => navigateToIndex(duplicates.length - 1);
const navigateToIndex = async (index: number) =>
@@ -198,10 +185,12 @@
diff --git a/web/src/routes/(user)/utilities/geolocation/+page.svelte b/web/src/routes/(user)/utilities/geolocation/+page.svelte
index 9c8ad035f4..d8cd0c3850 100644
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -1,6 +1,6 @@
@@ -68,7 +68,7 @@
-{#if $showAssetViewer}
+{#if assetViewerManager.isViewing}
{#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
{
- assetViewingStore.showAssetViewer(false);
+ assetViewerManager.showAssetViewer(false);
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
}}
/>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 046d5ce068..71bd66641c 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -52,7 +52,7 @@
prompt_default: $t('are_you_sure_to_do_this'),
show_password: $t('show_password'),
hide_password: $t('hide_password'),
- dark_theme: $t('dark_theme'),
+ dark_theme: themeManager.isDark ? $t('light_theme') : $t('dark_theme'),
open_menu: $t('open'),
command_palette_prompt_default: $t('command_palette_prompt'),
command_palette_to_select: $t('command_palette_to_select'),