diff --git a/.changeset/purple-years-scream.md b/.changeset/purple-years-scream.md
new file mode 100644
index 0000000..97371f5
--- /dev/null
+++ b/.changeset/purple-years-scream.md
@@ -0,0 +1,5 @@
+---
+"@code-hike/lighter": patch
+---
+
+Support css variables
diff --git a/lib/dist/browser.esm.mjs b/lib/dist/browser.esm.mjs
index 46954ba..cadc5ca 100644
--- a/lib/dist/browser.esm.mjs
+++ b/lib/dist/browser.esm.mjs
@@ -87,7 +87,7 @@ function transparent(color, opacity) {
}
function getThemeColors(theme) {
- return Object.assign({ colorScheme: theme.type }, getColors(theme));
+ return Object.assign({ colorScheme: theme.type === "from-css" ? "var(--ch-0)" : theme.type }, getColors(theme));
}
const colorNamesToKeys = {
background: "editor.background",
@@ -231,7 +231,7 @@ async function preloadTheme(theme) {
if (typeof theme === "string") {
const name = theme;
if (!THEME_NAMES.includes(name)) {
- throw new UnknownThemeError$1(name);
+ throw new UnknownThemeError(name);
}
if (!promiseCache.has(name)) {
const promise = reallyLoadThemeByName(name).then((theme) => {
@@ -269,7 +269,7 @@ function toFinalTheme(theme) {
if (!theme) {
return undefined;
}
- const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: theme.settings || theme.tokenColors || [], colors: theme.colors || {} });
+ const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: theme.settings || theme.tokenColors || [], colors: theme.colors || {}, colorNames: theme.colorNames });
const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);
if (globalSetting) {
const { foreground, background } = globalSetting.settings || {};
@@ -295,10 +295,37 @@ function toFinalTheme(theme) {
...finalTheme.settings,
];
}
+ if (theme.type === "from-css" && !finalTheme.colorNames) {
+ const colorNames = {};
+ let counter = 0;
+ finalTheme.settings = finalTheme.settings.map((s) => {
+ const setting = Object.assign(Object.assign({}, s), { settings: Object.assign({}, s.settings) });
+ const { foreground, background } = setting.settings || {};
+ if (foreground && !colorNames[foreground]) {
+ colorNames[foreground] = `#${counter.toString(16).padStart(6, "0")}`;
+ counter++;
+ }
+ if (background && !colorNames[background]) {
+ colorNames[background] = `#${counter.toString(16).padStart(6, "0")}`;
+ counter++;
+ }
+ if (foreground) {
+ setting.settings.foreground = colorNames[foreground];
+ }
+ if (background) {
+ setting.settings.background = colorNames[background];
+ }
+ return setting;
+ });
+ finalTheme.colorNames = colorNames;
+ }
return finalTheme;
}
function getColorScheme(theme) {
var _a;
+ if (theme.type === "from-css") {
+ return "from-css";
+ }
const themeType = theme.type
? theme.type
: ((_a = theme.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes("light"))
@@ -317,10 +344,12 @@ const THEME_NAMES = [
"dracula",
"github-dark",
"github-dark-dimmed",
+ "github-from-css",
"github-light",
"light-plus",
"material-darker",
"material-default",
+ "material-from-css",
"material-lighter",
"material-ocean",
"material-palenight",
@@ -335,7 +364,7 @@ const THEME_NAMES = [
"solarized-dark",
"solarized-light",
];
-class UnknownThemeError$1 extends Error {
+class UnknownThemeError extends Error {
constructor(theme) {
super(`Unknown theme: ${theme}`);
this.theme = theme;
@@ -2582,9 +2611,18 @@ class UnknownLanguageError extends Error {
}
function highlightTokens(code, grammar, theme) {
registry.setTheme(theme);
- const colorMap = registry.getColorMap();
+ const colorMap = getColorMap(theme);
return tokenize(code, grammar, colorMap);
}
+function getColorMap(theme) {
+ const colorMap = registry.getColorMap();
+ if (!theme.colorNames)
+ return colorMap;
+ return colorMap.map((c) => {
+ const key = Object.keys(theme.colorNames).find((key) => theme.colorNames[key].toUpperCase() === c.toUpperCase());
+ return key || c;
+ });
+}
function highlightTokensWithScopes(code, grammar, theme) {
registry.setTheme(theme);
const colorMap = registry.getColorMap();
@@ -3054,12 +3092,6 @@ function splitAnnotations(annotations) {
};
}
-class UnknownThemeError extends Error {
- constructor(theme) {
- super(`Unknown theme: ${theme}`);
- this.theme = theme;
- }
-}
function isAnnotatedConfig(config) {
return "annotations" in config;
}
diff --git a/lib/dist/index.cjs.js b/lib/dist/index.cjs.js
index 89165da..9dbe4a1 100644
--- a/lib/dist/index.cjs.js
+++ b/lib/dist/index.cjs.js
@@ -457,7 +457,7 @@ function transparent(color, opacity) {
}
function getThemeColors(theme) {
- return Object.assign({ colorScheme: theme.type }, getColors(theme));
+ return Object.assign({ colorScheme: theme.type === "from-css" ? "var(--ch-0)" : theme.type }, getColors(theme));
}
const colorNamesToKeys = {
background: "editor.background",
@@ -601,7 +601,7 @@ async function preloadTheme(theme) {
if (typeof theme === "string") {
const name = theme;
if (!THEME_NAMES.includes(name)) {
- throw new UnknownThemeError$1(name);
+ throw new UnknownThemeError(name);
}
if (!promiseCache.has(name)) {
const promise = reallyLoadThemeByName(name).then((theme) => {
@@ -639,7 +639,7 @@ function toFinalTheme(theme) {
if (!theme) {
return undefined;
}
- const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: theme.settings || theme.tokenColors || [], colors: theme.colors || {} });
+ const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: theme.settings || theme.tokenColors || [], colors: theme.colors || {}, colorNames: theme.colorNames });
const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);
if (globalSetting) {
const { foreground, background } = globalSetting.settings || {};
@@ -665,10 +665,37 @@ function toFinalTheme(theme) {
...finalTheme.settings,
];
}
+ if (theme.type === "from-css" && !finalTheme.colorNames) {
+ const colorNames = {};
+ let counter = 0;
+ finalTheme.settings = finalTheme.settings.map((s) => {
+ const setting = Object.assign(Object.assign({}, s), { settings: Object.assign({}, s.settings) });
+ const { foreground, background } = setting.settings || {};
+ if (foreground && !colorNames[foreground]) {
+ colorNames[foreground] = `#${counter.toString(16).padStart(6, "0")}`;
+ counter++;
+ }
+ if (background && !colorNames[background]) {
+ colorNames[background] = `#${counter.toString(16).padStart(6, "0")}`;
+ counter++;
+ }
+ if (foreground) {
+ setting.settings.foreground = colorNames[foreground];
+ }
+ if (background) {
+ setting.settings.background = colorNames[background];
+ }
+ return setting;
+ });
+ finalTheme.colorNames = colorNames;
+ }
return finalTheme;
}
function getColorScheme(theme) {
var _a;
+ if (theme.type === "from-css") {
+ return "from-css";
+ }
const themeType = theme.type
? theme.type
: ((_a = theme.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes("light"))
@@ -687,10 +714,12 @@ const THEME_NAMES = [
"dracula",
"github-dark",
"github-dark-dimmed",
+ "github-from-css",
"github-light",
"light-plus",
"material-darker",
"material-default",
+ "material-from-css",
"material-lighter",
"material-ocean",
"material-palenight",
@@ -705,7 +734,7 @@ const THEME_NAMES = [
"solarized-dark",
"solarized-light",
];
-class UnknownThemeError$1 extends Error {
+class UnknownThemeError extends Error {
constructor(theme) {
super(`Unknown theme: ${theme}`);
this.theme = theme;
@@ -2952,9 +2981,18 @@ class UnknownLanguageError extends Error {
}
function highlightTokens(code, grammar, theme) {
registry.setTheme(theme);
- const colorMap = registry.getColorMap();
+ const colorMap = getColorMap(theme);
return tokenize(code, grammar, colorMap);
}
+function getColorMap(theme) {
+ const colorMap = registry.getColorMap();
+ if (!theme.colorNames)
+ return colorMap;
+ return colorMap.map((c) => {
+ const key = Object.keys(theme.colorNames).find((key) => theme.colorNames[key].toUpperCase() === c.toUpperCase());
+ return key || c;
+ });
+}
function highlightTokensWithScopes(code, grammar, theme) {
registry.setTheme(theme);
const colorMap = registry.getColorMap();
@@ -3424,12 +3462,6 @@ function splitAnnotations(annotations) {
};
}
-class UnknownThemeError extends Error {
- constructor(theme) {
- super(`Unknown theme: ${theme}`);
- this.theme = theme;
- }
-}
function isAnnotatedConfig(config) {
return "annotations" in config;
}
diff --git a/lib/dist/index.d.ts b/lib/dist/index.d.ts
index 306da30..b605dec 100644
--- a/lib/dist/index.d.ts
+++ b/lib/dist/index.d.ts
@@ -18,16 +18,23 @@ type ThemeSetting = {
};
type FinalTheme = {
name: string;
- type: "dark" | "light";
+ type: "dark" | "light" | "from-css";
settings: ThemeSetting[];
colors: {
[key: string]: string;
};
+ colorNames?: {
+ [key: string]: string;
+ };
};
-declare const THEME_NAMES: readonly ["dark-plus", "dracula-soft", "dracula", "github-dark", "github-dark-dimmed", "github-light", "light-plus", "material-darker", "material-default", "material-lighter", "material-ocean", "material-palenight", "min-dark", "min-light", "monokai", "nord", "one-dark-pro", "poimandres", "slack-dark", "slack-ochin", "solarized-dark", "solarized-light"];
+declare const THEME_NAMES: readonly ["dark-plus", "dracula-soft", "dracula", "github-dark", "github-dark-dimmed", "github-from-css", "github-light", "light-plus", "material-darker", "material-default", "material-from-css", "material-lighter", "material-ocean", "material-palenight", "min-dark", "min-light", "monokai", "nord", "one-dark-pro", "poimandres", "slack-dark", "slack-ochin", "solarized-dark", "solarized-light"];
type NamesTuple$1 = typeof THEME_NAMES;
type StringTheme = NamesTuple$1[number];
type Theme = StringTheme | RawTheme;
+declare class UnknownThemeError extends Error {
+ theme: string;
+ constructor(theme: string);
+}
declare const LANG_NAMES: string[];
type NamesTuple = typeof LANG_NAMES;
@@ -64,7 +71,7 @@ declare function getThemeColors(theme: FinalTheme): {
activeTabTopBorder: string;
hoverTabBackground: string;
hoverTabForeground: string;
- colorScheme: "dark" | "light";
+ colorScheme: string;
};
type LineNumber = number;
@@ -122,10 +129,6 @@ declare class UnknownLanguageError extends Error {
constructor(alias: string);
}
-declare class UnknownThemeError extends Error {
- theme: string;
- constructor(theme: string);
-}
type Config = {
scopes?: boolean;
};
diff --git a/lib/dist/index.esm.mjs b/lib/dist/index.esm.mjs
index df8cbfa..3f41e93 100644
--- a/lib/dist/index.esm.mjs
+++ b/lib/dist/index.esm.mjs
@@ -435,7 +435,7 @@ function transparent(color, opacity) {
}
function getThemeColors(theme) {
- return Object.assign({ colorScheme: theme.type }, getColors(theme));
+ return Object.assign({ colorScheme: theme.type === "from-css" ? "var(--ch-0)" : theme.type }, getColors(theme));
}
const colorNamesToKeys = {
background: "editor.background",
@@ -579,7 +579,7 @@ async function preloadTheme(theme) {
if (typeof theme === "string") {
const name = theme;
if (!THEME_NAMES.includes(name)) {
- throw new UnknownThemeError$1(name);
+ throw new UnknownThemeError(name);
}
if (!promiseCache.has(name)) {
const promise = reallyLoadThemeByName(name).then((theme) => {
@@ -617,7 +617,7 @@ function toFinalTheme(theme) {
if (!theme) {
return undefined;
}
- const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: theme.settings || theme.tokenColors || [], colors: theme.colors || {} });
+ const finalTheme = Object.assign(Object.assign({}, theme), { name: theme.name || "unknown-theme", type: getColorScheme(theme), settings: theme.settings || theme.tokenColors || [], colors: theme.colors || {}, colorNames: theme.colorNames });
const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);
if (globalSetting) {
const { foreground, background } = globalSetting.settings || {};
@@ -643,10 +643,37 @@ function toFinalTheme(theme) {
...finalTheme.settings,
];
}
+ if (theme.type === "from-css" && !finalTheme.colorNames) {
+ const colorNames = {};
+ let counter = 0;
+ finalTheme.settings = finalTheme.settings.map((s) => {
+ const setting = Object.assign(Object.assign({}, s), { settings: Object.assign({}, s.settings) });
+ const { foreground, background } = setting.settings || {};
+ if (foreground && !colorNames[foreground]) {
+ colorNames[foreground] = `#${counter.toString(16).padStart(6, "0")}`;
+ counter++;
+ }
+ if (background && !colorNames[background]) {
+ colorNames[background] = `#${counter.toString(16).padStart(6, "0")}`;
+ counter++;
+ }
+ if (foreground) {
+ setting.settings.foreground = colorNames[foreground];
+ }
+ if (background) {
+ setting.settings.background = colorNames[background];
+ }
+ return setting;
+ });
+ finalTheme.colorNames = colorNames;
+ }
return finalTheme;
}
function getColorScheme(theme) {
var _a;
+ if (theme.type === "from-css") {
+ return "from-css";
+ }
const themeType = theme.type
? theme.type
: ((_a = theme.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes("light"))
@@ -665,10 +692,12 @@ const THEME_NAMES = [
"dracula",
"github-dark",
"github-dark-dimmed",
+ "github-from-css",
"github-light",
"light-plus",
"material-darker",
"material-default",
+ "material-from-css",
"material-lighter",
"material-ocean",
"material-palenight",
@@ -683,7 +712,7 @@ const THEME_NAMES = [
"solarized-dark",
"solarized-light",
];
-class UnknownThemeError$1 extends Error {
+class UnknownThemeError extends Error {
constructor(theme) {
super(`Unknown theme: ${theme}`);
this.theme = theme;
@@ -2930,9 +2959,18 @@ class UnknownLanguageError extends Error {
}
function highlightTokens(code, grammar, theme) {
registry.setTheme(theme);
- const colorMap = registry.getColorMap();
+ const colorMap = getColorMap(theme);
return tokenize(code, grammar, colorMap);
}
+function getColorMap(theme) {
+ const colorMap = registry.getColorMap();
+ if (!theme.colorNames)
+ return colorMap;
+ return colorMap.map((c) => {
+ const key = Object.keys(theme.colorNames).find((key) => theme.colorNames[key].toUpperCase() === c.toUpperCase());
+ return key || c;
+ });
+}
function highlightTokensWithScopes(code, grammar, theme) {
registry.setTheme(theme);
const colorMap = registry.getColorMap();
@@ -3402,12 +3440,6 @@ function splitAnnotations(annotations) {
};
}
-class UnknownThemeError extends Error {
- constructor(theme) {
- super(`Unknown theme: ${theme}`);
- this.theme = theme;
- }
-}
function isAnnotatedConfig(config) {
return "annotations" in config;
}
diff --git a/lib/src/highlighter.ts b/lib/src/highlighter.ts
index a853797..928cd4f 100644
--- a/lib/src/highlighter.ts
+++ b/lib/src/highlighter.ts
@@ -89,10 +89,21 @@ export function highlightTokens(
theme: FinalTheme
) {
registry.setTheme(theme);
- const colorMap = registry.getColorMap();
+ const colorMap = getColorMap(theme);
return tokenize(code, grammar, colorMap);
}
+function getColorMap(theme: FinalTheme) {
+ const colorMap = registry.getColorMap();
+ if (!theme.colorNames) return colorMap;
+ return colorMap.map((c) => {
+ const key = Object.keys(theme.colorNames).find(
+ (key) => theme.colorNames[key].toUpperCase() === c.toUpperCase()
+ );
+ return key || c;
+ });
+}
+
export function highlightTokensWithScopes(
code: string,
grammar: IGrammar,
diff --git a/lib/src/index.ts b/lib/src/index.ts
index fe72cbb..9fa5051 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -5,6 +5,7 @@ import {
THEME_NAMES,
preloadTheme,
getTheme,
+ UnknownThemeError,
} from "./theme";
import { LanguageAlias, LanguageName, LANG_NAMES } from "./language-data";
import { getThemeColors, ThemeColors } from "./theme-colors";
@@ -27,14 +28,6 @@ import {
Token,
} from "./annotations";
-class UnknownThemeError extends Error {
- theme: string;
- constructor(theme: string) {
- super(`Unknown theme: ${theme}`);
- this.theme = theme;
- }
-}
-
type Config = { scopes?: boolean };
type AnnotatedConfig = { annotations: Annotation[] } & Config;
type LighterResult = {
diff --git a/lib/src/theme-colors.ts b/lib/src/theme-colors.ts
index 41a0152..3fcada0 100644
--- a/lib/src/theme-colors.ts
+++ b/lib/src/theme-colors.ts
@@ -5,7 +5,7 @@ export type ThemeColors = ReturnType;
export function getThemeColors(theme: FinalTheme) {
return {
- colorScheme: theme.type,
+ colorScheme: theme.type === "from-css" ? "var(--ch-0)" : theme.type,
...getColors(theme),
};
}
diff --git a/lib/src/theme.ts b/lib/src/theme.ts
index a1b9af4..c3f22e5 100644
--- a/lib/src/theme.ts
+++ b/lib/src/theme.ts
@@ -56,6 +56,7 @@ function toFinalTheme(theme: RawTheme | undefined): FinalTheme | undefined {
type: getColorScheme(theme),
settings: theme.settings || theme.tokenColors || [],
colors: theme.colors || {},
+ colorNames: theme.colorNames,
};
const globalSetting = finalTheme.settings.find((s) => !s.name && !s.scope);
@@ -84,10 +85,40 @@ function toFinalTheme(theme: RawTheme | undefined): FinalTheme | undefined {
];
}
+ if (theme.type === "from-css" && !finalTheme.colorNames) {
+ const colorNames = {};
+ let counter = 0;
+
+ finalTheme.settings = finalTheme.settings.map((s) => {
+ const setting = { ...s, settings: { ...s.settings } };
+ const { foreground, background } = setting.settings || {};
+ if (foreground && !colorNames[foreground]) {
+ colorNames[foreground] = `#${counter.toString(16).padStart(6, "0")}`;
+ counter++;
+ }
+ if (background && !colorNames[background]) {
+ colorNames[background] = `#${counter.toString(16).padStart(6, "0")}`;
+ counter++;
+ }
+ if (foreground) {
+ setting.settings.foreground = colorNames[foreground];
+ }
+ if (background) {
+ setting.settings.background = colorNames[background];
+ }
+ return setting;
+ });
+
+ finalTheme.colorNames = colorNames;
+ }
+
return finalTheme;
}
function getColorScheme(theme: RawTheme) {
+ if (theme.type === "from-css") {
+ return "from-css";
+ }
const themeType = theme.type
? theme.type
: theme.name?.toLowerCase().includes("light")
@@ -120,9 +151,10 @@ type ThemeSetting = {
export type FinalTheme = {
name: string;
- type: "dark" | "light";
+ type: "dark" | "light" | "from-css";
settings: ThemeSetting[];
colors: { [key: string]: string };
+ colorNames?: { [key: string]: string };
};
export const THEME_NAMES = [
@@ -131,10 +163,12 @@ export const THEME_NAMES = [
"dracula",
"github-dark",
"github-dark-dimmed",
+ "github-from-css",
"github-light",
"light-plus",
"material-darker",
"material-default",
+ "material-from-css",
"material-lighter",
"material-ocean",
"material-palenight",
diff --git a/lib/themes/github-from-css.css b/lib/themes/github-from-css.css
new file mode 100644
index 0000000..d35b894
--- /dev/null
+++ b/lib/themes/github-from-css.css
@@ -0,0 +1,57 @@
+:root {
+ --ch-0: dark;
+ --ch-1: #8b949e;
+ --ch-2: #79c0ff;
+ --ch-3: #ffa657;
+ --ch-4: #c9d1d9;
+ --ch-5: #d2a8ff;
+ --ch-6: #7ee787;
+ --ch-7: #ff7b72;
+ --ch-8: #a5d6ff;
+ --ch-9: #ffa198;
+ --ch-10: #f0f6fc;
+ --ch-11: #490202;
+ --ch-12: #04260f;
+ --ch-13: #5a1e02;
+ --ch-14: #161b22;
+ --ch-15: #8b949e;
+ --ch-16: #0d1117;
+ --ch-17: #264f78;
+ --ch-18: #3794ff;
+ --ch-19: #ffffff0b;
+ --ch-20: #6e7681;
+ --ch-21: #010409;
+ --ch-22: #30363d;
+ --ch-23: #f78166;
+ --ch-24: #6e768166;
+ --ch-25: #6e76811a;
+}
+
+[data-theme="light"] {
+ --ch-0: light;
+ --ch-1: #6e7781;
+ --ch-2: #0550ae;
+ --ch-3: #953800;
+ --ch-4: #24292f;
+ --ch-5: #8250df;
+ --ch-6: #116329;
+ --ch-7: #cf222e;
+ --ch-8: #0a3069;
+ --ch-9: #82071e;
+ --ch-10: #f6f8fa;
+ --ch-11: #ffebe9;
+ --ch-12: #dafbe1;
+ --ch-13: #ffd8b5;
+ --ch-14: #eaeef2;
+ --ch-15: #57606a;
+ --ch-16: #ffffff;
+ --ch-17: #add6ff;
+ --ch-18: #1a85ff;
+ --ch-19: #fdff0033;
+ --ch-20: #8c959f;
+ --ch-21: #f6f8fa;
+ --ch-22: #d0d7de;
+ --ch-23: #fd8c73;
+ --ch-24: #afb8c133;
+ --ch-25: #eaeef280;
+}
diff --git a/lib/themes/github-from-css.json b/lib/themes/github-from-css.json
new file mode 100644
index 0000000..790eb1f
--- /dev/null
+++ b/lib/themes/github-from-css.json
@@ -0,0 +1,377 @@
+{
+ "name": "github-from-css",
+ "type": "from-css",
+ "tokenColors": [
+ {
+ "scope": ["comment", "punctuation.definition.comment", "string.comment"],
+ "settings": {
+ "foreground": "var(--ch-1)"
+ }
+ },
+ {
+ "scope": [
+ "constant",
+ "entity.name.constant",
+ "variable.other.constant",
+ "variable.other.enummember",
+ "variable.language",
+ "entity"
+ ],
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": [
+ "entity.name",
+ "meta.export.default",
+ "meta.definition.variable"
+ ],
+ "settings": {
+ "foreground": "var(--ch-3)"
+ }
+ },
+ {
+ "scope": [
+ "variable.parameter.function",
+ "meta.jsx.children",
+ "meta.block",
+ "meta.tag.attributes",
+ "entity.name.constant",
+ "meta.object.member",
+ "meta.embedded.expression"
+ ],
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "entity.name.function",
+ "settings": {
+ "foreground": "var(--ch-5)"
+ }
+ },
+ {
+ "scope": ["entity.name.tag", "support.class.component"],
+ "settings": {
+ "foreground": "var(--ch-6)"
+ }
+ },
+ {
+ "scope": "keyword",
+ "settings": {
+ "foreground": "var(--ch-7)"
+ }
+ },
+ {
+ "scope": ["storage", "storage.type"],
+ "settings": {
+ "foreground": "var(--ch-7)"
+ }
+ },
+ {
+ "scope": [
+ "storage.modifier.package",
+ "storage.modifier.import",
+ "storage.type.java"
+ ],
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": ["string", "string punctuation.section.embedded source"],
+ "settings": {
+ "foreground": "var(--ch-8)"
+ }
+ },
+ {
+ "scope": "support",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "meta.property-name",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "variable",
+ "settings": {
+ "foreground": "var(--ch-3)"
+ }
+ },
+ {
+ "scope": "variable.other",
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "invalid.broken",
+ "settings": {
+ "foreground": "var(--ch-9)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": "invalid.deprecated",
+ "settings": {
+ "foreground": "var(--ch-9)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": "invalid.illegal",
+ "settings": {
+ "foreground": "var(--ch-9)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": "invalid.unimplemented",
+ "settings": {
+ "foreground": "var(--ch-9)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": "carriage-return",
+ "settings": {
+ "background": "var(--ch-7)",
+ "foreground": "var(--ch-10)",
+ "fontStyle": "italic underline"
+ }
+ },
+ {
+ "scope": "message.error",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "string variable",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": ["source.regexp", "string.regexp"],
+ "settings": {
+ "foreground": "var(--ch-8)"
+ }
+ },
+ {
+ "scope": [
+ "string.regexp.character-class",
+ "string.regexp constant.character.escape",
+ "string.regexp source.ruby.embedded",
+ "string.regexp string.regexp.arbitrary-repitition"
+ ],
+ "settings": {
+ "foreground": "var(--ch-8)"
+ }
+ },
+ {
+ "scope": "string.regexp constant.character.escape",
+ "settings": {
+ "foreground": "var(--ch-6)",
+ "fontStyle": "bold"
+ }
+ },
+ {
+ "scope": "support.constant",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "support.variable",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "support.type.property-name.json",
+ "settings": {
+ "foreground": "var(--ch-6)"
+ }
+ },
+ {
+ "scope": "meta.module-reference",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "punctuation.definition.list.begin.markdown",
+ "settings": {
+ "foreground": "var(--ch-3)"
+ }
+ },
+ {
+ "scope": ["markup.heading", "markup.heading entity.name"],
+ "settings": {
+ "foreground": "var(--ch-2)",
+ "fontStyle": "bold"
+ }
+ },
+ {
+ "scope": "markup.quote",
+ "settings": {
+ "foreground": "var(--ch-6)"
+ }
+ },
+ {
+ "scope": "markup.italic",
+ "settings": {
+ "foreground": "var(--ch-4)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": "markup.bold",
+ "settings": {
+ "foreground": "var(--ch-4)",
+ "fontStyle": "bold"
+ }
+ },
+ {
+ "scope": ["markup.underline"],
+ "settings": {
+ "fontStyle": "underline"
+ }
+ },
+ {
+ "scope": ["markup.strikethrough"],
+ "settings": {
+ "fontStyle": "strikethrough"
+ }
+ },
+ {
+ "scope": "markup.inline.raw",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": [
+ "markup.deleted",
+ "meta.diff.header.from-file",
+ "punctuation.definition.deleted"
+ ],
+ "settings": {
+ "background": "var(--ch-11)",
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": ["punctuation.section.embedded"],
+ "settings": {
+ "foreground": "var(--ch-7)"
+ }
+ },
+ {
+ "scope": [
+ "markup.inserted",
+ "meta.diff.header.to-file",
+ "punctuation.definition.inserted"
+ ],
+ "settings": {
+ "background": "var(--ch-12)",
+ "foreground": "var(--ch-6)"
+ }
+ },
+ {
+ "scope": ["markup.changed", "punctuation.definition.changed"],
+ "settings": {
+ "background": "var(--ch-13)",
+ "foreground": "var(--ch-3)"
+ }
+ },
+ {
+ "scope": ["markup.ignored", "markup.untracked"],
+ "settings": {
+ "background": "var(--ch-2)",
+ "foreground": "var(--ch-14)"
+ }
+ },
+ {
+ "scope": "meta.diff.range",
+ "settings": {
+ "foreground": "var(--ch-5)",
+ "fontStyle": "bold"
+ }
+ },
+ {
+ "scope": "meta.diff.header",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "meta.separator",
+ "settings": {
+ "foreground": "var(--ch-2)",
+ "fontStyle": "bold"
+ }
+ },
+ {
+ "scope": "meta.output",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": [
+ "brackethighlighter.tag",
+ "brackethighlighter.curly",
+ "brackethighlighter.round",
+ "brackethighlighter.square",
+ "brackethighlighter.angle",
+ "brackethighlighter.quote"
+ ],
+ "settings": {
+ "foreground": "var(--ch-15)"
+ }
+ },
+ {
+ "scope": "brackethighlighter.unmatched",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": ["constant.other.reference.link", "string.other.link"],
+ "settings": {
+ "foreground": "var(--ch-8)",
+ "fontStyle": "underline"
+ }
+ }
+ ],
+ "colors": {
+ "editor.background": "var(--ch-16)",
+ "editor.foreground": "var(--ch-4)",
+ "editor.selectionBackground": "var(--ch-17)",
+ "editor.infoForeground": "var(--ch-18)",
+ "editor.rangeHighlightBackground": "var(--ch-19)",
+ "editorLineNumber.foreground": "var(--ch-20)",
+ "tab.activeBackground": "var(--ch-16)",
+ "tab.inactiveBackground": "var(--ch-21)",
+ "tab.activeForeground": "var(--ch-4)",
+ "tab.inactiveForeground": "var(--ch-15)",
+ "tab.border": "var(--ch-22)",
+ "tab.activeBorder": "var(--ch-16)",
+ "tab.activeBorderTop": "var(--ch-23)",
+ "tab.hoverBackground": "var(--ch-16)",
+ "tab.hoverForeground": "var(--ch-15)",
+ "editorGroupHeader.tabsBorder": "var(--ch-22)",
+ "editorGroupHeader.tabsBackground": "var(--ch-21)",
+ "list.inactiveSelectionBackground": "var(--ch-24)",
+ "list.inactiveSelectionForeground": "var(--ch-4)",
+ "list.hoverBackground": "var(--ch-25)",
+ "list.hoverForeground": "var(--ch-4)"
+ }
+}
diff --git a/lib/themes/material-from-css.css b/lib/themes/material-from-css.css
new file mode 100644
index 0000000..68c3573
--- /dev/null
+++ b/lib/themes/material-from-css.css
@@ -0,0 +1,47 @@
+:root {
+ --ch-0: dark;
+ --ch-1: #212121;
+ --ch-2: #eeffff;
+ --ch-3: #c3e88d;
+ --ch-4: #89ddff;
+ --ch-5: #ff9cac;
+ --ch-6: #f78c6c;
+ --ch-7: #82aaff;
+ --ch-8: #c792ea;
+ --ch-9: #f07178;
+ --ch-10: #ffcb6b;
+ --ch-11: #545454;
+ --ch-12: #b2ccd6;
+ --ch-13: #eeffff90;
+ --ch-14: #61616150;
+ --ch-15: #3794ff;
+ --ch-16: #424242;
+ --ch-17: #ffffff;
+ --ch-18: #616161;
+ --ch-19: #00000030;
+ --ch-20: #ffffff;
+}
+
+[data-theme="light"] {
+ --ch-0: light;
+ --ch-1: #fafafa;
+ --ch-2: #90a4ae;
+ --ch-3: #91b859;
+ --ch-4: #39adb5;
+ --ch-5: #ff5370;
+ --ch-6: #f76d47;
+ --ch-7: #6182b8;
+ --ch-8: #9c3eda;
+ --ch-9: #e53935;
+ --ch-10: #e2931d;
+ --ch-11: #90a4ae;
+ --ch-12: #8796b0;
+ --ch-13: #90a4ae90;
+ --ch-14: #80cbc440;
+ --ch-15: #1a85ff;
+ --ch-16: #cfd8dc;
+ --ch-17: #000000;
+ --ch-18: #7e939e;
+ --ch-19: #ccd7da50;
+ --ch-20: #b1c7d3;
+}
diff --git a/lib/themes/material-from-css.json b/lib/themes/material-from-css.json
new file mode 100644
index 0000000..7e6d483
--- /dev/null
+++ b/lib/themes/material-from-css.json
@@ -0,0 +1,541 @@
+{
+ "name": "material-from-css",
+ "type": "from-css",
+ "tokenColors": [
+ {
+ "settings": {
+ "background": "var(--ch-1)",
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "string",
+ "settings": {
+ "foreground": "var(--ch-3)"
+ }
+ },
+ {
+ "scope": "punctuation, constant.other.symbol",
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "constant.character.escape, text.html constant.character.entity.named",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "constant.language.boolean",
+ "settings": {
+ "foreground": "var(--ch-5)"
+ }
+ },
+ {
+ "scope": "constant.numeric",
+ "settings": {
+ "foreground": "var(--ch-6)"
+ }
+ },
+ {
+ "scope": "variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "keyword.other",
+ "settings": {
+ "foreground": "var(--ch-6)"
+ }
+ },
+ {
+ "scope": "keyword, modifier, variable.language.this, support.type.object, constant.language",
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "entity.name.function, support.function",
+ "settings": {
+ "foreground": "var(--ch-7)"
+ }
+ },
+ {
+ "scope": "storage.type, storage.modifier, storage.control",
+ "settings": {
+ "foreground": "var(--ch-8)"
+ }
+ },
+ {
+ "scope": "support.module, support.node",
+ "settings": {
+ "foreground": "var(--ch-9)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": "support.type, constant.other.key",
+ "settings": {
+ "foreground": "var(--ch-10)"
+ }
+ },
+ {
+ "scope": "entity.name.type, entity.other.inherited-class, entity.other",
+ "settings": {
+ "foreground": "var(--ch-10)"
+ }
+ },
+ {
+ "scope": "comment",
+ "settings": {
+ "foreground": "var(--ch-11)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": "comment punctuation.definition.comment, string.quoted.docstring",
+ "settings": {
+ "foreground": "var(--ch-11)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": "punctuation",
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "entity.name, entity.name.type.class, support.type, support.class, meta.use",
+ "settings": {
+ "foreground": "var(--ch-10)"
+ }
+ },
+ {
+ "scope": "variable.object.property, meta.field.declaration entity.name.function",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "meta.definition.method entity.name.function",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "meta.function entity.name.function",
+ "settings": {
+ "foreground": "var(--ch-7)"
+ }
+ },
+ {
+ "scope": "template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end",
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "meta.embedded, source.groovy.embedded, meta.template.expression",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "entity.name.tag.yaml",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "constant.language.json",
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "entity.other.attribute-name.class",
+ "settings": {
+ "foreground": "var(--ch-10)"
+ }
+ },
+ {
+ "scope": "entity.other.attribute-name.id",
+ "settings": {
+ "foreground": "var(--ch-6)"
+ }
+ },
+ {
+ "scope": "source.css entity.name.tag",
+ "settings": {
+ "foreground": "var(--ch-10)"
+ }
+ },
+ {
+ "scope": "support.type.property-name.css",
+ "settings": {
+ "foreground": "var(--ch-12)"
+ }
+ },
+ {
+ "scope": "meta.tag, punctuation.definition.tag",
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "entity.name.tag",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "entity.other.attribute-name",
+ "settings": {
+ "foreground": "var(--ch-8)"
+ }
+ },
+ {
+ "scope": "punctuation.definition.entity.html",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "markup.heading",
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "text.html.markdown meta.link.inline, meta.link.reference",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "text.html.markdown beginning.punctuation.definition.list",
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "markup.italic",
+ "settings": {
+ "foreground": "var(--ch-9)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": "markup.bold",
+ "settings": {
+ "foreground": "var(--ch-9)",
+ "fontStyle": "bold"
+ }
+ },
+ {
+ "scope": "markup.bold markup.italic, markup.italic markup.bold",
+ "settings": {
+ "foreground": "var(--ch-9)",
+ "fontStyle": "italic bold"
+ }
+ },
+ {
+ "scope": "markup.fenced_code.block.markdown punctuation.definition.markdown",
+ "settings": {
+ "foreground": "var(--ch-3)"
+ }
+ },
+ {
+ "scope": "markup.inline.raw.string.markdown",
+ "settings": {
+ "foreground": "var(--ch-3)"
+ }
+ },
+ {
+ "scope": "keyword.other.definition.ini",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "entity.name.section.group-title.ini",
+ "settings": {
+ "foreground": "var(--ch-4)"
+ }
+ },
+ {
+ "scope": "source.cs meta.class.identifier storage.type",
+ "settings": {
+ "foreground": "var(--ch-10)"
+ }
+ },
+ {
+ "scope": "source.cs meta.method.identifier entity.name.function",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "source.cs meta.method-call meta.method, source.cs entity.name.function",
+ "settings": {
+ "foreground": "var(--ch-7)"
+ }
+ },
+ {
+ "scope": "source.cs storage.type",
+ "settings": {
+ "foreground": "var(--ch-10)"
+ }
+ },
+ {
+ "scope": "source.cs meta.method.return-type",
+ "settings": {
+ "foreground": "var(--ch-10)"
+ }
+ },
+ {
+ "scope": "source.cs meta.preprocessor",
+ "settings": {
+ "foreground": "var(--ch-11)"
+ }
+ },
+ {
+ "scope": "source.cs entity.name.type.namespace",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "meta.jsx.children, SXNested",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "support.class.component",
+ "settings": {
+ "foreground": "var(--ch-10)"
+ }
+ },
+ {
+ "scope": "source.cpp meta.block variable.other",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "source.python meta.member.access.python",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "source.python meta.function-call.python, meta.function-call.arguments",
+ "settings": {
+ "foreground": "var(--ch-7)"
+ }
+ },
+ {
+ "scope": "meta.block",
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": "entity.name.function.call",
+ "settings": {
+ "foreground": "var(--ch-7)"
+ }
+ },
+ {
+ "scope": "source.php support.other.namespace, source.php meta.use support.class",
+ "settings": {
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": "constant.keyword",
+ "settings": {
+ "foreground": "var(--ch-4)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": "entity.name.function",
+ "settings": {
+ "foreground": "var(--ch-7)"
+ }
+ },
+ {
+ "settings": {
+ "background": "var(--ch-1)",
+ "foreground": "var(--ch-2)"
+ }
+ },
+ {
+ "scope": ["markup.deleted"],
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": ["markup.inserted"],
+ "settings": {
+ "foreground": "var(--ch-3)"
+ }
+ },
+ {
+ "scope": ["markup.underline"],
+ "settings": {
+ "fontStyle": "underline"
+ }
+ },
+ {
+ "scope": ["keyword.control"],
+ "settings": {
+ "foreground": "var(--ch-4)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": ["variable.parameter"],
+ "settings": {
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": ["variable.parameter.function.language.special.self.python"],
+ "settings": {
+ "foreground": "var(--ch-9)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": ["constant.character.format.placeholder.other.python"],
+ "settings": {
+ "foreground": "var(--ch-6)"
+ }
+ },
+ {
+ "scope": ["markup.quote"],
+ "settings": {
+ "foreground": "var(--ch-4)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": ["markup.fenced_code.block"],
+ "settings": {
+ "foreground": "var(--ch-13)"
+ }
+ },
+ {
+ "scope": ["punctuation.definition.quote"],
+ "settings": {
+ "foreground": "var(--ch-5)"
+ }
+ },
+ {
+ "scope": [
+ "meta.structure.dictionary.json support.type.property-name.json"
+ ],
+ "settings": {
+ "foreground": "var(--ch-8)"
+ }
+ },
+ {
+ "scope": [
+ "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+ ],
+ "settings": {
+ "foreground": "var(--ch-10)"
+ }
+ },
+ {
+ "scope": [
+ "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+ ],
+ "settings": {
+ "foreground": "var(--ch-6)"
+ }
+ },
+ {
+ "scope": [
+ "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+ ],
+ "settings": {
+ "foreground": "var(--ch-9)"
+ }
+ },
+ {
+ "scope": [
+ "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+ ],
+ "settings": {
+ "foreground": "#916b53"
+ }
+ },
+ {
+ "scope": [
+ "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+ ],
+ "settings": {
+ "foreground": "var(--ch-7)"
+ }
+ },
+ {
+ "scope": [
+ "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+ ],
+ "settings": {
+ "foreground": "var(--ch-5)"
+ }
+ },
+ {
+ "scope": [
+ "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+ ],
+ "settings": {
+ "foreground": "var(--ch-8)"
+ }
+ },
+ {
+ "scope": [
+ "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+ ],
+ "settings": {
+ "foreground": "var(--ch-3)"
+ }
+ }
+ ],
+ "colors": {
+ "editor.background": "var(--ch-1)",
+ "editor.foreground": "var(--ch-2)",
+ "editor.selectionBackground": "var(--ch-14)",
+ "editor.infoForeground": "var(--ch-15)",
+ "editor.rangeHighlightBackground": "#FFFFFF0d",
+ "editorLineNumber.foreground": "var(--ch-16)",
+ "tab.activeBackground": "var(--ch-1)",
+ "tab.inactiveBackground": "var(--ch-1)",
+ "tab.activeForeground": "var(--ch-17)",
+ "tab.inactiveForeground": "var(--ch-18)",
+ "tab.border": "var(--ch-1)",
+ "tab.activeBorder": "#80CBC4",
+ "tab.hoverBackground": "var(--ch-1)",
+ "tab.hoverForeground": "var(--ch-18)",
+ "editorGroupHeader.tabsBackground": "var(--ch-1)",
+ "list.inactiveSelectionBackground": "var(--ch-19)",
+ "list.inactiveSelectionForeground": "#80CBC4",
+ "list.hoverBackground": "var(--ch-1)",
+ "list.hoverForeground": "var(--ch-20)"
+ }
+}
diff --git a/test/memory/index.js b/test/memory/index.js
new file mode 100644
index 0000000..3ee0c74
--- /dev/null
+++ b/test/memory/index.js
@@ -0,0 +1,33 @@
+import { highlight } from "@code-hike/lighter";
+
+const theme = "dracula";
+
+const codes = [
+ { code: `const x = 20`, alias: "js" },
+ { code: `print(10)`, alias: "py" },
+ { code: `.foo { color: red }`, alias: "css" },
+ { code: `foo
`, alias: "html" },
+ { code: `# hello`, alias: "md" },
+ { code: `class Foo`, alias: "rb" },
+ { code: `class Foo`, alias: "java" },
+ { code: `function foo()`, alias: "ts" },
+];
+
+async function test() {
+ for (let i = 0; i < 200000; i++) {
+ const { code, alias } = codes[i % codes.length];
+ await highlight(code, alias, theme);
+ if (i % 10000 === 0) {
+ const usage = process.memoryUsage();
+ console.log(
+ `${i} ${Math.round(usage.rss / 1000000)} ${Math.round(
+ usage.heapUsed / 1000000
+ )} ${Math.round(usage.heapTotal / 1000000)} ${Math.round(
+ usage.external / 1000000
+ )}`
+ );
+ }
+ }
+}
+
+test();
diff --git a/web/app/layout.js b/web/app/layout.js
index 6d7e1ed..851fe51 100644
--- a/web/app/layout.js
+++ b/web/app/layout.js
@@ -1,8 +1,10 @@
+import "@code-hike/lighter/themes/github-from-css.css";
+
export default function RootLayout({ children }) {
return (
{children}
- )
+ );
}
diff --git a/web/app/test/code.js b/web/app/test/code.js
index efe3549..2e8f78a 100644
--- a/web/app/test/code.js
+++ b/web/app/test/code.js
@@ -6,17 +6,18 @@ export async function Code({
style,
className,
lineNumbers,
- unstyled,
theme,
}) {
+ const { lines, colors } = await highlight(children, lang, theme);
+ // console.log({ colors });
+
const {
- lines,
foreground,
background,
colorScheme,
selectionBackground,
lineNumberForeground,
- } = await highlight(children, lang, theme);
+ } = colors;
const lineCount = lines.length;
const digits = lineCount.toString().length;
diff --git a/web/app/test/page.js b/web/app/test/page.js
index e11ec1d..4acdf84 100644
--- a/web/app/test/page.js
+++ b/web/app/test/page.js
@@ -1,10 +1,5 @@
import { Code } from "./code";
-
-export default function Page() {
- return (
-
-
- {`# hello
+const code = `# hello
@@ -19,7 +14,18 @@ print("Hello, two!")
~~~js
-const re = /ab+c/;
+// to edit the code click the pencil icon ☝️
+// click anywhere else to edit the colors
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit;
+ dolor = sit - amet(dolor);
+ return dolor;
+}
+
+function consectetur(...adipiscing) {
+ const elit = adipiscing[0];
+ return sed.eiusmod(elit) ? elit : [elit];
+}
~~~
@@ -35,11 +41,18 @@ Something _\`def lorem(ipsum)\`_
~~~py
print 2
-~~~`}
-
-
- print 2
+~~~`;
+export default function Page() {
+ return (
+
+
+ {code}
+
+
+ {code}
+
+