pastilhasandClaude Opus 5
6e805c3607
two marks, same 1062x220 crop: white "Off" for a dark background, dark "Off" for a light one, yellow "icer" untouched in both. the dark variant is the light one with only its DESATURATED pixels inverted, so the yellow is bit-identical and the alpha and dimensions never move. CLASSIFIED BY LUMINANCE, not by the mode comment. only 22 of the 227 theme files declare one, and the cost of guessing wrong is a white wordmark on a white bar — so each theme's own `--background` is read and thresholded. 203 dark, 24 light. the signed-out screen is deliberately untouched and still uses the inline SVG. AND THE BUG THIS UNCOVERED, which was not about logos at all. `useThemeAsset` read the computed style inside an effect, and react runs CHILD effects before parent ones — every consumer is a descendant of `ThemeProvider`, which sets `data-theme` in ITS effect. so the read always saw the PREVIOUS theme's value: switch themes and the logo was one theme behind, switch again and behind again. it reads as a race and is deterministic, which is why it reproduced every time somebody watched for it. the read moved into requestAnimationFrame — past every effect in that commit and past style recalculation — plus a MutationObserver on data-theme/class for the case a frame cannot cover: a theme installed at runtime arrives as a <link> that loads whenever it loads. the wallpaper uses the same hook for `--page-bg-src` and had the same lag. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043
98 lines
3.1 KiB
CSS
98 lines
3.1 KiB
CSS
/*
|
|
Ayu Mirage — ported from a community Omarchy theme, not from basecamp/omarchy's own set.
|
|
|
|
Dark theme (dark), by luminance of its own background — the source repo carries no mode flag of its own to read.
|
|
|
|
Source: https://github.com/fdidron/omarchy-ayu-mirage-theme (alacritty.toml), read by scripts/port-community-themes.ts. Values
|
|
went through deriveOmarchyPalette (scripts/themes/from-ansi.ts) because the source has no Omarchy 4
|
|
colors.toml — some tokens here are reconstructed, not authored. Every text/surface pair is contrast-checked the same way the official themes are.
|
|
|
|
DO NOT EDIT BY HAND. Re-run the script to refresh from the source repo.
|
|
*/
|
|
[data-theme='ayu-mirage'] {
|
|
--background: #11141a;
|
|
--foreground: #cccac2;
|
|
--card: #1f2430;
|
|
--card-foreground: #cccac2;
|
|
--popover: #1f2430;
|
|
--popover-foreground: #cccac2;
|
|
--muted: #2f333e;
|
|
--muted-foreground: #9b9b99;
|
|
--accent: #2f333e;
|
|
--accent-foreground: #cccac2;
|
|
--primary: #95e6cb;
|
|
--primary-foreground: #11141a;
|
|
--secondary: #2f333e;
|
|
--secondary-foreground: #cccac2;
|
|
--cta: #95e6cb;
|
|
--cta-foreground: #11141a;
|
|
--ctahover: #a2e9d1;
|
|
--success: #87d96c;
|
|
--success-foreground: #11141a;
|
|
--warning: #facc6e;
|
|
--warning-foreground: #11141a;
|
|
--destructive: #ed8274;
|
|
--destructive-foreground: #11141a;
|
|
--info: #6dcbfa;
|
|
--info-foreground: #11141a;
|
|
--busy: #f4a771;
|
|
--busy-foreground: #11141a;
|
|
--busy-ink: #f4a771;
|
|
--border: #41444d;
|
|
--input: #41444d;
|
|
--ring: #95e6cb;
|
|
--radius: 0.625rem;
|
|
--chart-primary: #95e6cb;
|
|
--chart-secondary: #dabafa;
|
|
--status-success: #87d96c;
|
|
--status-warning: #facc6e;
|
|
--status-in-progress: #6dcbfa;
|
|
--page-bg: #11141a;
|
|
--page-bg-src: '';
|
|
--panel-bg: rgb(31 36 48 / 0.72);
|
|
--panel-border: rgb(65 68 77 / 0.9);
|
|
--panel-border-bare: rgb(65 68 77 / 0.55);
|
|
--panel-raised-bg: rgb(31 36 48 / 0.95);
|
|
--panel-raised-border: rgb(65 68 77 / 1);
|
|
--panel-accent: #95e6cb;
|
|
--panel-header-bg: rgb(47 51 62 / 0.6);
|
|
--panel-header-fg: #cccac2;
|
|
--panel-radius: 0.75rem;
|
|
--panel-blur: 12px;
|
|
--card-bg: #1f2430;
|
|
--glass-bg: rgb(31 36 48 / 0.55);
|
|
--glass-border: rgb(65 68 77 / 0.7);
|
|
--dock-bg: rgb(31 36 48 / 0.7);
|
|
--dock-border: rgb(65 68 77 / 0.8);
|
|
--dock-tooltip-bg: #2f333e;
|
|
--header-bg: rgb(31 36 48 / 0.8);
|
|
--header-border: rgb(65 68 77 / 0.9);
|
|
--header-fg: #cccac2;
|
|
--header-blur: 12px;
|
|
--pixel-grid-color: rgb(109 111 114 / 0.07);
|
|
--card-grid-color: rgb(109 111 114 / 0.05);
|
|
--panel-grid-color: rgb(109 111 114 / 0.06);
|
|
--scrollbar-thumb: rgb(104 104 104 / 0.6);
|
|
--scrollbar-thumb-hover: rgb(104 104 104 / 0.85);
|
|
--scrollbar-thin-thumb: rgb(104 104 104 / 0.45);
|
|
--scrollbar-thin-thumb-hover: rgb(104 104 104 / 0.7);
|
|
--brand: #95e6cb;
|
|
--brand-foreground: #11141a;
|
|
--brand-primary: #95e6cb;
|
|
--brand-accent: #90e1c6;
|
|
--brand-warm: #f4a771;
|
|
--brand-deep: #11141a;
|
|
--brand-muted: #686868;
|
|
--ink: #cccac2;
|
|
--surface-warm: #1f2430;
|
|
--naturegreen: #87d96c;
|
|
--naturegreen-foreground: #11141a;
|
|
--duck-dark: #cccac2;
|
|
--duck-teal: #90e1c6;
|
|
--duck-yellow: #facc6e;
|
|
--duck-orange: #f4a771;
|
|
--duck-forest: #87d96c;
|
|
--duck-beige: #30353f;
|
|
--logo-src: '/officer-wordmark.png';
|
|
}
|