1/**
 2 * To create a new theme duplicate this file and move into templates
 3 **/
 4
 5import chroma from "chroma-js";
 6import { colorRamp, createColorScheme } from "./common/ramps";
 7
 8/**
 9 * Theme Name
10 *
11 * What the theme will be called in the UI
12 * Also used to generate filenames, etc
13 **/
14
15const name = "themeName";
16
17/**
18 * Theme Colors
19 *
20 * Zed themes are based on [base16](https://github.com/chriskempson/base16)
21 * The first 8 colors ("Neutrals") are used to construct the UI background, panels, etc.
22 * The latter 8 colors ("Accents") are used for syntax themes, semantic colors, and UI states.
23 **/
24
25/**
26 * Color Ramps
27 *
28 * We use (chroma-js)[https://gka.github.io/chroma.js/] to minipulate color in themes and to build color ramps.
29 *
30 * You can use chroma-js operations on the ramps here.
31 * For example, you could use chroma.scale(...).correctLightness if your color ramps seem washed out near the ends.
32 **/
33
34// TODO: Express accents without refering to them directly by color name.
35// See common/base16.ts for where color tokens are used.
36
37const ramps = {
38  neutral: chroma.scale([
39    "#19171c", // Dark: darkest backgrounds, inputs | Light: Lightest text, active states
40    "#26232a",
41    "#585260",
42    "#655f6d",
43    "#7e7887",
44    "#8b8792",
45    "#e2dfe7",
46    "#efecf4", // Light: darkest backgrounds, inputs | Dark: Lightest text, active states
47  ]),
48  red: colorRamp(chroma("#be4678")), // Errors
49  orange: colorRamp(chroma("#aa573c")),
50  yellow: colorRamp(chroma("#a06e3b")), // Warnings
51  green: colorRamp(chroma("#2a9292")), // Positive
52  cyan: colorRamp(chroma("#398bc6")), // Player 1 (Host)
53  blue: colorRamp(chroma("#576ddb")), // Info
54  violet: colorRamp(chroma("#955ae7")),
55  magenta: colorRamp(chroma("#bf40bf")),
56};
57
58/**
59 * Color Scheme Variants
60 *
61 * Currently we only support (and require) dark and light themes
62 * Eventually you will be able to have only a light or dark theme,
63 * and define other variants here.
64 *
65 * createColorScheme([name], [isLight], [arrayOfRamps])
66 **/
67
68export const dark = createColorScheme(`${name}-dark`, false, ramps);
69export const light = createColorScheme(`${name}-light`, true, ramps);