KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2026-03-04 13:10:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web) dark mode (#867)

Browse Source
This commit is contained in:
Alex
2022-10-26 11:10:48 -05:00
committed by GitHub
parent ae96508e15
commit f94176a910
39 changed files with 362 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/src/routes/+layout.svelte
View File

@@ -15,8 +15,10 @@
let localVersion: string;
let remoteVersion: string;
let showNavigationLoadingBar = false;
let canShow = false;
onMount(async () => {
checkUserTheme();
const res = await checkAppVersion();
shouldShowAnnouncement = res.shouldShowAnnouncement;
@@ -24,6 +26,21 @@
remoteVersion = res.remoteVersion ?? 'unknown';
});
const checkUserTheme = () => {
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (
localStorage.getItem('color-theme') === 'dark' ||
(!('color-theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
canShow = true;
};
beforeNavigate(() => {
showNavigationLoadingBar = true;
});
@@ -34,24 +51,24 @@
</script>
<main>
<!-- {#key $page.url} -->
<div in:fade={{ duration: 100 }}>
{#if showNavigationLoadingBar}
<NavigationLoadingBar />
{/if}
{#if canShow}
<div in:fade={{ duration: 100 }}>
{#if showNavigationLoadingBar}
<NavigationLoadingBar />
{/if}
<slot />
<slot />
<DownloadPanel />
<UploadPanel />
<NotificationList />
{#if shouldShowAnnouncement}
<AnnouncementBox
{localVersion}
{remoteVersion}
on:close={() => (shouldShowAnnouncement = false)}
/>
{/if}
</div>
<!-- {/key} -->
<DownloadPanel />
<UploadPanel />
<NotificationList />
{#if shouldShowAnnouncement}
<AnnouncementBox
{localVersion}
{remoteVersion}
on:close={() => (shouldShowAnnouncement = false)}
/>
{/if}
</div>
{/if}
</main>

8
web/src/routes/+page.svelte
View File

@@ -19,9 +19,13 @@
<div class="flex place-items-center place-content-center ">
<img class="text-center" src="immich-logo.svg" height="200" width="200" alt="immich-logo" />
</div>
<h1 class="text-4xl text-immich-primary font-bold font-immich-title">Welcome to IMMICH Web</h1>
<h1
class="text-4xl text-immich-primary dark:text-immich-dark-primary font-bold font-immich-title"
>
Welcome to IMMICH Web
</h1>
<button
class="border px-4 py-2 rounded-md bg-immich-primary hover:bg-immich-primary/75 text-white font-bold w-[200px]"
class="border px-4 py-4 rounded-md bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:border-immich-dark-gray hover:bg-immich-primary/75 text-white font-bold w-[200px]"
on:click={onGettingStartedClicked}
>Getting Started
</button>

8
web/src/routes/admin/+page.svelte
View File

@@ -33,7 +33,7 @@
};
onMount(() => {
selectedAction = AdminSideBarSelection.JOBS;
selectedAction = AdminSideBarSelection.USER_MANAGEMENT;
getServerStats();
});
@@ -147,8 +147,10 @@
</section>
<section class="overflow-y-auto relative">
<div id="setting-title" class="pt-10 fixed w-full z-50">
<h1 class="text-lg ml-8 mb-4 text-immich-primary font-medium">{selectedAction}</h1>
<hr />
<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
{selectedAction}
</h1>
<hr class="dark:border-immich-dark-gray" />
</div>
<section id="setting-content" class="relative pt-[85px] flex place-content-center">

22
web/src/routes/albums/+page.svelte
View File

@@ -42,20 +42,28 @@
<NavigationBar user={data.user} shouldShowUploadButton={false} />
</section>
<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg ">
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<!-- Main Section -->
<section class="overflow-y-auto relative immich-scrollbar">
<section id="album-content" class="relative pt-8 pl-4 mb-12 bg-immich-bg">
<div class="px-4 flex justify-between place-items-center">
<section
id="album-content"
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
>
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
<div>
<p class="font-medium">Albums</p>
</div>
<div>
<button on:click={handleCreateAlbum} class="immich-text-button text-sm">
<button
on:click={handleCreateAlbum}
class="immich-text-button text-sm dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
>
<span>
<PlusBoxOutline size="18" />
</span>
@@ -65,7 +73,7 @@
</div>
<div class="my-4">
<hr />
<hr class="dark:border-immich-dark-gray" />
</div>
<!-- Album Card -->
@@ -85,11 +93,11 @@
<!-- Empty Message -->
{#if $albums.length === 0}
<div
class="border p-5 w-[50%] m-auto mt-10 bg-gray-50 rounded-3xl flex flex-col place-content-center place-items-center"
class="border dark:border-immich-dark-gray p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
>
<img src="/empty-1.svg" alt="Empty shared album" width="500" />
<p class="text-center text-immich-text-gray-500">
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
Create an album to organize your photos and videos
</p>
</div>

8
web/src/routes/photos/+page.svelte
View File

@@ -65,7 +65,9 @@
tailwindClasses={'bg-white shadow-md'}
>
<svelte:fragment slot="leading">
<p class="font-medium text-immich-primary">Selected {$selectedAssets.size}</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
Selected {$selectedAssets.size}
</p>
</svelte:fragment>
<svelte:fragment slot="trailing">
<CircleIconButton
@@ -83,7 +85,9 @@
{/if}
</section>
<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg">
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<AssetGrid />
</section>

17
web/src/routes/sharing/+page.svelte
View File

@@ -39,13 +39,18 @@
<NavigationBar user={data.user} shouldShowUploadButton={false} />
</section>
<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg">
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<section class="overflow-y-auto relative">
<section id="album-content" class="relative pt-8 pl-4 mb-12 bg-immich-bg">
<section
id="album-content"
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
>
<!-- Main Section -->
<div class="px-4 flex justify-between place-items-center">
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
<div>
<p class="font-medium">Sharing</p>
</div>
@@ -53,7 +58,7 @@
<div>
<button
on:click={createSharedAlbum}
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700"
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
>
<span>
<PlusBoxOutline size="18" />
@@ -64,7 +69,7 @@
</div>
<div class="my-4">
<hr />
<hr class="dark:border-immich-dark-gray" />
</div>
<!-- Share Album List -->
@@ -79,7 +84,7 @@
<!-- Empty List -->
{#if data.sharedAlbums.length === 0}
<div
class="border p-5 w-[50%] m-auto mt-10 bg-gray-50 rounded-3xl flex flex-col place-content-center place-items-center"
class="border dark:border-immich-dark-gray p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
>
<img src="/empty-2.svg" alt="Empty shared album" width="500" />
<p class="text-center text-immich-text-gray-500">