app.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <link rel="icon" href="%sveltekit.assets%/favicon.png" />
  6. <link rel="manifest" href="%sveltekit.assets%/manifest.json" crossorigin="use-credentials" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  8. <meta name="robots" content="noindex,nofollow" />
  9. <link
  10. rel="search"
  11. type="application/opensearchdescription+xml"
  12. title="Open WebUI"
  13. href="/opensearch.xml"
  14. />
  15. <script>
  16. // On page load or when changing themes, best to add inline in `head` to avoid FOUC
  17. (() => {
  18. if (localStorage?.theme && localStorage?.theme.includes('oled')) {
  19. document.documentElement.style.setProperty('--color-gray-900', '#000000');
  20. document.documentElement.style.setProperty('--color-gray-950', '#000000');
  21. document.documentElement.classList.add('dark');
  22. } else if (
  23. localStorage.theme === 'light' ||
  24. (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
  25. ) {
  26. document.documentElement.classList.add('light');
  27. } else if (localStorage.theme && localStorage.theme !== 'system') {
  28. localStorage.theme.split(' ').forEach((e) => {
  29. document.documentElement.classList.add(e);
  30. });
  31. } else if (localStorage.theme && localStorage.theme === 'system') {
  32. systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
  33. document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
  34. } else {
  35. document.documentElement.classList.add('dark');
  36. }
  37. window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
  38. if (localStorage.theme === 'system') {
  39. if (e.matches) {
  40. document.documentElement.classList.add('dark');
  41. document.documentElement.classList.remove('light');
  42. } else {
  43. document.documentElement.classList.add('light');
  44. document.documentElement.classList.remove('dark');
  45. }
  46. }
  47. });
  48. })();
  49. </script>
  50. <title>Open WebUI</title>
  51. %sveltekit.head%
  52. </head>
  53. <body data-sveltekit-preload-data="hover">
  54. <div style="display: contents">%sveltekit.body%</div>
  55. <div
  56. id="splash-screen"
  57. style="
  58. position: fixed;
  59. z-index: 100;
  60. background: #fff;
  61. top: 0;
  62. left: 0;
  63. width: 100%;
  64. height: 100%;
  65. "
  66. >
  67. <style type="text/css" nonce="">
  68. html {
  69. overflow-y: scroll !important;
  70. }
  71. </style>
  72. <img
  73. style="
  74. position: absolute;
  75. width: 6rem;
  76. height: 6rem;
  77. top: 46%;
  78. left: 50%;
  79. margin: -40px 0 0 -40px;
  80. "
  81. src="/logo.svg"
  82. />
  83. <!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
  84. Footer content
  85. </span> -->
  86. </div>
  87. </body>
  88. </html>