immich-app/static-pages
1
0
Fork 0
mirror of https://github.com/immich-app/static-pages.git synced 2026-09-30 13:23:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: theme (#444)

Browse Source 
* fix: root theme

* fix: api theme

* fix: rest
This commit is contained in:
Jason Rasmussen
2026-04-07 20:42:18 -04:00
committed by GitHub
parent 39ee219b16
commit ac44f11d0a
18 changed files with 78 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/api.immich.app/package.json
+1 -1
View File
@@ -44,7 +44,7 @@
"vitest-browser-svelte": "^2.0.0"
},
"dependencies": {
"@immich/ui": "^0.72.0",
"@immich/ui": "^0.73.0",
"@mdi/js": "^7.4.47",
"simple-icons": "^16.0.0",
"svelte-highlight": "^7.8.4",
apps/api.immich.app/src/app.html
+14 -2
View File
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
@@ -19,9 +19,21 @@
<meta name="twitter:title" content="Immich API Documentation" />
<meta name="twitter:description" content="Documentation and examples for the Immich API" />
<meta name="twitter:image" content="/img/social-preview.png" />
<script>
try {
if (JSON.parse(localStorage.getItem('immich-ui-theme')) === 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
}
} catch {
// noop
}
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="bg-light text-dark dark">
<body data-sveltekit-preload-data="hover" class="bg-light text-darks">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
apps/api.immich.app/src/routes/+layout.svelte
+3 -11
View File
@@ -10,11 +10,8 @@
commandPaletteManager,
CommandPaletteProvider,
defaultProvider,
initializeTheme,
onThemeChange,
siteCommands,
Theme,
theme,
themeManager,
TooltipProvider,
type ActionItem,
} from '@immich/ui';
@@ -27,12 +24,7 @@
let { children }: Props = $props();
initializeTheme({ selector: 'body' });
const handleToggleTheme = () => {
theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
onThemeChange();
};
themeManager.initialize();
commandPaletteManager.enable();
@@ -42,7 +34,7 @@
iconClass: 'text-purple-800 dark:text-purple-200',
title: 'Toggle theme',
description: 'Toggle between light and dark theme',
onAction: () => handleToggleTheme(),
onAction: () => themeManager.toggle(),
searchText: asText('theme', 'toggle', 'dark', 'light'),
},
];
apps/awesome.immich.app/package.json
+1 -1
View File
@@ -48,7 +48,7 @@
"vitest-browser-svelte": "^2.0.0"
},
"dependencies": {
"@immich/ui": "^0.72.0",
"@immich/ui": "^0.73.0",
"@mdi/js": "^7.4.47"
}
}
apps/awesome.immich.app/src/app.html
+5 -27
View File
@@ -5,40 +5,18 @@
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="currentColor" />
%sveltekit.head%
<style>
/* prevent FOUC */
html {
height: 100%;
width: 100%;
}
body,
html {
margin: 0;
padding: 0;
}
</style>
<script>
/**
* Prevent FOUC on page load.
*/
const THEME_KEY = 'immich-ui-theme';
let value;
try {
value = JSON.parse(localStorage.getItem(THEME_KEY)).value;
if (value !== 'light' && value !== 'dark') {
value = undefined;
if (JSON.parse(localStorage.getItem('immich-ui-theme')) === 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
}
} catch {
// noop
}
if (value === 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
}
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="bg-light text-dark">
apps/awesome.immich.app/src/routes/+layout.svelte
+2 -2
View File
@@ -9,8 +9,8 @@
ControlBar,
ControlBarHeader,
ControlBarOverflow,
initializeTheme,
Logo,
themeManager,
ThemeSwitcher,
TooltipProvider,
} from '@immich/ui';
@@ -23,7 +23,7 @@
const { children }: Props = $props();
initializeTheme({ selector: 'html', lightClass: 'light', darkClass: 'dark' });
themeManager.initialize();
</script>
<TooltipProvider>
apps/buy.immich.app/package.json
+1 -1
View File
@@ -44,7 +44,7 @@
"vitest-browser-svelte": "^2.0.0"
},
"dependencies": {
"@immich/ui": "^0.72.0",
"@immich/ui": "^0.73.0",
"@mdi/js": "^7.4.47",
"simple-icons": "^16.0.0",
"svelte-highlight": "^7.8.4"
apps/datasets.immich.app/package.json
+1 -1
View File
@@ -44,7 +44,7 @@
"vitest-browser-svelte": "^2.0.0"
},
"dependencies": {
"@immich/ui": "^0.72.0",
"@immich/ui": "^0.73.0",
"@mdi/js": "^7.4.47",
"exifreader": "^4.32.0",
"mediabunny": "^1.31.0",
apps/datasets.immich.app/src/app.html
+13 -2
View File
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
@@ -19,9 +19,20 @@
<meta name="twitter:title" content="Immich Dataset Uploader" />
<meta name="twitter:description" content="Help improve Immich by contributing to our dataset" />
<meta name="twitter:image" content="/img/social-preview.png" />
<script>
try {
if (JSON.parse(localStorage.getItem('immich-ui-theme')) === 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
}
} catch {
// noop
}
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="bg-light text-dark dark">
<body data-sveltekit-preload-data="hover" class="bg-light text-dark">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
apps/datasets.immich.app/src/routes/+layout.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import '$lib/app.css';
import { initializeTheme, TooltipProvider } from '@immich/ui';
import { themeManager, TooltipProvider } from '@immich/ui';
import type { Snippet } from 'svelte';
type Props = {
@@ -9,7 +9,7 @@
let { children }: Props = $props();
initializeTheme();
themeManager.initialize();
</script>
<TooltipProvider>
apps/futo-backups-survey.immich.app/package.json
+1 -1
View File
@@ -41,7 +41,7 @@
"vitest": "^4.1.1"
},
"dependencies": {
"@immich/ui": "^0.72.0",
"@immich/ui": "^0.73.0",
"@mdi/js": "^7.4.47",
"svelte-turnstile": "^0.11.0"
}
apps/get.immich.app/package.json
+1 -1
View File
@@ -44,7 +44,7 @@
"vitest-browser-svelte": "^2.0.0"
},
"dependencies": {
"@immich/ui": "^0.72.0",
"@immich/ui": "^0.73.0",
"@mdi/js": "^7.4.47",
"simple-icons": "^16.0.0",
"svelte-highlight": "^7.8.4"
apps/my.immich.app/package.json
+1 -1
View File
@@ -44,7 +44,7 @@
"vitest-browser-svelte": "^2.0.0"
},
"dependencies": {
"@immich/ui": "^0.72.0",
"@immich/ui": "^0.73.0",
"@mdi/js": "^7.4.47",
"simple-icons": "^16.0.0",
"svelte-highlight": "^7.8.4"
apps/root.immich.app/package.json
+1 -1
View File
@@ -51,7 +51,7 @@
"vitest-browser-svelte": "^2.0.0"
},
"dependencies": {
"@immich/ui": "^0.72.0",
"@immich/ui": "^0.73.0",
"@mdi/js": "^7.4.47",
"feed": "^5.1.0",
"front-matter": "^4.0.2",
apps/root.immich.app/src/app.html
+5 -27
View File
@@ -8,40 +8,18 @@
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/blog/feed.xml" />
<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="/blog/atom.xml" />
<link rel="alternate" type="application/json" title="JSON Feed" href="/blog/feed.json" />
%sveltekit.head%
<style>
/* prevent FOUC */
html {
height: 100%;
width: 100%;
}
body,
html {
margin: 0;
padding: 0;
}
</style>
<script>
/**
* Prevent FOUC on page load.
*/
const THEME_KEY = 'immich-ui-theme';
let value;
try {
value = JSON.parse(localStorage.getItem(THEME_KEY)).value;
if (value !== 'light' && value !== 'dark') {
value = undefined;
if (JSON.parse(localStorage.getItem('immich-ui-theme')) === 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
}
} catch {
// noop
}
if (value === 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
}
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="bg-light text-dark">
apps/root.immich.app/src/routes/+layout.svelte
+3 -4
View File
@@ -16,14 +16,13 @@
Constants,
defaultProvider,
IconButton,
initializeTheme,
Link,
Logo,
NavbarItem,
siteCommands,
Text,
themeManager,
ThemeSwitcher,
toggleTheme,
TooltipProvider,
type ActionItem,
} from '@immich/ui';
@@ -49,7 +48,7 @@
const { children }: Props = $props();
initializeTheme({ selector: 'html', lightClass: 'light', darkClass: 'dark' });
themeManager.initialize();
let pathname = '';
onMount(() => {
@@ -96,7 +95,7 @@
iconClass: 'text-purple-800 dark:text-purple-200',
title: 'Toggle theme',
description: 'Toggle between light and dark theme',
onAction: () => toggleTheme(),
onAction: () => themeManager.toggle(),
searchText: asText('theme', 'toggle', 'dark', 'light'),
},
];
apps/root.immich.app/src/routes/+page.svelte
+3 -3
View File
@@ -16,7 +16,7 @@
playStoreBadge,
SiteMetadata,
Text,
theme,
themeManager,
VStack,
} from '@immich/ui';
import { mdiKeyOutline, mdiOpenInNew, mdiShoppingOutline } from '@mdi/js';
@@ -64,7 +64,7 @@
</div>
<div class="relative -z-10">
<img src={theme.value === 'dark' ? screenshotDark : screenshotLight} alt="Immich application" />
<img src={themeManager.value === 'dark' ? screenshotDark : screenshotLight} alt="Immich application" />
<div class="absolute -top-[55%] left-0 -z-10 h-[200%] w-full overflow-visible">
<Logo size="giant" class="z-10 mb-2 h-full w-full antialiased opacity-20 blur-3xl" />
@@ -87,7 +87,7 @@
</Button>
</div>
<img src={theme.value === 'dark' ? qrCodeDark : qrCodeLight} alt="QRCode" class="h-36 rounded-xl" />
<img src={themeManager.value === 'dark' ? qrCodeDark : qrCodeLight} alt="QRCode" class="h-36 rounded-xl" />
<hr class="m-8 w-full max-w-(--breakpoint-sm) border-t" />
<Heading size="title" tag="h2">Support the project</Heading>