Detailed changes
@@ -7,10 +7,12 @@ export default themes;
const themesPath = path.resolve(`${__dirname}/themes`);
for (const fileName of fs.readdirSync(themesPath)) {
+ if (fileName == "template.ts") continue;
const filePath = path.join(themesPath, fileName);
+
if (fs.statSync(filePath).isFile()) {
const theme = require(filePath);
- themes.push(theme.dark);
- themes.push(theme.light);
+ if (theme.dark) themes.push(theme.dark);
+ if (theme.light) themes.push(theme.light);
}
}
@@ -4,7 +4,16 @@ import { colorRamp, createTheme } from "./common/base16";
const name = "cave";
const ramps = {
- neutral: chroma.scale(["#19171c", "#26232a", "#585260", "#655f6d", "#7e7887", "#8b8792", "#e2dfe7", "#efecf4"]),
+ neutral: chroma.scale([
+ "#19171c",
+ "#26232a",
+ "#585260",
+ "#655f6d",
+ "#7e7887",
+ "#8b8792",
+ "#e2dfe7",
+ "#efecf4",
+ ]),
red: colorRamp(chroma("#be4678")),
orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")),
@@ -13,7 +22,7 @@ const ramps = {
blue: colorRamp(chroma("#576ddb")),
violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")),
-}
+};
export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
+export const light = createTheme(`${name}-light`, true, ramps);
@@ -1,5 +1,4 @@
-import chroma from "chroma-js";
-import { Scale, Color } from "chroma-js";
+import chroma, { Color, Scale } from "chroma-js";
import { color, ColorToken, fontWeights, NumberToken } from "../../tokens";
import { withOpacity } from "../../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
@@ -8,12 +7,15 @@ export function colorRamp(color: Color): Scale {
let hue = color.hsl()[0];
let endColor = chroma.hsl(hue, 0.88, 0.96);
let startColor = chroma.hsl(hue, 0.68, 0.12);
- return chroma
- .scale([startColor, color, endColor])
- .mode("hsl");
+ return chroma.scale([startColor, color, endColor]).mode("hsl");
}
-export function createTheme(name: string, isLight: boolean, ramps: { [rampName: string]: Scale }, blend?: number): Theme {
+export function createTheme(
+ name: string,
+ isLight: boolean,
+ ramps: { [rampName: string]: Scale },
+ blend?: number
+): Theme {
if (isLight) {
for (var rampName in ramps) {
ramps[rampName] = ramps[rampName].domain([1, 0]);
@@ -62,22 +64,22 @@ export function createTheme(name: string, isLight: boolean, ramps: { [rampName:
},
ok: {
base: withOpacity(rampColor(ramps.green, 0.5), 0.15),
- hovered: withOpacity(rampColor(ramps.green, 0.5), 0.20),
+ hovered: withOpacity(rampColor(ramps.green, 0.5), 0.2),
active: withOpacity(rampColor(ramps.green, 0.5), 0.25),
},
error: {
base: withOpacity(rampColor(ramps.red, 0.5), 0.15),
- hovered: withOpacity(rampColor(ramps.red, 0.5), 0.20),
+ hovered: withOpacity(rampColor(ramps.red, 0.5), 0.2),
active: withOpacity(rampColor(ramps.red, 0.5), 0.25),
},
warning: {
base: withOpacity(rampColor(ramps.yellow, 0.5), 0.15),
- hovered: withOpacity(rampColor(ramps.yellow, 0.5), 0.20),
+ hovered: withOpacity(rampColor(ramps.yellow, 0.5), 0.2),
active: withOpacity(rampColor(ramps.yellow, 0.5), 0.25),
},
info: {
base: withOpacity(rampColor(ramps.blue, 0.5), 0.15),
- hovered: withOpacity(rampColor(ramps.blue, 0.5), 0.20),
+ hovered: withOpacity(rampColor(ramps.blue, 0.5), 0.2),
active: withOpacity(rampColor(ramps.blue, 0.5), 0.25),
},
};
@@ -242,4 +244,4 @@ export function createTheme(name: string, isLight: boolean, ramps: { [rampName:
player,
shadowAlpha,
};
-}
+}
@@ -4,8 +4,8 @@ import { withOpacity } from "../../utils/color";
export interface SyntaxHighlightStyle {
color: ColorToken;
weight?: FontWeightToken;
- underline?: boolean,
- italic?: boolean,
+ underline?: boolean;
+ italic?: boolean;
}
export interface Player {
@@ -25,7 +25,7 @@ export function buildPlayer(
cursorColor: withOpacity(color, cursorOpacity || 1.0),
selectionColor: withOpacity(color, selectionOpacity || 0.24),
borderColor: withOpacity(color, borderOpacity || 0.8),
- }
+ };
}
export interface BackgroundColorSet {
@@ -56,7 +56,7 @@ export interface Syntax {
linkText: SyntaxHighlightStyle;
[key: string]: SyntaxHighlightStyle;
-};
+}
export default interface Theme {
name: string;
@@ -86,8 +86,8 @@ export default interface Theme {
muted: ColorToken;
active: ColorToken;
/**
- * Used for rendering borders on top of media like avatars, images, video, etc.
- */
+ * Used for rendering borders on top of media like avatars, images, video, etc.
+ */
onMedia: ColorToken;
ok: ColorToken;
error: ColorToken;
@@ -141,7 +141,7 @@ export default interface Theme {
};
};
- syntax: Syntax,
+ syntax: Syntax;
player: {
1: Player;
@@ -4,7 +4,16 @@ import { colorRamp, createTheme } from "./common/base16";
const name = "solarized";
const ramps = {
- neutral: chroma.scale(["#002b36", "#073642", "#586e75", "#657b83", "#839496", "#93a1a1", "#eee8d5", "#fdf6e3"]),
+ neutral: chroma.scale([
+ "#002b36",
+ "#073642",
+ "#586e75",
+ "#657b83",
+ "#839496",
+ "#93a1a1",
+ "#eee8d5",
+ "#fdf6e3",
+ ]),
red: colorRamp(chroma("#dc322f")),
orange: colorRamp(chroma("#cb4b16")),
yellow: colorRamp(chroma("#b58900")),
@@ -13,7 +22,7 @@ const ramps = {
blue: colorRamp(chroma("#268bd2")),
violet: colorRamp(chroma("#6c71c4")),
magenta: colorRamp(chroma("#d33682")),
-}
+};
export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
+export const light = createTheme(`${name}-light`, true, ramps);
@@ -4,7 +4,16 @@ import { colorRamp, createTheme } from "./common/base16";
const name = "sulphurpool";
const ramps = {
- neutral: chroma.scale(["#202746", "#293256", "#5e6687", "#6b7394", "#898ea4", "#979db4", "#dfe2f1", "#f5f7ff"]),
+ neutral: chroma.scale([
+ "#202746",
+ "#293256",
+ "#5e6687",
+ "#6b7394",
+ "#898ea4",
+ "#979db4",
+ "#dfe2f1",
+ "#f5f7ff",
+ ]),
red: colorRamp(chroma("#c94922")),
orange: colorRamp(chroma("#c76b29")),
yellow: colorRamp(chroma("#c08b30")),
@@ -13,7 +22,7 @@ const ramps = {
blue: colorRamp(chroma("#3d8fd1")),
violet: colorRamp(chroma("#6679cc")),
magenta: colorRamp(chroma("#9c637a")),
-}
+};
export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
+export const light = createTheme(`${name}-light`, true, ramps);
@@ -0,0 +1,69 @@
+/**
+ * To create a new theme duplicate this file and move into templates
+ **/
+
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+/**
+ * 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")),
+};
+
+/**
+ * Theme 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.
+ *
+ * createTheme([name], [isLight], [arrayOfRamps])
+ **/
+
+export const dark = createTheme(`${name}-dark`, false, ramps);
+export const light = createTheme(`${name}-light`, true, ramps);