refactor: migrate to new theme system (#1007)

Author: zeevenn

apps/vscode/src/extension.ts

@@ -1,6 +1,7 @@
+import type { ThemeName } from '@md/shared'
 import { initRenderer } from '@md/core/renderer'
-import { customCssWithTemplate, customizeTheme, modifyHtmlContent } from '@md/core/utils'
-import { css2json, themeMap } from '@md/shared'
+import { generateCSSVariables, modifyHtmlContent } from '@md/core/utils'
+import { baseCSSContent, themeMap } from '@md/shared'
 import * as vscode from 'vscode'
 import { css } from './css'
 import { MarkdownTreeDataProvider } from './treeDataProvider'
@@ -17,7 +18,7 @@ export function activate(context: vscode.ExtensionContext) {
     vscode.commands.registerCommand(`markdown.setFontSize`, (size: string) => {
       treeDataProvider.updateFontSize(size)
     }),
-    vscode.commands.registerCommand(`markdown.setTheme`, (theme: keyof typeof themeMap) => {
+    vscode.commands.registerCommand(`markdown.setTheme`, (theme: ThemeName) => {
       treeDataProvider.updateTheme(theme)
     }),
     vscode.commands.registerCommand(`markdown.setPrimaryColor`, (color: string) => {
@@ -67,27 +68,30 @@ export function activate(context: vscode.ExtensionContext) {
     function updateWebview() {
       if (!editor)
         return
+
+      // 使用新主题系统
       const renderer = initRenderer({
-        theme: customCssWithTemplate(
-          // TODO
-          css2json(``),
-          treeDataProvider.getCurrentPrimaryColor(),
-          customizeTheme(themeMap[treeDataProvider.getCurrentTheme()], {
-            fontSize: treeDataProvider.getCurrentFontSizeNumber(),
-            color: treeDataProvider.getCurrentPrimaryColor(),
-          }),
-        ),
-        fonts: treeDataProvider.getCurrentFontFamily(),
-        size: treeDataProvider.getCurrentFontSize(),
-        isUseIndent: false,
-        isUseJustify: false,
         countStatus: treeDataProvider.getCurrentCountStatus(),
         isMacCodeBlock: treeDataProvider.getCurrentMacCodeBlock(),
         legend: `none`,
       })
+
       const markdownContent = editor.document.getText()
       const html = modifyHtmlContent(markdownContent, renderer)
-      panel.webview.html = wrapHtmlTag(html, css)
+
+      // 生成主题 CSS
+      const variables = generateCSSVariables({
+        primaryColor: treeDataProvider.getCurrentPrimaryColor(),
+        fontFamily: treeDataProvider.getCurrentFontFamily(),
+        fontSize: treeDataProvider.getCurrentFontSize(),
+        isUseIndent: false,
+        isUseJustify: false,
+      })
+
+      const themeCSS = themeMap[treeDataProvider.getCurrentTheme() as ThemeName]
+      const completeCss = `${variables}\n\n${baseCSSContent}\n\n${themeCSS}\n\n${css}`
+
+      panel.webview.html = wrapHtmlTag(html, completeCss)
     }
 
     // render first webview

apps/vscode/src/treeDataProvider.ts

@@ -1,12 +1,12 @@
-import type { themeMap } from '@md/shared/configs'
+import type { ThemeName } from '@md/shared/configs'
 import * as vscode from 'vscode'
 import { colorOptions, fontFamilyOptions, fontSizeOptions, themeOptions } from './styleChoices'
 
 export class MarkdownTreeDataProvider implements vscode.TreeDataProvider<vscode.TreeItem> {
   private _onDidChangeTreeData: vscode.EventEmitter<vscode.TreeItem | undefined> = new vscode.EventEmitter<vscode.TreeItem | undefined>()
   readonly onDidChangeTreeData: vscode.Event<vscode.TreeItem | undefined> = this._onDidChangeTreeData.event
   private currentFontSize: string
-  private currentTheme: keyof typeof themeMap
+  private currentTheme: ThemeName
   private currentPrimaryColor: string
   private currentFontFamily: string
   private countStatus: boolean
@@ -157,7 +157,7 @@ export class MarkdownTreeDataProvider implements vscode.TreeDataProvider<vscode.
     this._onDidChangeTreeData.fire(undefined)
   }
 
-  updateTheme(theme: keyof typeof themeMap) {
+  updateTheme(theme: ThemeName) {
     this.currentTheme = theme
     this.context.workspaceState.update(`markdownPreview.theme`, theme)
     this._onDidChangeTreeData.fire(undefined)
@@ -183,7 +183,7 @@ export class MarkdownTreeDataProvider implements vscode.TreeDataProvider<vscode.
     return Number(this.currentFontSize.replace(`px`, ``))
   }
 
-  getCurrentTheme(): keyof typeof themeMap {
+  getCurrentTheme(): ThemeName {
     return this.currentTheme
   }
 

apps/web/package.json

@@ -46,7 +46,6 @@
     "core-js": "^3.46.0",
     "cos-js-sdk-v5": "^1.8.7",
     "crypto-js": "^4.2.0",
-    "csstype": "^3.1.3",
     "es-toolkit": "^1.41.0",
     "front-matter": "^4.0.2",
     "highlight.js": "^11.11.1",

apps/web/src/assets/example/markdown.md

@@ -29,7 +29,7 @@ Markdown 中的段落就是一行接一行的文本。要创建新段落，只
 ### 3. 字体样式：强调你的文字
 
 - **粗体**：用两个星号或下划线包裹文字，如 `**粗体**` 或 `__粗体__`。
-- _斜体_：用一个星号或下划线包裹文字，如 `*斜体*` 或 `_斜体_`。
+- _斜体_：用一个星号包裹文字，如 `*斜体*`。
 - ~~删除线~~：用两个波浪线包裹文字，如 `~~删除线~~`。
 - ==高亮==：用两个等号包裹文字，如 `==高亮==`。
 - ++下划线++：用两个加号包裹文字，如 `++下划线++`。