| 1 | // Terminal + sidebar palettes. |
| 2 | // |
| 3 | // One source of truth. `ui` becomes CSS custom properties on :root, `xterm` |
| 4 | // goes to term.options.theme — so the chrome and the terminal can never drift |
| 5 | // apart, which is the usual failure mode when a theme is half in CSS and half |
| 6 | // in JS. |
| 7 | // |
| 8 | // Pure data plus one function, so `node --test` can check the palettes are |
| 9 | // complete and actually readable. |
| 10 | |
| 11 | const THEMES = { |
| 12 | dark: { |
| 13 | name: "dark", |
| 14 | colorScheme: "dark", |
| 15 | ui: { |
| 16 | "--bg": "#14161a", |
| 17 | "--bg-panel": "#1c1f25", |
| 18 | "--bg-input": "#14161a", |
| 19 | "--border": "#2d3138", |
| 20 | "--fg": "#d7dae0", |
| 21 | "--fg-muted": "#8b93a1", |
| 22 | "--accent": "#3b6ea5", |
| 23 | "--accent-hover": "#4a82bd", |
| 24 | "--accent-fg": "#ffffff", |
| 25 | "--ok": "#6ec177", |
| 26 | "--err": "#e06c75", |
| 27 | "--warn": "#d5a458", |
| 28 | "--warn-bg": "#241f16", |
| 29 | "--warn-border": "#4a3a22", |
| 30 | "--shadow": "rgba(0,0,0,.4)", |
| 31 | }, |
| 32 | xterm: { |
| 33 | background: "#14161a", |
| 34 | foreground: "#d7dae0", |
| 35 | cursor: "#d7dae0", |
| 36 | cursorAccent: "#14161a", |
| 37 | selectionBackground: "#3b6ea5", |
| 38 | selectionForeground: "#ffffff", |
| 39 | black: "#2d3138", |
| 40 | red: "#e06c75", |
| 41 | green: "#6ec177", |
| 42 | yellow: "#d5a458", |
| 43 | blue: "#61afef", |
| 44 | magenta: "#c678dd", |
| 45 | cyan: "#56b6c2", |
| 46 | white: "#d7dae0", |
| 47 | brightBlack: "#6b7280", |
| 48 | brightRed: "#ff7b86", |
| 49 | brightGreen: "#86d98f", |
| 50 | brightYellow: "#e8c07d", |
| 51 | brightBlue: "#7fb3e8", |
| 52 | brightMagenta: "#d7a3e8", |
| 53 | brightCyan: "#6fd0dd", |
| 54 | brightWhite: "#ffffff", |
| 55 | }, |
| 56 | }, |
| 57 | |
| 58 | light: { |
| 59 | name: "light", |
| 60 | colorScheme: "light", |
| 61 | ui: { |
| 62 | "--bg": "#ffffff", |
| 63 | "--bg-panel": "#f6f8fa", |
| 64 | "--bg-input": "#ffffff", |
| 65 | "--border": "#d0d7de", |
| 66 | "--fg": "#1f2328", |
| 67 | "--fg-muted": "#656d76", |
| 68 | "--accent": "#0969da", |
| 69 | "--accent-hover": "#0550ae", |
| 70 | "--accent-fg": "#ffffff", |
| 71 | "--ok": "#1a7f37", |
| 72 | "--err": "#cf222e", |
| 73 | "--warn": "#9a6700", |
| 74 | "--warn-bg": "#fff8c5", |
| 75 | "--warn-border": "#d4a72c", |
| 76 | "--shadow": "rgba(31,35,40,.15)", |
| 77 | }, |
| 78 | xterm: { |
| 79 | background: "#ffffff", |
| 80 | foreground: "#1f2328", |
| 81 | cursor: "#1f2328", |
| 82 | cursorAccent: "#ffffff", |
| 83 | selectionBackground: "#b6d7ff", |
| 84 | selectionForeground: "#1f2328", |
| 85 | // Deliberately the darker end of each hue: these sit on white, and the |
| 86 | // usual bright terminal colours are unreadable there. |
| 87 | black: "#1f2328", |
| 88 | red: "#cf222e", |
| 89 | green: "#116329", |
| 90 | yellow: "#7d4e00", |
| 91 | blue: "#0550ae", |
| 92 | magenta: "#8250df", |
| 93 | cyan: "#1b7c83", |
| 94 | white: "#6e7781", |
| 95 | brightBlack: "#57606a", |
| 96 | brightRed: "#a40e26", |
| 97 | brightGreen: "#1a7f37", |
| 98 | brightYellow: "#9a6700", |
| 99 | brightBlue: "#0969da", |
| 100 | brightMagenta: "#6639ba", |
| 101 | brightCyan: "#3192aa", |
| 102 | brightWhite: "#7f8894", |
| 103 | }, |
| 104 | }, |
| 105 | }; |
| 106 | |
| 107 | /** Preference values the UI offers, in cycle order. */ |
| 108 | const PREFERENCES = ["auto", "light", "dark"]; |
| 109 | |
| 110 | /** |
| 111 | * Resolve a stored preference to a concrete theme. |
| 112 | * `auto` follows the browser, which follows the OS. |
| 113 | * |
| 114 | * @param {string} preference one of PREFERENCES; anything else means `auto` |
| 115 | * @param {boolean} prefersDark what the browser says the OS wants |
| 116 | */ |
| 117 | function resolveTheme(preference, prefersDark) { |
| 118 | if (preference === "light") return THEMES.light; |
| 119 | if (preference === "dark") return THEMES.dark; |
| 120 | return prefersDark ? THEMES.dark : THEMES.light; |
| 121 | } |
| 122 | |
| 123 | const Themes = { THEMES, PREFERENCES, resolveTheme }; |
| 124 | |
| 125 | if (typeof module !== "undefined" && module.exports) { |
| 126 | module.exports = Themes; |
| 127 | } |