refactor: migrate to new <style> theme system

[zeevenn]

close

• 增加提取 css 按钮 #1004
• 希望可以增加查看主题的css 代码菜单选项 #875
• 导出css文件 #412
• 【样式】更换主题实现 & 支持伪元素 #842
• 可否支持更多字体呢和颜色编辑 #1020

使用新主题系统，分离 render 和 theme，使用 css style 注入而非行内样式注入。

[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]

好的，稍等修复

[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]

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

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

[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 c332e2b}

[github-actions]

🚀 Cloudflare Workers Preview has been successfully deployed!

Preview URL: https://md-pr-1007.doocs.workers.dev

_{Built with commit c332e2b}

[github-actions]

🗑️ Cloudflare Workers preview deployment has been cleaned up.