mirror of
https://github.com/zed-industries/zed.git
synced 2024-11-08 05:12:06 +03:00
Add multiple Zed themes
Add the following themes: - Andromeda - Brushtree Light & Dark - Rose-pine - Rose-pine-dawn - Sandcastle dark - Summercamp dark - Summerfruit
This commit is contained in:
parent
1bf5f361d3
commit
b61153266b
27
styles/src/themes/andromeda.ts
Normal file
27
styles/src/themes/andromeda.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import chroma from "chroma-js";
|
||||
import { colorRamp, createTheme } from "./common/base16";
|
||||
|
||||
const name = "andromeda";
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma.scale([
|
||||
"#1E2025",
|
||||
"#23262E",
|
||||
"#292E38",
|
||||
"#2E323C",
|
||||
"#ACA8AE",
|
||||
"#CBC9CF",
|
||||
"#E1DDE4",
|
||||
"#F7F7F8",
|
||||
]),
|
||||
red: colorRamp(chroma("#F92672")),
|
||||
orange: colorRamp(chroma("#F39C12")),
|
||||
yellow: colorRamp(chroma("#FFE66D")),
|
||||
green: colorRamp(chroma("#96E072")),
|
||||
cyan: colorRamp(chroma("#00E8C6")),
|
||||
blue: colorRamp(chroma("#0CA793")),
|
||||
violet: colorRamp(chroma("#8A3FA6")),
|
||||
magenta: colorRamp(chroma("#C74DED")),
|
||||
};
|
||||
|
||||
export const dark = createTheme(`${name}`, false, ramps);
|
28
styles/src/themes/brushtrees.ts
Normal file
28
styles/src/themes/brushtrees.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import chroma from "chroma-js";
|
||||
import { colorRamp, createTheme } from "./common/base16";
|
||||
|
||||
const name = "brush-tree";
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma.scale([
|
||||
"#485867",
|
||||
"#5A6D7A",
|
||||
"#6D828E",
|
||||
"#8299A1",
|
||||
"#98AFB5",
|
||||
"#B0C5C8",
|
||||
"#C9DBDC",
|
||||
"#E3EFEF",
|
||||
]),
|
||||
red: colorRamp(chroma("#b38686")),
|
||||
orange: colorRamp(chroma("#d8bba2")),
|
||||
yellow: colorRamp(chroma("#aab386")),
|
||||
green: colorRamp(chroma("#87b386")),
|
||||
cyan: colorRamp(chroma("#86b3b3")),
|
||||
blue: colorRamp(chroma("#868cb3")),
|
||||
violet: colorRamp(chroma("#b386b2")),
|
||||
magenta: colorRamp(chroma("#b39f9f")),
|
||||
};
|
||||
|
||||
export const dark = createTheme(`${name}-dark`, false, ramps);
|
||||
export const light = createTheme(`${name}-light`, true, ramps);
|
27
styles/src/themes/rose-pine-dawn.ts
Normal file
27
styles/src/themes/rose-pine-dawn.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import chroma from "chroma-js";
|
||||
import { colorRamp, createTheme } from "./common/base16";
|
||||
|
||||
const name = "rosé-pine-dawn";
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma.scale([
|
||||
"#26233a",
|
||||
"#555169",
|
||||
"#575279",
|
||||
"#6e6a86",
|
||||
"#9893a5",
|
||||
"#f2e9de",
|
||||
"#fffaf3",
|
||||
"#faf4ed",
|
||||
]),
|
||||
red: colorRamp(chroma("#1f1d2e")),
|
||||
orange: colorRamp(chroma("#b4637a")),
|
||||
yellow: colorRamp(chroma("#ea9d34")),
|
||||
green: colorRamp(chroma("#d7827e")),
|
||||
cyan: colorRamp(chroma("#286983")),
|
||||
blue: colorRamp(chroma("#56949f")),
|
||||
violet: colorRamp(chroma("#907aa9")),
|
||||
magenta: colorRamp(chroma("#c5c3ce")),
|
||||
};
|
||||
|
||||
export const light = createTheme(`${name}`, true, ramps);
|
27
styles/src/themes/rose-pine.ts
Normal file
27
styles/src/themes/rose-pine.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import chroma from "chroma-js";
|
||||
import { colorRamp, createTheme } from "./common/base16";
|
||||
|
||||
const name = "rosé-pine";
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma.scale([
|
||||
"#191724",
|
||||
"#1f1d2e",
|
||||
"#26233a",
|
||||
"#555169",
|
||||
"#6e6a86",
|
||||
"#e0def4",
|
||||
"#f0f0f3",
|
||||
"#c5c3ce",
|
||||
]),
|
||||
red: colorRamp(chroma("#e2e1e7")),
|
||||
orange: colorRamp(chroma("#eb6f92")),
|
||||
yellow: colorRamp(chroma("#f6c177")),
|
||||
green: colorRamp(chroma("#ebbcba")),
|
||||
cyan: colorRamp(chroma("#31748f")),
|
||||
blue: colorRamp(chroma("#0CA793")),
|
||||
violet: colorRamp(chroma("#8A3FA6")),
|
||||
magenta: colorRamp(chroma("#C74DED")),
|
||||
};
|
||||
|
||||
export const dark = createTheme(`${name}`, false, ramps);
|
27
styles/src/themes/sandcastle.ts
Normal file
27
styles/src/themes/sandcastle.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import chroma from "chroma-js";
|
||||
import { colorRamp, createTheme } from "./common/base16";
|
||||
|
||||
const name = "sandcastle";
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma.scale([
|
||||
"#282c34",
|
||||
"#2c323b",
|
||||
"#3e4451",
|
||||
"#665c54",
|
||||
"#928374",
|
||||
"#a89984",
|
||||
"#d5c4a1",
|
||||
"#fdf4c1",
|
||||
]),
|
||||
red: colorRamp(chroma("#83a598")),
|
||||
orange: colorRamp(chroma("#a07e3b")),
|
||||
yellow: colorRamp(chroma("#a07e3b")),
|
||||
green: colorRamp(chroma("#528b8b")),
|
||||
cyan: colorRamp(chroma("#83a598")),
|
||||
blue: colorRamp(chroma("#83a598")),
|
||||
violet: colorRamp(chroma("#d75f5f")),
|
||||
magenta: colorRamp(chroma("#a87322")),
|
||||
};
|
||||
|
||||
export const dark = createTheme(`${name}`, false, ramps);
|
27
styles/src/themes/summercamp.ts
Normal file
27
styles/src/themes/summercamp.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import chroma from "chroma-js";
|
||||
import { colorRamp, createTheme } from "./common/base16";
|
||||
|
||||
const name = "summercamp";
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma.scale([
|
||||
"#1c1810",
|
||||
"#2a261c",
|
||||
"#3a3527",
|
||||
"#3a3527",
|
||||
"#5f5b45",
|
||||
"#736e55",
|
||||
"#bab696",
|
||||
"#f8f5de",
|
||||
]),
|
||||
red: colorRamp(chroma("#e35142")),
|
||||
orange: colorRamp(chroma("#fba11b")),
|
||||
yellow: colorRamp(chroma("#f2ff27")),
|
||||
green: colorRamp(chroma("#5ceb5a")),
|
||||
cyan: colorRamp(chroma("#5aebbc")),
|
||||
blue: colorRamp(chroma("#489bf0")),
|
||||
violet: colorRamp(chroma("#FF8080")),
|
||||
magenta: colorRamp(chroma("#F69BE7")),
|
||||
};
|
||||
|
||||
export const dark = createTheme(`${name}`, false, ramps);
|
28
styles/src/themes/summerfruit.ts
Normal file
28
styles/src/themes/summerfruit.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import chroma from "chroma-js";
|
||||
import { colorRamp, createTheme } from "./common/base16";
|
||||
|
||||
const name = "summerfruit";
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma.scale([
|
||||
"#151515",
|
||||
"#202020",
|
||||
"#303030",
|
||||
"#505050",
|
||||
"#B0B0B0",
|
||||
"#D0D0D0",
|
||||
"#E0E0E0",
|
||||
"#FFFFFF",
|
||||
]),
|
||||
red: colorRamp(chroma("#FF0086")),
|
||||
orange: colorRamp(chroma("#FD8900")),
|
||||
yellow: colorRamp(chroma("#ABA800")),
|
||||
green: colorRamp(chroma("#00C918")),
|
||||
cyan: colorRamp(chroma("#1FAAAA")),
|
||||
blue: colorRamp(chroma("#3777E6")),
|
||||
violet: colorRamp(chroma("#AD00A1")),
|
||||
magenta: colorRamp(chroma("#CC6633")),
|
||||
};
|
||||
|
||||
export const dark = createTheme(`${name}-dark`, false, ramps);
|
||||
export const light = createTheme(`${name}-light`, true, ramps);
|
Loading…
Reference in New Issue
Block a user