1
0
mirror of https://github.com/immich-app/immich.git synced 2024-12-28 11:15:54 +02:00
immich/web/src/app.html
martin 84e60ea155
feat(web): auto switch theme (#6176)
* move from app.html to user-page-layout.svelte

* fix: use layout.svelte

* simplify

* fix: map style don't change

* fix: auto switch theme map

* use constants

* simplify

* rename

* rename settign

* fix: remove

* pr feedback

* fix: tests

* fix: migration

* fix: migration

* pr feedback

* simplify

* simplify

* pr feedback

* fix: merge

* chore: set insetad of toggle on click

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
2024-01-07 00:15:25 +00:00

59 lines
1.9 KiB
HTML

<!doctype html>
<html lang="en" class="dark">
<head>
<!-- (used for SSR) -->
<!-- metadata:tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png" />
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180.png" />
%sveltekit.head%
<script>
/**
* Prevent FOUC on page load.
*/
const colorThemeKeyName = 'color-theme';
let theme;
const fallbackTheme = { value: 'dark', system: false };
let item = localStorage.getItem(colorThemeKeyName);
if (item === 'dark' || item === 'light') {
fallbackTheme.value = item;
item = JSON.stringify(fallbackTheme);
localStorage.setItem(colorThemeKeyName, item);
}
theme = JSON.parse(localStorage.getItem(colorThemeKeyName));
if (theme) {
if (theme.system) {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme.value = 'dark';
} else {
theme.value = 'light';
}
}
} else {
theme = fallbackTheme;
}
if (theme.value === 'light') {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}
</script>
<link rel="stylesheet" href="/custom.css" />
</head>
<body class="bg-immich-bg dark:bg-immich-dark-bg">
<div>%sveltekit.body%</div>
</body>
</html>