feat: show and export theme css

[zeevenn]

close

• 增加提取 css 按钮 #1004
• 希望可以增加查看主题的css 代码菜单选项 #875
• 导出css文件 #412

[github-actions]

🎊 PR Preview has been successfully built and deployed to https://doocs-md-preview-pr-1007.surge.sh

[cloudflare-workers-and-pages]

Deploying doocs-md with    Cloudflare Pages

Latest commit:	0e6a674
Status:	✅  Deploy successful!
Preview URL:	https://37ed02de.doocs-md.pages.dev
Branch Preview URL:	https://feat-theme-export.doocs-md.pages.dev

View logs

[M-Kepler]

你好，感谢你提供了导出的功能，但是我发现导出后的css和再网页上看到的样式不太一样

在 vscode 中使用：（在 "markdown.styles" 配置中引用该 css）

网页上：

---

另外，这是我导出的 css，观感上和网站上的差不多

green.css

[zeevenn]

@M-Kepler 可以再提供一个我导出的版本，方便我 diff

[M-Kepler]

@M-Kepler 可以再提供一个我导出的版本，方便我 diff

方案1-merged-theme.css 这个是导出的

[zeevenn]

好的，稍等修复

[zeevenn]

当前问题

内置主题为 JS 对象，需要动态转换为 CSS 内联样式，而自定义样式为 CSS 字符串，需要转换为 JS 对象再和内置主题合并，最终再转换为内联对象。

纯 CSS 主题

• 内置主题及自定义样式定义为 CSS 字符串
• 主题对象合并 -> 字符串拼接
• 动态配置样式（字体、主题色等）通过 CSS 变量
• 切换主题时动态注入 <style> 标签
• 简化 render 渲染逻辑
• 清理代码

伪代码：

export class PureCSSThemeManager {
  private styleElement: HTMLStyleElement | null = null
  
  /**
   * 生成动态配置CSS
   */
  private generateDynamicCSS(config: DynamicConfig): string {
    return `
      :root {
        --md-font-family: ${config.fonts};
        --md-font-size: ${config.size};
        --md-text-indent: ${config.isUseIndent ? '2em' : '0'};
        --md-text-align: ${config.isUseJustify ? 'justify' : 'left'};
        --md-primary-color: ${config.primaryColor};
      }
      
      .md-container {
        font-family: var(--md-font-family);
        font-size: var(--md-font-size);
      }
      
      .md-p {
        text-indent: var(--md-text-indent);
        text-align: var(--md-text-align);
      }
    `
  }
  
  /**
   * 更新主题
   */
  updateTheme(baseThemeCSS: string, customCSS: string, config: DynamicConfig): void {
    const dynamicCSS = this.generateDynamicCSS(config)
    
    // 直接拼接CSS字符串
    const finalCSS = `
      ${baseThemeCSS}
      ${dynamicCSS}
      ${customCSS}
    `
    
    this.injectStyles(finalCSS)
  }
  
  private injectStyles(css: string): void {
    if (this.styleElement) {
      this.styleElement.remove()
    }
    
    this.styleElement = document.createElement('style')
    this.styleElement.id = 'md-pure-css-theme'
    this.styleElement.textContent = css
    document.head.appendChild(this.styleElement)
  }
}

[M-Kepler]

好像导出的css不包含暗色。

这是我在用的：

/* 暗色主题支持 */
/* 支持通过.dark类、VSCode暗色主题和高对比度主题触发 */
.dark,
body.vscode-dark,
body.vscode-high-contrast {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;

  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;

  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;

  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;

  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;

  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;

  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;

  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;

  --blockquote-background: #212121;
}

[zeevenn]

应该是导出的时候我根据 内置主题 key 去合并了，所以丢失了一些内容，需要先重构主题系统，这块可能需要一点时间。

[zeevenn]

• 纯 CSS 主题
  • 内置主题及自定义样式定义为 CSS 字符串
  • 主题对象合并 -> 字符串拼接
  • 动态配置样式（字体、主题色等）通过 CSS 变量
  • 切换主题时动态注入 <style> 标签
  • 简化 render 渲染逻辑
  • 清理代码
• 主题展示与导出（大致框架已完成，需要适配下新主题方案）

@YangFong

[github-actions]

😭 Cloudflare Workers Preview deployment failed.

Please check the workflow run for details.

[github-actions]

🚀 Surge Preview has been successfully deployed!

Preview URL: https://doocs-md-preview-pr-1007.surge.sh

_{Built with commit 68dfb87}