theme: set theme-color for ios devices

colours the search bar, sometimes.
This commit is contained in:
Harvey Tindall
2025-12-11 14:47:22 +00:00
parent 26d05911fd
commit e4e9369d54
3 changed files with 13 additions and 10 deletions

View File

@@ -66,9 +66,6 @@ html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
:root {
font-size: 0.9rem;
}
.table-responsive table { .table-responsive table {
min-width: 800px; min-width: 800px;
} }
@@ -287,11 +284,6 @@ p.top {
margin-top: 0px; margin-top: 0px;
} }
.table-responsive {
overflow-x: auto;
font-size: 0.9rem;
}
#notification-box { #notification-box {
position: fixed; position: fixed;
right: 1rem; right: 1rem;
@@ -496,3 +488,7 @@ section.section:not(.\~neutral) {
.content li { .content li {
text-align: start; text-align: start;
} }
.input {
font-size: 16px !important;
}

View File

@@ -3,6 +3,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="Description" content="jfa-go, a better way to manage Jellyfin users."> <meta name="Description" content="jfa-go, a better way to manage Jellyfin users.">
<meta name="color-scheme" content="dark light"> <meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#101010" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff">
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
<link rel="apple-touch-icon" sizes="180x180" href="{{ .pages.Base }}/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="{{ .pages.Base }}/apple-touch-icon.png">
@@ -11,7 +14,6 @@
<link rel="manifest" href="{{ .pages.Base }}/site.webmanifest"> <link rel="manifest" href="{{ .pages.Base }}/site.webmanifest">
<link rel="mask-icon" href="{{ .pages.Base }}/safari-pinned-tab.svg" color="#5bbad5"> <link rel="mask-icon" href="{{ .pages.Base }}/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#603cba"> <meta name="msapplication-TileColor" content="#603cba">
<meta name="theme-color" content="#ffffff">
<script> <script>
window.pages = { window.pages = {
"Base": "{{ .pages.Base }}", "Base": "{{ .pages.Base }}",

View File

@@ -85,7 +85,9 @@ export class ThemeManager {
this._cssLightFiles.forEach((el) => document.head.appendChild(el)); this._cssLightFiles.forEach((el) => document.head.appendChild(el));
} }
localStorage.setItem("theme", document.documentElement.classList.contains("dark") ? "dark" : "light"); localStorage.setItem("theme", document.documentElement.classList.contains("dark") ? "dark" : "light");
document.head
.querySelectorAll("meta[name=theme-color]")
.forEach((el) => el.setAttribute("content", dark ? "#101010" : "ffffff"));
// this._metaTag.setAttribute("content", metaValue); // this._metaTag.setAttribute("content", metaValue);
}; };
@@ -110,6 +112,9 @@ export class ThemeManager {
this._cssLightFiles.forEach((el) => document.head.appendChild(el)); this._cssLightFiles.forEach((el) => document.head.appendChild(el));
} }
// this._metaTag.setAttribute("content", `${mode} ${opposite}`); // this._metaTag.setAttribute("content", `${mode} ${opposite}`);
document.head
.querySelectorAll("meta[name=theme-color]")
.forEach((el) => el.setAttribute("content", dark ? "#101010" : "ffffff"));
}; };
enable = (dark: boolean) => { enable = (dark: boolean) => {