app.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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="position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%"
  58. >
  59. <style type="text/css" nonce="">
  60. html {
  61. overflow-y: scroll !important;
  62. }
  63. </style>
  64. <img
  65. style="
  66. position: absolute;
  67. width: 6rem;
  68. height: 6rem;
  69. top: 46%;
  70. left: 50%;
  71. margin: -40px 0 0 -40px;
  72. "
  73. src="/logo.svg"
  74. />
  75. <!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
  76. Footer content
  77. </span> -->
  78. </div>
  79. </body>
  80. </html>
  81. <style type="text/css" nonce="">
  82. html {
  83. overflow-y: hidden !important;
  84. }
  85. #splash-screen {
  86. background: #fff;
  87. }
  88. html.dark #splash-screen {
  89. background: #000;
  90. }
  91. html.dark #splash-screen img {
  92. filter: invert(1);
  93. }
  94. </style>