Niklas Ye
a8dc89e23d
Secondary text was too dim to read: --faint sat at about 4.0:1 in the dark theme and 3.3:1 in the light one, and it carries row ages, hints and labels. It now clears 4.5:1 in both. The dark surfaces and borders are a step further apart so cards stand out from the page, and the light borders a touch stronger. Account has an Appearance section with System, Light and Dark. System is the old behaviour. The choice is per browser, kept in localStorage, and is applied by a small js/theme.js loaded from <head> so there is no flash of the other theme; the CSP allows no inline script, hence a file of its own. On-call is redesigned: a hero card for who is on call now, with when the shift ends for the selected team, and the week as seven day cells instead of grouped rows. Today is marked with a neutral tint and a bar rather than the accent colour, which now means only things you can act on; your own days are marked by the "you" badge, not a fill. On a wide screen the hero and week sit beside your shifts under a page title. The page stays read-only: shifts are still edited in the TUI. Smaller fixes: the team switcher no longer appears in the phone's bottom bar as well as the top bar (a shared rule overrode the one that hides it); the Team and Admin tab strips fade at the edge and scroll the open section into view, so "Sources" is no longer cut off; and "All clear" is a green status badge with a check instead of a grey pill that looked like a button. Web UI only: no endpoint or JSON shape changed, so nothing to mirror in terdut-tui.
46 lines
1.6 KiB
JavaScript
46 lines
1.6 KiB
JavaScript
// Theme override: System (no attribute, the OS decides), Light or Dark.
|
|
//
|
|
// A classic script loaded from <head>, not a module, so the saved choice is on
|
|
// <html> before the first paint and a Dark user on a light OS never sees a
|
|
// flash. The CSP allows no inline script, hence a file of its own. Account
|
|
// (account.js) reads and writes the choice through window.terdutTheme.
|
|
(function () {
|
|
var KEY = 'terdut.theme';
|
|
var COLORS = { light: '#f5f6f8', dark: '#0f1115' };
|
|
|
|
function get() {
|
|
try {
|
|
var v = localStorage.getItem(KEY);
|
|
return v === 'light' || v === 'dark' ? v : 'system';
|
|
} catch (e) {
|
|
return 'system'; // storage unavailable
|
|
}
|
|
}
|
|
|
|
// The browser chrome colour follows the choice too; the two <meta>s are
|
|
// media-keyed to the OS, so a forced theme sets both to the same colour.
|
|
function apply(theme) {
|
|
var root = document.documentElement;
|
|
if (theme === 'system') root.removeAttribute('data-theme');
|
|
else root.setAttribute('data-theme', theme);
|
|
var metas = document.querySelectorAll('meta[name="theme-color"]');
|
|
for (var i = 0; i < metas.length; i++) {
|
|
var scheme = /dark/.test(metas[i].media) ? 'dark' : 'light';
|
|
metas[i].content = COLORS[theme === 'system' ? scheme : theme];
|
|
}
|
|
}
|
|
|
|
function set(theme) {
|
|
try {
|
|
if (theme === 'system') localStorage.removeItem(KEY);
|
|
else localStorage.setItem(KEY, theme);
|
|
} catch (e) {
|
|
/* storage unavailable: applies for this page view only */
|
|
}
|
|
apply(theme);
|
|
}
|
|
|
|
window.terdutTheme = { get: get, set: set };
|
|
apply(get());
|
|
})();
|