refac: favicon
Timothy Jaeryang Baek
39
src/app.html
@ -2,11 +2,13 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
|
<link rel="icon" type="image/png" href="/static/favicon.png" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
|
<link rel="icon" type="image/png" href="/static/favicon-96x96.png" sizes="96x96" />
|
||||||
<link rel="shortcut icon" href="/favicon/favicon.ico" />
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
<link rel="shortcut icon" href="/static/favicon.ico" />
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" />
|
||||||
<meta name="apple-mobile-web-app-title" content="Open WebUI" />
|
<meta name="apple-mobile-web-app-title" content="Open WebUI" />
|
||||||
|
|
||||||
<link rel="manifest" href="/manifest.json" />
|
<link rel="manifest" href="/manifest.json" />
|
||||||
<meta
|
<meta
|
||||||
name="viewport"
|
name="viewport"
|
||||||
@ -74,6 +76,31 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function setSplashImage() {
|
||||||
|
const logo = document.getElementById('logo');
|
||||||
|
const isDarkMode = document.documentElement.classList.contains('dark');
|
||||||
|
|
||||||
|
if (isDarkMode) {
|
||||||
|
const darkImage = new Image();
|
||||||
|
darkImage.src = '/static/splash-dark.png';
|
||||||
|
|
||||||
|
darkImage.onload = () => {
|
||||||
|
logo.src = '/static/splash-dark.png';
|
||||||
|
logo.style.filter = ''; // Ensure no inversion is applied if splash-dark.png exists
|
||||||
|
};
|
||||||
|
|
||||||
|
darkImage.onerror = () => {
|
||||||
|
logo.style.filter = 'invert(1)'; // Invert image if splash-dark.png is missing
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Runs after classes are assigned
|
||||||
|
window.onload = setSplashImage;
|
||||||
|
|
||||||
|
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -176,10 +203,6 @@
|
|||||||
background: #000;
|
background: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
html.dark #splash-screen img {
|
|
||||||
filter: invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
html.her #splash-screen {
|
html.her #splash-screen {
|
||||||
background: #983724;
|
background: #983724;
|
||||||
}
|
}
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |