Improve export preview mode CSS variable value filling (#15110)

* 改进 CSS 变量替换为实际值

* Chrome、Edge、SiYuan 桌面端不需要替换 CSS 变量

* 外观模式或主题改变之后，重新加载所有将 CSS 变量替换为实际值的导出预览

* 代码块之间没有间距

* 去掉一个空格

* 使用 ua.Mobile() 判断移动设备

* 重构

kernel/model/theme.go

@@ -31,8 +31,18 @@ import (
 	"github.com/vanng822/css"
 )
 
+// 将文档中的 CSS 变量替换为具体的主题样式值
 func fillThemeStyleVar(tree *parse.Tree) {
-	themeStyles := getThemeStyleVar(Conf.Appearance.ThemeLight)
+	if nil == tree || nil == tree.Root {
+		return
+	}
+
+	var themeStyles map[string]string
+	if 1 == Conf.Appearance.Mode {
+		themeStyles = getThemeStyleVar(Conf.Appearance.ThemeDark, true)
+	} else {
+		themeStyles = getThemeStyleVar(Conf.Appearance.ThemeLight, false)
+	}
 	if 1 > len(themeStyles) {
 		return
 	}
@@ -42,6 +52,7 @@ func fillThemeStyleVar(tree *parse.Tree) {
 			return ast.WalkContinue
 		}
 
+		// 遍历节点的 Kramdown IAL (Inline Attribute List) 属性
 		for _, ial := range n.KramdownIAL {
 			if "style" != ial[0] {
 				continue
@@ -54,13 +65,12 @@ func fillThemeStyleVar(tree *parse.Tree) {
 				for style, name := range styles {
 					buf.WriteString(style)
 					buf.WriteString(": ")
-					value := themeStyles[name]
-					if strings.Contains(value, "var(") {
-						name = gulu.Str.SubStringBetween(value, "(", ")")
-						value = themeStyles[name]
-					}
+
+					// 解析嵌套的 CSS 变量
+					value := resolveNestedCSSVar(themeStyles, name)
+
 					if "" == value {
-						// 回退为变量
+						// 回退为原始 var() 形式
 						buf.WriteString("var(")
 						buf.WriteString(name)
 						buf.WriteString(")")
@@ -78,12 +88,48 @@ func fillThemeStyleVar(tree *parse.Tree) {
 	})
 }
 
+// 递归解析嵌套的 CSS 变量
+func resolveNestedCSSVar(themeStyles map[string]string, varName string) string {
+	visited := make(map[string]bool) // 循环引用检测
+	maxDepth := 10                   // 防止无限嵌套
+
+	currentName := varName
+	for depth := 0; depth < maxDepth; depth++ {
+		if visited[currentName] {
+			return ""
+		}
+		visited[currentName] = true
+
+		value, exists := themeStyles[currentName]
+		if !exists {
+			return ""
+		}
+
+		// 如果不包含嵌套变量，直接返回最终值
+		if !strings.Contains(value, "var(") {
+			return value
+		}
+
+		// 提取嵌套变量名：var(--variable-name) -> --variable-name
+		nestedVarName := gulu.Str.SubStringBetween(value, "(", ")")
+		if "" == nestedVarName {
+			return value
+		}
+
+		currentName = nestedVarName
+	}
+
+	return ""
+}
+
+// 从 CSS 选择器值中解析出样式属性和对应的 CSS 变量名
 func getStyleVarName(value *css.CSSValue) (ret map[string]string) {
 	ret = map[string]string{}
 
 	var start, end int
 	var style, name string
 	for i, t := range value.Tokens {
+		// 获取样式属性名
 		if scanner.TokenIdent == t.Type && 0 == start {
 			style = strings.TrimSpace(t.Value)
 			continue
@@ -96,6 +142,7 @@ func getStyleVarName(value *css.CSSValue) (ret map[string]string) {
 		if scanner.TokenChar == t.Type && ")" == t.Value {
 			end = i
 
+			// 提取 var() 中的变量名
 			if 0 < start && 0 < end {
 				for _, tt := range value.Tokens[start+1 : end] {
 					name += tt.Value
@@ -110,23 +157,78 @@ func getStyleVarName(value *css.CSSValue) (ret map[string]string) {
 	return
 }
 
-func getThemeStyleVar(theme string) (ret map[string]string) {
+// 获取主题的样式变量映射表
+func getThemeStyleVar(theme string, isDarkMode bool) (ret map[string]string) {
 	ret = map[string]string{}
 
-	data, err := os.ReadFile(filepath.Join(util.ThemesPath, theme, "theme.css"))
-	if err != nil {
-		logging.LogErrorf("read theme [%s] css file failed: %s", theme, err)
-		return
-	}
+	var cssContent string
 
-	styleSheet := css.Parse(string(data))
-	for _, rule := range styleSheet.GetCSSRuleList() {
-		for _, style := range rule.Style.Styles {
-			ret[style.Property] = strings.TrimSpace(style.Value.Text())
-			// 如果两个短横线开头 CSS 解析器有问题，--b3-theme-primary: #3575f0; 会被解析为 -b3-theme-primary:- #3575f0
-			// 这里两种解析都放到结果中
-			ret["-"+style.Property] = strings.TrimSpace(strings.TrimPrefix(style.Value.Text(), "-"))
+	// 第三方主题可能缺少基础变量，先加载默认主题作为基础
+	defaultTheme := map[bool]string{false: "daylight", true: "midnight"}[isDarkMode]
+	if theme != defaultTheme {
+		defaultData, err := os.ReadFile(filepath.Join(util.ThemesPath, defaultTheme, "theme.css"))
+		if err != nil {
+			logging.LogErrorf("read default theme [%s] css file failed: %s", defaultTheme, err)
+		} else {
+			cssContent = string(defaultData) + "\n"
 		}
 	}
-	return
+
+	// 拼接主题 CSS，后面的规则覆盖前面的规则
+	userData, err := os.ReadFile(filepath.Join(util.ThemesPath, theme, "theme.css"))
+	if err != nil {
+		logging.LogErrorf("read theme [%s] css file failed: %s", theme, err)
+		return ret
+	}
+	cssContent += string(userData)
+
+	// 解析拼接后的完整 CSS 内容
+	styleSheet := css.Parse(cssContent)
+	stylePriorities := map[string]int{}
+	currentMode := map[bool]string{false: "light", true: "dark"}[isDarkMode]
+	for _, rule := range styleSheet.GetCSSRuleList() {
+		priority := getSelectorPriority(rule.Style.Selector.Text(), currentMode)
+		for _, style := range rule.Style.Styles {
+			propName := style.Property
+			propValue := strings.TrimSpace(style.Value.Text())
+
+			if existingPriority, exists := stylePriorities[propName]; !exists || priority >= existingPriority {
+				ret[propName] = propValue
+				stylePriorities[propName] = priority
+			}
+
+			// 如果两个短横线开头 CSS 解析器有问题，--b3-theme-primary: #3575f0; 会被解析为 -b3-theme-primary:- #3575f0
+			// 这里两种解析都放到结果中
+			bugFixPropName := "-" + propName
+			bugFixPropValue := strings.TrimSpace(strings.TrimPrefix(propValue, "-"))
+			if existingPriority, exists := stylePriorities[bugFixPropName]; !exists || priority >= existingPriority {
+				ret[bugFixPropName] = bugFixPropValue
+				stylePriorities[bugFixPropName] = priority
+			}
+		}
+	}
+	return ret
+}
+
+// 粗略计算 CSS 选择器的优先级
+func getSelectorPriority(selector, currentMode string) int {
+	selector = strings.TrimSpace(strings.ToLower(selector))
+
+	modeSelectors := []string{
+		"[data-theme-mode=\"" + currentMode + "\"]",
+		"[data-theme-mode='" + currentMode + "']",
+		"[data-theme-mode=" + currentMode + "]",
+	}
+
+	for _, modeSelector := range modeSelectors {
+		if strings.Contains(selector, modeSelector) {
+			if strings.Contains(selector, ":root") || strings.Contains(selector, "html") {
+				return 2
+			} else {
+				return 1
+			}
+		}
+	}
+
+	return 0
 }