/* Named theme sets. * * tokens.css declares the CONTRACT -- every variable the UI reads, with the * default (Dark) values on :root. This file supplies alternative VALUES for the * same variables under [data-theme="..."]. * * Adding a theme means adding one block here plus one entry in * public/assets/js/themes.js. No component CSS changes, because nothing * downstream references a literal colour. * * Every theme is contrast-checked; the figures in each header are WCAG 2.1 * ratios against that theme's own page background. Anything used for body text * clears 4.5, and non-text (icons, borders) clears 3. */ /* =========================================================================== * MIDNIGHT — matches the iOS app exactly. * * Sampled from a screenshot of the shipping app: page #141414, cards #1c1c1e, * accent #5ac8fa. Choose this to have web and mobile look identical; the * default Dark theme is the same hue on a lighter page, which suits a * full-width desktop layout better. * * #d6d6d6 text on #141414 14.0 * #5ac8fa accent on #141414 10.7 * =========================================================================== */ :root[data-theme="midnight"] { --scs-bg: #141414; --scs-surface: #1c1c1e; --scs-surface-raised:#242426; --scs-surface-hover: #2c2c2e; --scs-surface-stripe:#181818; --scs-text: #d6d6d6; --scs-text-secondary:#a8a8ad; --scs-text-muted: #8a8a8f; --scs-border: #2c2c2e; --scs-border-strong: #3a3a3c; --scs-accent: #5ac8fa; --scs-accent-hover: #8ad8fc; --scs-accent-muted: rgba(90, 200, 250, 0.16); --scs-table-head-bg: #242426; --scs-table-head-text: #d6d6d6; color-scheme: dark; } :root[data-theme="midnight"] nav.sidebar { background: #0e0e0e; } /* =========================================================================== * SLATE — cool blue-grey surfaces rather than neutral grey. * * #d8dce2 text on #262b31 11.0 * #7fb8e0 accent on #262b31 6.4 * =========================================================================== */ :root[data-theme="slate"] { --scs-bg: #262b31; --scs-surface: #2d333a; --scs-surface-raised:#353c44; --scs-surface-hover: #3d444d; --scs-surface-stripe:#292f35; --scs-text: #d8dce2; --scs-text-secondary:#aab2bd; --scs-text-muted: #969fac; /* lifted from #8d96a3, which was 4.27 on slate's card (#2d333a). 4.77 now. Same reason as the default -- see tokens.css. */ --scs-border: #3a424c; --scs-border-strong: #4a5561; --scs-accent: #7fb8e0; --scs-accent-hover: #a3cdea; --scs-accent-muted: rgba(127, 184, 224, 0.16); --scs-table-head-bg: #353c44; --scs-table-head-text: #d8dce2; color-scheme: dark; } :root[data-theme="slate"] nav.sidebar { background: #1f242a; } /* =========================================================================== * LIGHT — approximates the original site. * * White page, #2b2b2b body text, #cccccc borders, and the legacy DARK table * head with white text, which is what myarchives.min.css does. * * The accent cannot carry over: the app's #5ac8fa scores 1.90 on white, and the * site's own #0099ff scores 3.00 -- the live site's links already fail AA * today. #0b74b5 is the same family at 5.02. * * Legacy muted #848484 also fails on white (3.74), so it deepens to #6b6b6b. * =========================================================================== */ :root[data-theme="light"] { /* The page is tinted and the CARD is white, not the other way round. Every dark theme puts --scs-surface a step BRIGHTER than --scs-bg, so a card reads as an object lying on the page; in a light theme brighter means whiter. Both were #ffffff here, which is why Light was the one theme with no layer structure -- a search hit, a stat card and the page behind them were the same surface, separated only where something drew a border. */ --scs-bg: #f4f5f7; --scs-surface: #ffffff; --scs-surface-raised:#f1f3f6; --scs-surface-hover: #eaedf1; /* was #ebebeb -- see the accent note below */ --scs-surface-stripe:#f7f8fa; /* legacy used #eee */ --scs-text: #2b2b2b; /* the site's dominant colour, as text */ --scs-text-secondary:#555555; --scs-text-muted: #6b6b6b; --scs-border: #cccccc; /* the site's border colour */ --scs-border-strong: #999999; /* Deepened from #0b74b5. That value was chosen against white (5.02) and held up everywhere text sits on the page or a card -- but a link inside a HOVERED table row sits on --scs-surface-hover, where it was 4.21 and failed. #0a6ba6 is the same hue at 4.88 against the darkest surface in this theme. Measured by tools/screenshots/themeaudit.js. */ --scs-accent: #0a6ba6; --scs-accent-hover: #085584; /* This accent is dark, so white is correct here -- 5.73 vs 3.46 for dark. */ --scs-text-on-accent:#ffffff; --scs-accent-muted: rgba(10, 107, 166, 0.10); --scs-danger: #bb0600; /* the originals work on white */ --scs-purple: #6f5499; /* Ben's call: #3a3a3a, not the #2b2b2b that matched --scs-text. A head that is exactly the text colour reads as a solid black bar on a white page; lifting it slightly keeps the legacy dark-head look without the weight. */ --scs-table-head-bg: #3a3a3a; /* legacy: dark head on a white page */ --scs-table-head-text: #ffffff; /* 11.37 on the head above */ /* Not --scs-accent (#0a6ba6): that is 2.47 on this head. 4.77 -- it was 5.94 against the old #2b2b2b head, and lifting the head to #3a3a3a spent some of that margin. Still over AA's 4.5, but this is now the tightest ratio in the light theme: darken this rather than the head if the head is ever lifted further. Measured by themeaudit.js. */ --scs-table-head-accent: #5ab0e8; color-scheme: light; } /* The rail keeps its original blue in light mode -- that IS the legacy look. */ :root[data-theme="light"] nav.sidebar { background: #0099ff; border-right: 0; } /* White is right here and only here: the light theme keeps the legacy blue rail, where --scs-text (#2b2b2b) would be unreadable. */ :root[data-theme="light"] nav.sidebar ul li { color: #ffffff; } :root[data-theme="light"] nav.sidebar ul li a.expandable { color: #ffffff; } :root[data-theme="light"] nav.sidebar ul li.active { background: #2b2b2b; } :root[data-theme="light"] nav.sidebar ul li.active a.expandable { color: #ffffff; } /* The dark logo is correct on a white page; the white one vanishes. */ :root[data-theme="light"] #logo, :root[data-theme="paper"] #logo { content: url("https://do6cqbycosiqx.cloudfront.net/img/MainLogo.png"); } /* =========================================================================== * PAPER — the soft light theme. * * The dark side of the picker has four points on a spectrum because pure black * was known to be too harsh: #000000 is offered, but #282828 is the default. * The light side had one point, and it was the light equivalent of pure black -- * #ffffff, the brightest a page can be. Paper is to Light what the default dark * is to High contrast: the same theme with the glare taken out. * * WARM, not a cooler grey. The clips are greyscale on black. A cool-grey page * sits in the same neutral family as the imaging and competes with it; a warm * page pushes the greyscale to read as neutral by contrast. It is also the * difference between "a dimmed screen" and "paper", which is the point. * * The accent deepens to #08628f: #0b74b5 was tuned against white and drops * below AA on a tinted page. Every ink here clears 4.5 against all four * surfaces -- page, card, stripe and hover -- not just against the lightest. * =========================================================================== */ :root[data-theme="paper"] { --scs-bg: #f2efe7; --scs-surface: #fbf9f4; --scs-surface-raised:#ffffff; --scs-surface-hover: #ece8de; --scs-surface-stripe:#f6f3ea; --scs-text: #2f2a22; /* warm near-black, 12.4 on the page */ --scs-text-secondary:#554f44; /* 7.1 */ --scs-text-muted: #6e6558; /* 4.99 on the page, 4.68 on a hovered row */ --scs-border: #ddd6c6; --scs-border-strong: #a99f8b; --scs-accent: #08628f; --scs-accent-hover: #064e73; /* Dark accent, so white -- 6.66. */ --scs-text-on-accent:#ffffff; --scs-accent-muted: rgba(8, 98, 143, 0.10); --scs-danger: #a8140d; /* the light theme's #bb0600 warmed slightly */ --scs-purple: #5f4788; --scs-table-head-bg: #3b352b; /* the legacy dark head, in this theme's black */ --scs-table-head-text: #f7f4ec; /* Not --scs-accent (#08628f): that is 1.82 on this head. 6.34. */ --scs-table-head-accent: #7fc4e8; color-scheme: light; } /* Light keeps the legacy blue rail because that IS the legacy look. Paper has no legacy to keep, so the rail is this theme's own dark -- which is also what stops a warm page from being a single flat field. */ :root[data-theme="paper"] nav.sidebar { background: #3b352b; border-right: 0; } :root[data-theme="paper"] nav.sidebar ul li { color: #f7f4ec; } :root[data-theme="paper"] nav.sidebar ul li a.expandable { color: #f7f4ec; } :root[data-theme="paper"] nav.sidebar ul li.active { background: #08628f; } :root[data-theme="paper"] nav.sidebar ul li.active a.expandable { color: #ffffff; } /* =========================================================================== * HIGH CONTRAST — for difficult viewing conditions. * * Reading ultrasound on a laptop in a bright bay is a real situation, and the * softened greys that suit a dim room stop working there. * * #ffffff text on #000000 21.0 * #7fd4ff accent on #000000 12.0 * =========================================================================== */ :root[data-theme="contrast"] { --scs-bg: #000000; --scs-surface: #0d0d0d; --scs-surface-raised:#1a1a1a; --scs-surface-hover: #262626; --scs-surface-stripe:#0a0a0a; --scs-text: #ffffff; --scs-text-secondary:#e0e0e0; --scs-text-muted: #b8b8b8; --scs-border: #5a5a5a; /* stronger: borders carry structure here */ --scs-border-strong: #8a8a8a; --scs-accent: #7fd4ff; --scs-accent-hover: #a8e2ff; --scs-accent-muted: rgba(127, 212, 255, 0.22); --scs-danger: #ff8078; --scs-table-head-bg: #1a1a1a; --scs-table-head-text: #ffffff; color-scheme: dark; } :root[data-theme="contrast"] nav.sidebar { background: #000000; border-right: 1px solid #5a5a5a; } /* ---------------------------------------------------------- theme switcher */ #theme-toggle { cursor: pointer; } /* Keyed on the FAMILY, not on one id: with Paper added, testing for [data-theme="light"] alone showed the wrong icon on a light page. !important because the rail gives every icon `display: flex` from a selector carrying three classes and four elements, which outranks these two classes -- so both the moon AND the sun rendered, side by side, in the light themes. "Do not render this icon" is not a rule another rule should be able to win against on specificity, which is exactly what !important is for. */ :root[data-theme="light"] .theme-icon-dark, :root[data-theme="paper"] .theme-icon-dark { display: none !important; } :root:not([data-theme="light"]):not([data-theme="paper"]) .theme-icon-light { display: none !important; }