@shikijs/core 3.4.1 → 3.5.0

package/dist/index.d.mts

@@ -254,7 +254,7 @@ declare function splitToken<T extends Pick<ThemedToken, 'content' | 'offset'>>(t
  * Split 2D tokens array by given breakpoints.
  */
 declare function splitTokens<T extends Pick<ThemedToken, 'content' | 'offset'>>(tokens: T[][], breakpoints: number[] | Set<number>): T[][];
-declare function flatTokenVariants(merged: ThemedTokenWithVariants, variantsOrder: string[], cssVariablePrefix: string, defaultColor: string | boolean): ThemedToken;
+declare function flatTokenVariants(merged: ThemedTokenWithVariants, variantsOrder: string[], cssVariablePrefix: string, defaultColor: string | boolean | 'light-dark()'): ThemedToken;
 declare function getTokenStyleObject(token: TokenStyles): Record<string, string>;
 declare function stringifyTokenStyle(token: string | Record<string, string>): string;
 

package/dist/index.mjs

@@ -117,6 +117,8 @@ function guessEmbeddedLanguages(code, _lang, highlighter) {
   return Array.from(langs).filter((l) => l && bundle[l]);
 }
 
+const DEFAULT_COLOR_LIGHT_DARK = "light-dark()";
+
 function splitToken(token, offsets) {
   let lastOffset = 0;
   const tokens = [];
@@ -165,7 +167,20 @@ function flatTokenVariants(merged, variantsOrder, cssVariablePrefix, defaultColo
     for (const key of styleKeys) {
       const value = cur[key] || "inherit";
       if (idx === 0 && defaultColor) {
-        mergedStyles[key] = value;
+        if (defaultColor === DEFAULT_COLOR_LIGHT_DARK && styles.length > 1) {
+          const lightIndex = variantsOrder.findIndex((t) => t === "light");
+          const darkIndex = variantsOrder.findIndex((t) => t === "dark");
+          if (lightIndex === -1 || darkIndex === -1)
+            throw new ShikiError$1('When using `defaultColor: "light-dark()"`, you must provide both `light` and `dark` themes');
+          const lightValue = styles[lightIndex][key] || "inherit";
+          const darkValue = styles[darkIndex][key] || "inherit";
+          mergedStyles[key] = `light-dark(${lightValue}, ${darkValue})`;
+          const keyName = key === "color" ? "" : key === "background-color" ? "-bg" : `-${key}`;
+          const varKey = cssVariablePrefix + variantsOrder[idx] + (key === "color" ? "" : keyName);
+          mergedStyles[varKey] = value;
+        } else {
+          mergedStyles[key] = value;
+        }
       } else {
         const keyName = key === "color" ? "" : key === "background-color" ? "-bg" : `-${key}`;
         const varKey = cssVariablePrefix + variantsOrder[idx] + (key === "color" ? "" : keyName);
@@ -1112,7 +1127,7 @@ function codeToTokens(internal, code, options) {
       options
     );
     grammarState = getLastGrammarStateFromMap(themeTokens);
-    if (defaultColor && !themes.find((t) => t.color === defaultColor))
+    if (defaultColor && DEFAULT_COLOR_LIGHT_DARK !== defaultColor && !themes.find((t) => t.color === defaultColor))
       throw new ShikiError$1(`\`themes\` option must contain the defaultColor key \`${defaultColor}\``);
     const themeRegs = themes.map((t) => internal.getTheme(t.theme));
     const themesOrder = themes.map((t) => t.color);
@@ -1120,8 +1135,8 @@ function codeToTokens(internal, code, options) {
     if (grammarState)
       setLastGrammarStateToMap(tokens, grammarState);
     const themeColorReplacements = themes.map((t) => resolveColorReplacements(t.theme, options));
-    fg = themes.map((t, idx) => (idx === 0 && defaultColor ? "" : `${cssVariablePrefix + t.color}:`) + (applyColorReplacements(themeRegs[idx].fg, themeColorReplacements[idx]) || "inherit")).join(";");
-    bg = themes.map((t, idx) => (idx === 0 && defaultColor ? "" : `${cssVariablePrefix + t.color}-bg:`) + (applyColorReplacements(themeRegs[idx].bg, themeColorReplacements[idx]) || "inherit")).join(";");
+    fg = mapThemeColors(themes, themeRegs, themeColorReplacements, cssVariablePrefix, defaultColor, "fg");
+    bg = mapThemeColors(themes, themeRegs, themeColorReplacements, cssVariablePrefix, defaultColor, "bg");
     themeName = `shiki-themes ${themeRegs.map((t) => t.name).join(" ")}`;
     rootStyle = defaultColor ? void 0 : [fg, bg].join(";");
   } else if ("theme" in options) {
@@ -1148,6 +1163,25 @@ function codeToTokens(internal, code, options) {
     grammarState
   };
 }
+function mapThemeColors(themes, themeRegs, themeColorReplacements, cssVariablePrefix, defaultColor, property) {
+  return themes.map((t, idx) => {
+    const value = applyColorReplacements(themeRegs[idx][property], themeColorReplacements[idx]) || "inherit";
+    const cssVar = `${cssVariablePrefix + t.color}${property === "bg" ? "-bg" : ""}:${value}`;
+    if (idx === 0 && defaultColor) {
+      if (defaultColor === DEFAULT_COLOR_LIGHT_DARK && themes.length > 1) {
+        const lightIndex = themes.findIndex((t2) => t2.color === "light");
+        const darkIndex = themes.findIndex((t2) => t2.color === "dark");
+        if (lightIndex === -1 || darkIndex === -1)
+          throw new ShikiError$1('When using `defaultColor: "light-dark()"`, you must provide both `light` and `dark` themes');
+        const lightValue = applyColorReplacements(themeRegs[lightIndex][property], themeColorReplacements[lightIndex]) || "inherit";
+        const darkValue = applyColorReplacements(themeRegs[darkIndex][property], themeColorReplacements[darkIndex]) || "inherit";
+        return `light-dark(${lightValue}, ${darkValue});${cssVar}`;
+      }
+      return value;
+    }
+    return cssVar;
+  }).join(";");
+}
 
 function codeToHast(internal, code, options, transformerContext = {
   meta: {},
@@ -1395,8 +1429,8 @@ function mergeAdjacentStyledTokens(tokens) {
         continue;
       }
       const prevToken = newLine[newLine.length - 1];
-      const prevStyle = prevToken.htmlStyle || stringifyTokenStyle(getTokenStyleObject(prevToken));
-      const currentStyle = token.htmlStyle || stringifyTokenStyle(getTokenStyleObject(token));
+      const prevStyle = stringifyTokenStyle(prevToken.htmlStyle || getTokenStyleObject(prevToken));
+      const currentStyle = stringifyTokenStyle(token.htmlStyle || getTokenStyleObject(token));
       const isPrevDecorated = prevToken.fontStyle && (prevToken.fontStyle & FontStyle.Underline || prevToken.fontStyle & FontStyle.Strikethrough);
       const isDecorated = token.fontStyle && (token.fontStyle & FontStyle.Underline || token.fontStyle & FontStyle.Strikethrough);
       if (!isPrevDecorated && !isDecorated && prevStyle === currentStyle) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shikijs/core",
   "type": "module",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "Core of Shiki",
   "author": "Pine Wu <octref@gmail.com>; Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "@shikijs/vscode-textmate": "^10.0.2",
     "@types/hast": "^3.0.4",
     "hast-util-to-html": "^9.0.5",
-    "@shikijs/types": "3.4.1"
+    "@shikijs/types": "3.5.0"
   },
   "scripts": {
     "build": "unbuild",