fix(colorized-brackets): fix default color does not work with colorized-brackets (#1082)

Author: oatmealproblem

packages/colorized-brackets/src/colorizeBracketTokens.ts

@@ -1,5 +1,6 @@
 import type { CodeOptionsSingleTheme, CodeOptionsThemes, ThemedToken } from 'shiki'
 import type { TransformerColorizedBracketsOptions } from './types'
+import { ShikiError } from 'shiki'
 import builtInThemes from './themes'
 import { getEmbeddedLang, resolveConfig, shouldIgnoreToken } from './utils'
 
@@ -119,6 +120,15 @@ function assignColorToToken(
       styles[cssProperty] = getColor(themes, themeName, level)
     }
 
+    if (defaultColor === 'light-dark()') {
+      const lightColor = styles[`${cssVariablePrefix}light`]
+      const darkColor = styles[`${cssVariablePrefix}dark`]
+      if (!lightColor || !darkColor) {
+        throw new ShikiError('When using `defaultColor: "light-dark()"`, you must provide both `light` and `dark` themes')
+      }
+      styles.color = `light-dark(${lightColor},${darkColor})`
+    }
+
     token.htmlStyle = styles
   }
 }

packages/colorized-brackets/test/dual-themes.test.ts

@@ -72,6 +72,36 @@ describe('dual themes', async () => {
     expect(htmlStr).toContain('<span style="color:y;--shiki-light:Y">{</span>')
   })
 
+  it('light-dark() default', () => {
+    const htmlStr = highlighter.codeToHtml('{}', {
+      lang,
+      themes: { light: 'light-plus', dark: 'dark-plus' },
+      defaultColor: 'light-dark()',
+      transformers: [
+        transformerColorizedBrackets({
+          themes: {
+            'light-plus': ['Y', 'P', 'B', 'R'],
+            'dark-plus': ['y', 'p', 'b', 'r'],
+          },
+        }),
+      ],
+    })
+    expect(htmlStr).toContain(
+      '<span style="color:light-dark(Y,y);--shiki-light:Y;--shiki-dark:y">{</span>',
+    )
+  })
+
+  it('light-dark() throws error if light and dark themes are not provided', () => {
+    expect(() => highlighter.codeToHtml('{}', {
+      lang,
+      themes: { light: 'light-plus' },
+      defaultColor: 'light-dark()',
+      transformers: [
+        transformerColorizedBrackets(),
+      ],
+    })).throws('When using `defaultColor: "light-dark()"`, you must provide both `light` and `dark` themes')
+  })
+
   it('no default', () => {
     const htmlStr = highlighter.codeToHtml('{}', {
       lang,