Skip to content

Commit d3208da

Browse files
pomberpomber
committed
Add tabs colors
1 parent a81112e commit d3208da

File tree

6 files changed

+196
-48
lines changed

6 files changed

+196
-48
lines changed

‎.changeset/kind-ties-serve.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@code-hike/lighter": patch
3+
---
4+
5+
Add tabs colors

‎lib/dist/index.cjs.js

+63-16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/dist/index.esm.mjs

+63-16
Original file line numberDiff line numberDiff line change
@@ -2617,6 +2617,7 @@ function loadGrammarByScope(scope) {
26172617
let promise;
26182618
if (shoudUseFileSystem) {
26192619
try {
2620+
// TODO this is not failing here, because it's async
26202621
promise = loadGrammarFromFile(lang);
26212622
} catch (e) {
26222623
shoudUseFileSystem = false;
@@ -2699,28 +2700,74 @@ function toTokens(code, lang, theme) {
26992700
}
27002701

27012702
function getThemeColors(theme) {
2702-
const colors = theme.colors || {};
27032703
return {
27042704
background: theme.bg,
27052705
foreground: theme.fg,
27062706
colorScheme: getColorScheme(theme),
2707-
lineNumberForeground:
2708-
colors["editorLineNumber.foreground"] ||
2709-
getDefault(theme, {
2710-
dark: "#858585",
2711-
light: "#237893",
2712-
hc: "#fffffe",
2713-
}),
2714-
selectionBackground:
2715-
colors["editor.selectionBackground"] ||
2716-
getDefault(theme, {
2717-
light: "#ADD6FF",
2718-
dark: "#264F78",
2719-
hc: "#f3f518",
2720-
}),
2707+
lineNumberForeground: getColor(theme, "editorLineNumber.foreground"),
2708+
selectionBackground: getColor(theme, "editor.selectionBackground"),
2709+
editorBackground: getColor(theme, "editor.background"),
2710+
editorGroupHeaderBackground: getColor(
2711+
theme,
2712+
"editorGroupHeader.tabsBackground"
2713+
),
2714+
activeTabBackground: getColor(theme, "tab.activeBackground"),
2715+
activeTabForeground: getColor(theme, "tab.activeForeground"),
2716+
tabBorder: getColor(theme, "tab.border"),
2717+
activeTabBorder: getColor(theme, "tab.activeBorder"),
27212718
};
27222719
}
27232720

2721+
function getColor(theme, name) {
2722+
const colors = theme.colors || {};
2723+
if (colors[name]) {
2724+
return colors[name];
2725+
}
2726+
2727+
const defaultColors = defaults[name];
2728+
if (typeof defaultColors === "string") {
2729+
return getColor(theme, defaultColors);
2730+
}
2731+
2732+
return getDefault(theme, defaultColors);
2733+
}
2734+
2735+
const contrastBorder = "#6FC3DF";
2736+
const defaults = {
2737+
"editorLineNumber.foreground": {
2738+
dark: "#858585",
2739+
light: "#237893",
2740+
hc: "#fffffe",
2741+
},
2742+
"editor.selectionBackground": {
2743+
light: "#ADD6FF",
2744+
dark: "#264F78",
2745+
hc: "#f3f518",
2746+
},
2747+
"editor.background": {
2748+
light: "#fffffe",
2749+
dark: "#1E1E1E",
2750+
hc: "#000000",
2751+
},
2752+
"editorGroupHeader.tabsBackground": {
2753+
dark: "#252526",
2754+
light: "#F3F3F3",
2755+
hc: undefined,
2756+
},
2757+
"tab.activeBackground": "editor.background",
2758+
"tab.activeForeground": {
2759+
dark: "#ffffff",
2760+
light: "#333333",
2761+
hc: "#ffffff",
2762+
},
2763+
"tab.border": {
2764+
dark: "#252526",
2765+
light: "#F3F3F3",
2766+
hc: contrastBorder,
2767+
},
2768+
"tab.activeBorder": "tab.activeBackground",
2769+
};
2770+
27242771
function getColorScheme(theme) {
27252772
const themeType = getThemeType(theme);
27262773
if (themeType === "dark") {
@@ -2743,7 +2790,7 @@ function getDefault(theme, defaults) {
27432790
}
27442791

27452792
function fixTheme(rawTheme) {
2746-
const type = rawTheme.type || "dark";
2793+
const type = getColorScheme(rawTheme);
27472794

27482795
const shikiTheme = {
27492796
name: rawTheme.name,

‎lib/src/grammars.js

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export function loadGrammarByScope(scope) {
1818
let promise;
1919
if (shoudUseFileSystem) {
2020
try {
21+
// TODO this is not failing here, because it's async
2122
promise = loadGrammarFromFile(lang);
2223
} catch (e) {
2324
shoudUseFileSystem = false;

‎lib/src/theme-colors.js

+61-15
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,72 @@
11
export function getThemeColors(theme) {
2-
const colors = theme.colors || {};
32
return {
43
background: theme.bg,
54
foreground: theme.fg,
65
colorScheme: getColorScheme(theme),
7-
lineNumberForeground:
8-
colors["editorLineNumber.foreground"] ||
9-
getDefault(theme, {
10-
dark: "#858585",
11-
light: "#237893",
12-
hc: "#fffffe",
13-
}),
14-
selectionBackground:
15-
colors["editor.selectionBackground"] ||
16-
getDefault(theme, {
17-
light: "#ADD6FF",
18-
dark: "#264F78",
19-
hc: "#f3f518",
20-
}),
6+
lineNumberForeground: getColor(theme, "editorLineNumber.foreground"),
7+
selectionBackground: getColor(theme, "editor.selectionBackground"),
8+
editorBackground: getColor(theme, "editor.background"),
9+
editorGroupHeaderBackground: getColor(
10+
theme,
11+
"editorGroupHeader.tabsBackground"
12+
),
13+
activeTabBackground: getColor(theme, "tab.activeBackground"),
14+
activeTabForeground: getColor(theme, "tab.activeForeground"),
15+
tabBorder: getColor(theme, "tab.border"),
16+
activeTabBorder: getColor(theme, "tab.activeBorder"),
2117
};
2218
}
2319

20+
function getColor(theme, name) {
21+
const colors = theme.colors || {};
22+
if (colors[name]) {
23+
return colors[name];
24+
}
25+
26+
const defaultColors = defaults[name];
27+
if (typeof defaultColors === "string") {
28+
return getColor(theme, defaultColors);
29+
}
30+
31+
return getDefault(theme, defaultColors);
32+
}
33+
34+
const contrastBorder = "#6FC3DF";
35+
const defaults = {
36+
"editorLineNumber.foreground": {
37+
dark: "#858585",
38+
light: "#237893",
39+
hc: "#fffffe",
40+
},
41+
"editor.selectionBackground": {
42+
light: "#ADD6FF",
43+
dark: "#264F78",
44+
hc: "#f3f518",
45+
},
46+
"editor.background": {
47+
light: "#fffffe",
48+
dark: "#1E1E1E",
49+
hc: "#000000",
50+
},
51+
"editorGroupHeader.tabsBackground": {
52+
dark: "#252526",
53+
light: "#F3F3F3",
54+
hc: undefined,
55+
},
56+
"tab.activeBackground": "editor.background",
57+
"tab.activeForeground": {
58+
dark: "#ffffff",
59+
light: "#333333",
60+
hc: "#ffffff",
61+
},
62+
"tab.border": {
63+
dark: "#252526",
64+
light: "#F3F3F3",
65+
hc: contrastBorder,
66+
},
67+
"tab.activeBorder": "tab.activeBackground",
68+
};
69+
2470
export function getColorScheme(theme) {
2571
const themeType = getThemeType(theme);
2672
if (themeType === "dark") {

‎lib/src/themes.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { getColorScheme } from "./theme-colors";
2+
13
export function fixTheme(rawTheme) {
2-
const type = rawTheme.type || "dark";
4+
const type = getColorScheme(rawTheme);
35

46
const shikiTheme = {
57
name: rawTheme.name,

0 commit comments

Comments
 (0)