jcoffey-dev
8487f561f6
A dark theme carrying ihasmail.org's palette: a teal-navy ground rather
than the blue-slate of the plain dark theme, with the orange the logo's
cat is drawn in doing the work of the star and the warning colour. The
values are the site's own, read from its stylesheet rather than picked
by eye.
It is a theme rather than an accent because it changes backgrounds,
borders and text as well as the highlight -- an accent could not.
It rides on data-theme="dark" and adds data-palette="ihasmail" on top,
so the eleven dark-only rules further down the stylesheet keep applying
without being duplicated for a second dark theme. Specificity then does
something deliberate: the palette block is 0,2,0 and the accent variants
are 0,3,0, so a chosen accent still wins over it -- and because the
default accent ("teal") has no rule of its own, ihasmail.org's accent is
what shows until someone picks another. Verified both ways in a browser.
It is now what a new account starts on, so the app looks like itself
before anyone has chosen anything. Only a default: a stored theme always
wins, which leaves everyone already using ihasmail where they are, since
the setting is saved whether or not they deliberately picked it.
While here, the theme-color meta tag was fixed. There were two, both
carrying media attributes, and applyTheme looks for
:not([media]) -- so it matched neither and the browser chrome had never
followed the chosen theme at all, only what the OS preferred. One tag
now, updated from JS, starting at the default theme's background so the
first paint is right too.
Contrast measured rather than assumed, against the theme's own
background: text 14.5:1, muted 8.6:1, faint 6.4:1, accent 8.0:1, link
9.8:1, star 7.9:1, accent-on-accent 8.4:1. All AA or better.
33 lines
1.5 KiB
HTML
33 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<!--
|
|
One tag, no media query: applyTheme() keeps it in step with the chosen
|
|
theme, which a media query cannot do — it only knows what the OS prefers,
|
|
not what the user picked here. There used to be two, both with media
|
|
attributes, which meant the selector in applyTheme (:not([media])) matched
|
|
neither and the colour never moved off whatever the OS implied.
|
|
|
|
The initial value is the default theme's background, so the browser chrome
|
|
is right from the first paint rather than only once JS has run.
|
|
-->
|
|
<meta name="theme-color" content="#0d2430" />
|
|
<meta name="description" content="ihasmail - fast, friendly JMAP webmail for Stalwart" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<link rel="icon" href="/favicon.ico" sizes="any" />
|
|
<link rel="icon" type="image/png" sizes="64x64" href="/img/favicon-64.png" />
|
|
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png" />
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<title>ihasmail</title>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|