70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
/**
|
|
* To create a new theme duplicate this file and move into templates
|
|
**/
|
|
|
|
import chroma from "chroma-js";
|
|
import { colorRamp, createColorScheme } from "./common/ramps";
|
|
|
|
/**
|
|
* Theme Name
|
|
*
|
|
* What the theme will be called in the UI
|
|
* Also used to generate filenames, etc
|
|
**/
|
|
|
|
const name = "themeName";
|
|
|
|
/**
|
|
* Theme Colors
|
|
*
|
|
* Zed themes are based on [base16](https://github.com/chriskempson/base16)
|
|
* The first 8 colors ("Neutrals") are used to construct the UI background, panels, etc.
|
|
* The latter 8 colors ("Accents") are used for syntax themes, semantic colors, and UI states.
|
|
**/
|
|
|
|
/**
|
|
* Color Ramps
|
|
*
|
|
* We use (chroma-js)[https://gka.github.io/chroma.js/] to minipulate color in themes and to build color ramps.
|
|
*
|
|
* You can use chroma-js operations on the ramps here.
|
|
* For example, you could use chroma.scale(...).correctLightness if your color ramps seem washed out near the ends.
|
|
**/
|
|
|
|
// TODO: Express accents without refering to them directly by color name.
|
|
// See common/base16.ts for where color tokens are used.
|
|
|
|
const ramps = {
|
|
neutral: chroma.scale([
|
|
"#19171c", // Dark: darkest backgrounds, inputs | Light: Lightest text, active states
|
|
"#26232a",
|
|
"#585260",
|
|
"#655f6d",
|
|
"#7e7887",
|
|
"#8b8792",
|
|
"#e2dfe7",
|
|
"#efecf4", // Light: darkest backgrounds, inputs | Dark: Lightest text, active states
|
|
]),
|
|
red: colorRamp(chroma("#be4678")), // Errors
|
|
orange: colorRamp(chroma("#aa573c")),
|
|
yellow: colorRamp(chroma("#a06e3b")), // Warnings
|
|
green: colorRamp(chroma("#2a9292")), // Positive
|
|
cyan: colorRamp(chroma("#398bc6")), // Player 1 (Host)
|
|
blue: colorRamp(chroma("#576ddb")), // Info
|
|
violet: colorRamp(chroma("#955ae7")),
|
|
magenta: colorRamp(chroma("#bf40bf")),
|
|
};
|
|
|
|
/**
|
|
* Color Scheme Variants
|
|
*
|
|
* Currently we only support (and require) dark and light themes
|
|
* Eventually you will be able to have only a light or dark theme,
|
|
* and define other variants here.
|
|
*
|
|
* createColorScheme([name], [isLight], [arrayOfRamps])
|
|
**/
|
|
|
|
export const dark = createColorScheme(`${name}-dark`, false, ramps);
|
|
export const light = createColorScheme(`${name}-light`, true, ramps);
|