mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web) dark mode (#867)
This commit is contained in:
Alex
GitHub
parent
ae96508e15
commit
f94176a910
39 changed files with 362 additions and 186 deletions
|
|
@ -36,7 +36,7 @@
|
|||
<div
|
||||
use:clickOutside
|
||||
on:out-click={() => dispatch('close')}
|
||||
class="bg-white w-[450px] min-h-[200px] max-h-[500px] rounded-lg shadow-md"
|
||||
class="bg-immich-bg dark:bg-immich-dark-gray dark:text-immich-dark-fg w-[450px] min-h-[200px] max-h-[500px] rounded-lg shadow-md"
|
||||
>
|
||||
<div class="flex justify-between place-items-center p-5">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
export let logo: any;
|
||||
export let backgroundColor = 'transparent';
|
||||
export let hoverColor = '#e2e7e9';
|
||||
export let logoColor = '#5f6368';
|
||||
export let size = '24';
|
||||
export let title = '';
|
||||
let iconButton: HTMLButtonElement;
|
||||
|
|
@ -26,10 +25,10 @@
|
|||
<button
|
||||
{title}
|
||||
bind:this={iconButton}
|
||||
class={`immich-circle-icon-button rounded-full p-3 flex place-items-center place-content-center transition-all`}
|
||||
class={`immich-circle-icon-button dark:text-immich-dark-fg hover:dark:text-immich-dark-gray rounded-full p-3 flex place-items-center place-content-center transition-all`}
|
||||
on:click={(mouseEvent) => dispatch('click', { mouseEvent })}
|
||||
>
|
||||
<svelte:component this={logo} {size} color={logoColor} />
|
||||
<svelte:component this={logo} {size} />
|
||||
</button>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div
|
||||
transition:slide={{ duration: 200, easing: quintOut }}
|
||||
bind:this={menuEl}
|
||||
class="absolute bg-white w-[175px] z-[99999] rounded-lg shadow-md"
|
||||
class="absolute w-[175px] z-[99999] rounded-lg shadow-md"
|
||||
style={`top: ${y}px; left: ${x}px;`}
|
||||
use:clickOutside
|
||||
on:out-click={() => dispatch('clickoutside')}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<button
|
||||
class:disabled={isDisabled}
|
||||
on:click={handleClick}
|
||||
class="bg-white hover:bg-immich-bg transition-all p-4 w-full text-left rounded-lg text-sm"
|
||||
class="bg-white hover:bg-gray-300 dark:text-immich-dark-bg transition-all p-4 w-full text-left rounded-lg text-sm"
|
||||
>
|
||||
{#if text}
|
||||
{text}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
const onScroll = () => {
|
||||
if (window.pageYOffset > 80) {
|
||||
appBarBorder = 'border border-gray-200 bg-gray-50';
|
||||
appBarBorder = 'border border-gray-200 bg-gray-50 dark:border-gray-600';
|
||||
} else {
|
||||
appBarBorder = 'bg-immich-bg border border-transparent';
|
||||
}
|
||||
|
|
@ -39,14 +39,13 @@
|
|||
>
|
||||
<div
|
||||
id="asset-selection-app-bar"
|
||||
class={`flex justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center ${tailwindClasses}`}
|
||||
class={`flex justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center ${tailwindClasses} dark:bg-immich-dark-gray`}
|
||||
>
|
||||
<div class="flex place-items-center gap-6">
|
||||
<div class="flex place-items-center gap-6 dark:text-immich-dark-fg">
|
||||
<CircleIconButton
|
||||
on:click={() => dispatch('close-button-click')}
|
||||
logo={backIcon}
|
||||
backgroundColor={'transparent'}
|
||||
logoColor={'rgb(75 85 99)'}
|
||||
hoverColor={'#e2e7e9'}
|
||||
size={'24'}
|
||||
/>
|
||||
|
|
@ -54,7 +53,7 @@
|
|||
<slot name="leading" />
|
||||
</div>
|
||||
|
||||
<div class="flex place-items-center gap-1 mr-4">
|
||||
<div class="flex place-items-center gap-1 mr-4 ">
|
||||
<slot name="trailing" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
<div
|
||||
style:width={`${thumbnailSize}px`}
|
||||
style:height={`${thumbnailSize}px`}
|
||||
class={`bg-gray-100 relative select-none ${getSize()} ${
|
||||
class={`bg-gray-100 dark:bg-immich-dark-gray relative select-none ${getSize()} ${
|
||||
disabled ? 'cursor-not-allowed' : 'hover:cursor-pointer'
|
||||
}`}
|
||||
on:mouseenter={handleMouseOverThumbnail}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
|
||||
import { clickOutside } from '../../utils/click-outside';
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import ThemeButton from './theme-button.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
export let shouldShowUploadButton = true;
|
||||
|
|
@ -42,28 +43,35 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<section id="dashboard-navbar" class="fixed w-screen z-[100] bg-immich-bg text-sm">
|
||||
<div class="flex border-b place-items-center px-6 py-2 ">
|
||||
<section
|
||||
id="dashboard-navbar"
|
||||
class="fixed w-screen z-[100] bg-immich-bg dark:bg-immich-dark-bg text-sm"
|
||||
>
|
||||
<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
|
||||
<a
|
||||
data-sveltekit-prefetch
|
||||
class="flex gap-2 place-items-center hover:cursor-pointer"
|
||||
href="/photos"
|
||||
>
|
||||
<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" />
|
||||
<h1 class="font-immich-title text-2xl text-immich-primary">IMMICH</h1>
|
||||
<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
|
||||
IMMICH
|
||||
</h1>
|
||||
</a>
|
||||
<div class="flex-1 ml-24">
|
||||
<input
|
||||
class="w-[50%] border rounded-md bg-gray-200 px-8 py-4"
|
||||
class="w-[50%] rounded-md bg-gray-200 dark:bg-immich-dark-gray px-8 py-4"
|
||||
placeholder="Search - Coming soon"
|
||||
/>
|
||||
</div>
|
||||
<section class="flex gap-4 place-items-center">
|
||||
<ThemeButton />
|
||||
|
||||
{#if $page.url.pathname !== '/admin' && shouldShowUploadButton}
|
||||
<button
|
||||
in:fly={{ x: 50, duration: 250 }}
|
||||
on:click={() => dispatch('uploadClicked')}
|
||||
class="immich-text-button"
|
||||
class="immich-text-button dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
||||
>
|
||||
<TrayArrowUp size="20" />
|
||||
<span> Upload </span>
|
||||
|
|
@ -73,8 +81,9 @@
|
|||
{#if user.isAdmin}
|
||||
<a data-sveltekit-prefetch href={`admin`}>
|
||||
<button
|
||||
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium ${
|
||||
$page.url.pathname == '/admin' && 'text-immich-primary underline'
|
||||
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
|
||||
$page.url.pathname == '/admin' &&
|
||||
'text-immich-primary dark:immich-dark-primary underline'
|
||||
}`}>Administration</button
|
||||
>
|
||||
</a>
|
||||
|
|
@ -87,7 +96,7 @@
|
|||
on:click={showAccountInfoPanel}
|
||||
>
|
||||
<button
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary/80 h-12 w-12 text-gray-100 hover:bg-immich-primary"
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
|
||||
>
|
||||
{#if shouldShowProfileImage}
|
||||
<img
|
||||
|
|
@ -104,7 +113,7 @@
|
|||
<div
|
||||
in:fade={{ delay: 500, duration: 150 }}
|
||||
out:fade={{ delay: 200, duration: 150 }}
|
||||
class="absolute -bottom-12 right-5 border bg-gray-500 text-[12px] text-gray-100 p-2 rounded-md shadow-md"
|
||||
class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
|
||||
>
|
||||
<p>{user.firstName} {user.lastName}</p>
|
||||
<p>{user.email}</p>
|
||||
|
|
@ -119,13 +128,13 @@
|
|||
in:fade={{ duration: 100 }}
|
||||
out:fade={{ duration: 100 }}
|
||||
id="account-info-panel"
|
||||
class="absolute right-[25px] top-[75px] bg-white shadow-lg rounded-2xl w-[360px] text-center z-[100]"
|
||||
class="absolute right-[25px] top-[75px] bg-immich-bg dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-2xl w-[360px] text-center z-[100]"
|
||||
use:clickOutside
|
||||
on:out-click={() => (shouldShowAccountInfoPanel = false)}
|
||||
>
|
||||
<div class="flex place-items-center place-content-center mt-6">
|
||||
<button
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary"
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg"
|
||||
>
|
||||
{#if shouldShowProfileImage}
|
||||
<img
|
||||
|
|
@ -141,20 +150,21 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-lg text-immich-primary font-medium mt-4">
|
||||
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
|
||||
{user.firstName}
|
||||
{user.lastName}
|
||||
</p>
|
||||
|
||||
<p class="text-sm text-gray-500">{user.email}</p>
|
||||
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
|
||||
|
||||
<div class="my-4">
|
||||
<hr />
|
||||
<hr class="dark:border-immich-dark-bg" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<button class="border rounded-3xl px-6 py-2 hover:bg-gray-50" on:click={logOut}
|
||||
>Sign Out</button
|
||||
<button
|
||||
class="border rounded-3xl px-6 py-2 hover:bg-gray-50 dark:border-immich-dark-gray dark:bg-gray-300 dark:hover:bg-immich-dark-primary"
|
||||
on:click={logOut}>Sign Out</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@
|
|||
>
|
||||
{#if isHover}
|
||||
<div
|
||||
class="border-b-2 border-immich-primary w-[100px] right-0 pr-6 py-1 text-sm pl-1 font-medium absolute bg-white z-50 pointer-events-none rounded-tl-md shadow-lg"
|
||||
class="border-b-2 border-immich-primary dark:border-immich-dark-primary w-[100px] right-0 pr-6 py-1 text-sm pl-1 font-medium absolute bg-immich-bg dark:bg-immich-dark-gray z-50 pointer-events-none rounded-tl-md shadow-lg dark:text-immich-dark-fg"
|
||||
style:top={currentMouseYLocation + 'px'}
|
||||
>
|
||||
{hoveredDate?.toLocaleString('default', { month: 'short' })}
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
<!-- Scroll Position Indicator Line -->
|
||||
{#if !isDragging}
|
||||
<div
|
||||
class="absolute right-0 w-10 h-[2px] bg-immich-primary"
|
||||
class="absolute right-0 w-10 h-[2px] bg-immich-primary dark:bg-immich-dark-primary"
|
||||
style:top={scrollbarPosition + 'px'}
|
||||
/>
|
||||
{/if}
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
{#if segment.height > 8}
|
||||
<div
|
||||
aria-label={segment.timeGroup + ' ' + segment.count}
|
||||
class="absolute right-0 pr-5 z-10 text-xs font-medium"
|
||||
class="absolute right-0 pr-5 z-10 text-xs font-medium dark:text-immich-dark-fg"
|
||||
>
|
||||
{groupDate.getFullYear()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,10 +23,13 @@
|
|||
|
||||
<div
|
||||
on:click={onButtonClicked}
|
||||
class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-full rounded-br-full hover:bg-gray-200 hover:text-immich-primary hover:cursor-pointer
|
||||
${isSelected && 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/25'}
|
||||
class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-full rounded-br-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
|
||||
${
|
||||
isSelected &&
|
||||
'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<svelte:component this={logo} size="24" />
|
||||
<p class="font-medium text-sm">{title}</p>
|
||||
<p class="font-medium text-sm ">{title}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -52,8 +52,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6">
|
||||
<!-- {domCount} -->
|
||||
<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6 bg-immich-bg dark:bg-immich-dark-bg">
|
||||
<a
|
||||
data-sveltekit-prefetch
|
||||
data-sveltekit-noscroll
|
||||
|
|
@ -127,7 +126,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
<div class="text-xs ml-5 my-4">
|
||||
<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
|
||||
<p>LIBRARY</p>
|
||||
</div>
|
||||
<a data-sveltekit-prefetch href={$page.routeId !== 'albums' ? `/albums` : null} class="relative">
|
||||
|
|
|
|||
|
|
@ -46,18 +46,18 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="dark:text-immich-dark-fg">
|
||||
<div class="storage-status grid grid-cols-[64px_auto]">
|
||||
<div class="pl-5 pr-6 text-immich-primary">
|
||||
<div class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary">
|
||||
<Cloud size={'24'} />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-immich-primary">Storage</p>
|
||||
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
|
||||
{#if serverInfo}
|
||||
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
|
||||
<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
|
||||
<div
|
||||
class="bg-immich-primary h-[7px] rounded-full"
|
||||
class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
|
||||
style={`width: ${getStorageUsagePercentage()}%`}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -70,29 +70,29 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<hr class="ml-5 my-4" />
|
||||
<hr class="ml-5 my-4 dark:border-immich-dark-gray" />
|
||||
</div>
|
||||
<div class="server-status grid grid-cols-[64px_auto]">
|
||||
<div class="pl-5 pr-6 text-immich-primary">
|
||||
<div class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary">
|
||||
<Dns size={'24'} />
|
||||
</div>
|
||||
|
||||
<div class="text-xs">
|
||||
<p class="text-sm font-medium text-immich-primary">Server</p>
|
||||
<div class="text-xs ">
|
||||
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
|
||||
|
||||
<div class="flex justify-items-center justify-between mt-2">
|
||||
<div class="flex justify-items-center justify-between mt-2 ">
|
||||
<p>Status</p>
|
||||
|
||||
{#if isServerOk}
|
||||
<p class="font-medium text-immich-primary">Online</p>
|
||||
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
|
||||
{:else}
|
||||
<p class="font-medium text-red-500">Offline</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-items-center justify-between mt-2">
|
||||
<div class="flex justify-items-center justify-between mt-2 ">
|
||||
<p>Version</p>
|
||||
<p class="font-medium text-immich-primary">{serverVersion}</p>
|
||||
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{serverVersion}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
77
web/src/lib/components/shared-components/theme-button.svelte
Normal file
77
web/src/lib/components/shared-components/theme-button.svelte
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let toggleButton: HTMLElement;
|
||||
|
||||
onMount(() => {
|
||||
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
||||
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
|
||||
|
||||
// Change the icons inside the button based on previous settings
|
||||
if (
|
||||
localStorage.getItem('color-theme') === 'dark' ||
|
||||
(!('color-theme' in localStorage) &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
themeToggleLightIcon?.classList.remove('hidden');
|
||||
} else {
|
||||
themeToggleDarkIcon?.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
const toggleTheme = () => {
|
||||
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
||||
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
|
||||
// toggle icons inside button
|
||||
themeToggleDarkIcon?.classList.toggle('hidden');
|
||||
themeToggleLightIcon?.classList.toggle('hidden');
|
||||
|
||||
// if set via local storage previously
|
||||
if (localStorage.getItem('color-theme')) {
|
||||
if (localStorage.getItem('color-theme') === 'light') {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.setItem('color-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.setItem('color-theme', 'light');
|
||||
}
|
||||
} else {
|
||||
if (document.documentElement.classList.contains('dark')) {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.setItem('color-theme', 'light');
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.setItem('color-theme', 'dark');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
bind:this={toggleButton}
|
||||
on:click={toggleTheme}
|
||||
id="theme-toggle"
|
||||
type="button"
|
||||
class="text-gray-500 dark:text-immich-dark-primary hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5"
|
||||
>
|
||||
<svg
|
||||
id="theme-toggle-dark-icon"
|
||||
class="hidden w-6 h-6"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
|
||||
>
|
||||
<svg
|
||||
id="theme-toggle-light-icon"
|
||||
class="hidden w-6 h-6"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
Loading…
Add table
Add a link
Reference in a new issue