Created
August 26, 2026 13:18
-
-
Save airstrike/7fb7ea47f9bbd7de9e72edd16b4ffc19 to your computer and use it in GitHub Desktop.
elevato theme as CSS custom properties - warm paper, ink, lamp-green, mono. Light + dark, ported from elevato.rs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* elevato theme - warm paper, ink text, one lamp-green accent, all mono. | |
| * | |
| * Ported from the iced theme behind https://elevato.rs (theme.rs, same | |
| * tokens, same names). Dark by default when the system asks for it; | |
| * set data-theme="light" or "dark" on <html> to force one. | |
| * | |
| * Drop in, then use the tokens. The element rules at the bottom are a | |
| * starter kit - a body, a pane, a panel, three button tiers, a link - | |
| * delete what you don't need. | |
| * | |
| * MIT - Andy Terra | |
| */ | |
| :root, | |
| [data-theme="light"] { | |
| color-scheme: light; | |
| /* text */ | |
| --text-primary: #2b2a27; /* headlines and values */ | |
| --text-secondary: #6f6c64; /* labels and captions */ | |
| /* surfaces */ | |
| --background: #f2efe9; /* the world: canvas / page */ | |
| --panel: #e8e4da; /* toolbars, stat bars, banners - the shade behind panes */ | |
| --line: #cfcabd; /* hairline borders, floor baselines */ | |
| --surface: #dad4c6; /* a raised object (the elevator cab) */ | |
| --surface-strong: #bfb9a8; /* its header band */ | |
| --text-on-surface: #2b2a27; | |
| /* the lamp */ | |
| --accent: #2e8c5f; /* primary: lit indicators, keywords, the one filled button */ | |
| --accent-strong: #26764f; /* hover */ | |
| --accent-off: #bfbaab; /* an unlit indicator */ | |
| --highlight: #8a6d1f; /* a lit destination button - warm, not green */ | |
| --figure: #3f3d37; /* people */ | |
| /* outcomes */ | |
| --success: #2e7d43; | |
| --warning: #b08a2e; | |
| --failure: #c0473a; | |
| /* code */ | |
| --syntax-comment: #928d80; | |
| --syntax-string: #4e8d3e; | |
| --syntax-number: #a07617; | |
| --syntax-constant: #137e8a; | |
| --syntax-operator: #6f6c64; | |
| --syntax-keyword: #2e8c5f; | |
| --radius: 8px; | |
| --radius-small: 6px; | |
| --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root:not([data-theme="light"]) { | |
| color-scheme: dark; | |
| --text-primary: #ece7db; | |
| --text-secondary: #98948a; | |
| --background: #191816; | |
| --panel: #22211e; | |
| --line: #35332e; | |
| --surface: #3b3a36; | |
| --surface-strong: #2e2d2a; | |
| --text-on-surface: #f0ecdf; | |
| --accent: #50b481; | |
| --accent-strong: #6fd692; | |
| --accent-off: #413f3a; | |
| --highlight: #f2eecf; | |
| --figure: #d4cfc2; | |
| --success: #5fbf77; | |
| --warning: #d9c26a; | |
| --failure: #d95f4e; | |
| --syntax-comment: #8a867c; | |
| --syntax-string: #9ec978; | |
| --syntax-number: #c9a45c; | |
| --syntax-constant: #62c1c9; | |
| --syntax-operator: #aaa69b; | |
| --syntax-keyword: #50b481; | |
| } | |
| } | |
| [data-theme="dark"] { | |
| color-scheme: dark; | |
| --text-primary: #ece7db; | |
| --text-secondary: #98948a; | |
| --background: #191816; | |
| --panel: #22211e; | |
| --line: #35332e; | |
| --surface: #3b3a36; | |
| --surface-strong: #2e2d2a; | |
| --text-on-surface: #f0ecdf; | |
| --accent: #50b481; | |
| --accent-strong: #6fd692; | |
| --accent-off: #413f3a; | |
| --highlight: #f2eecf; | |
| --figure: #d4cfc2; | |
| --success: #5fbf77; | |
| --warning: #d9c26a; | |
| --failure: #d95f4e; | |
| --syntax-comment: #8a867c; | |
| --syntax-string: #9ec978; | |
| --syntax-number: #c9a45c; | |
| --syntax-constant: #62c1c9; | |
| --syntax-operator: #aaa69b; | |
| --syntax-keyword: #50b481; | |
| } | |
| /* ---- starter kit ---------------------------------------------------- */ | |
| /* The root sits on the panel shade so panes (in the background shade) | |
| * read as raised cards against it - same trick as the app. */ | |
| body { | |
| margin: 0; | |
| background: var(--panel); | |
| color: var(--text-primary); | |
| font-family: var(--mono); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| /* A workspace card. The editor and the world get the same surface. */ | |
| .pane { | |
| background: var(--background); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| } | |
| /* A toolbar or stats strip. */ | |
| .panel { | |
| background: var(--panel); | |
| } | |
| /* A strip that carries a script error. */ | |
| .panel.error { | |
| border: 1px solid var(--failure); | |
| border-radius: 4px; | |
| } | |
| .secondary { color: var(--text-secondary); } | |
| .success { color: var(--success); } | |
| .failure { color: var(--failure); } | |
| /* Buttons: one filled primary per surface, outline for secondary | |
| * actions, ghost for tertiary ones. */ | |
| .button { | |
| font: inherit; | |
| cursor: pointer; | |
| padding: 6px 12px; | |
| border-radius: var(--radius-small); | |
| border: 1px solid transparent; | |
| background: none; | |
| color: var(--text-primary); | |
| transition: background-color 0.12s, border-color 0.12s, color 0.12s; | |
| } | |
| .button.primary { | |
| background: var(--accent); | |
| color: var(--background); | |
| } | |
| .button.primary:hover { background: var(--accent-strong); } | |
| .button.outline { border-color: var(--line); } | |
| .button.outline:hover { background: var(--panel); border-color: var(--text-secondary); } | |
| .button.ghost { color: var(--text-secondary); } | |
| .button.ghost:hover { background: var(--panel); color: var(--text-primary); } | |
| .button:disabled { opacity: 0.4; cursor: default; } | |
| a, .link { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| a:hover, .link:hover { color: var(--accent-strong); } | |
| /* Editor selection, code tokens. */ | |
| ::selection { background: color-mix(in srgb, var(--surface) 35%, transparent); } | |
| code, pre { font-family: var(--mono); } | |
| .tok-comment { color: var(--syntax-comment); } | |
| .tok-string { color: var(--syntax-string); } | |
| .tok-number { color: var(--syntax-number); } | |
| .tok-constant { color: var(--syntax-constant); } | |
| .tok-operator { color: var(--syntax-operator); } | |
| .tok-keyword { color: var(--syntax-keyword); } | |
| /* Divider that warms to the accent while grabbed. */ | |
| .divider { background: var(--line); } | |
| .divider:hover, .divider.dragging { background: var(--accent); } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment