新版本(V1.13.4)的修复版:
/*
@settings
name: 【Canvas-熊猫】Canvas 主题配色
id: canvas-schemes-schemes
settings:
-
id: canvas-color-scheme-heading
title: 🎨 配色方案设置
type: heading
level: 1
-
id: canvas-schemes-theme
title: 选择主题颜色方案
type: class-select
allowEmpty: false
default: canvas-schemes-rainbow
options:
-
label: 🟣 Ob 默认
value: canvas-default
-
label: 🌈 经典彩虹
value: canvas-schemes-rainbow
-
label: 🎭 柔和渐变
value: canvas-schemes-soft
-
label: 💼 商务蓝
value: canvas-schemes-business
-
label: 🌿 自然绿
value: canvas-schemes-nature
-
label: 🔴 中国红
value: canvas-schemes-china-red
-
label: 💜 东方紫
value: canvas-schemes-purple
-
label: 📊 顶刊经典
value: canvas-schemes-classic
-
label: 💙 蓝色渐变系
value: canvas-schemes-blue
-
label: 🎨 复古学术风
value: canvas-schemes-vintage
-
label: 💜 浪漫温柔系
value: canvas-schemes-romantic
-
label: 🌸 马卡龙 pastel
value: canvas-schemes-macaron
-
id: canvas-card-gradient-toggle
title: 开启卡片渐变背景
description: 为有颜色的卡片添加渐变背景效果
type: class-toggle
default: true
-
id: canvas-basic-settings
title: 🧱 基础样式设置
type: heading
level: 1
-
id: canvas-card-border-width
title: 卡片边框宽度
type: variable-number-slider
format: px
default: 1
min: 0
max: 10
step: 0.5
-
id: canvas-card-gradient-opacity
title: 卡片渐变背景透明度
description: 开启渐变背景时的透明度 (0.1 - 1.0)
type: variable-number-slider
format:
default: 0.6
min: 0.1
max: 1
step: 0.05
*/
/*! canvas 基本样式调整 (宽度和透明度可在 Style Settings 中配置) */
body {
--canvas-card-border-style: solid;
--canvas-card-border-width: 1px;
--canvas-card-gradient-opacity: 0.6;
}
/* 调整卡片的线宽 */
.canvas-node-container {
border-width: var(--canvas-card-border-width);
border-style: var(--canvas-card-border-style);
}
/* 卡片透明度 */
.canvas-node-group {
background-color: var(--background-primary);
}
.theme-dark .canvas-node-container {
border-width: 4px;
border-style: var(--canvas-card-border-style);
}
.theme-dark .canvas-node.is-themed:not(.canvas-node-group) .canvas-node-content {
background-color: var(--background-primary);
}
/* 有色的卡片的卡片透明度(--canvas-color 已改为 hex) */
.theme-light .canvas-node.is-themed:not(.canvas-node-group) .canvas-node-content {
background-color: color-mix(in srgb,
var(--canvas-color) calc(var(--canvas-card-gradient-opacity) * 100%),
transparent);
}
/* 开启渐变背景时的样式 */
body.canvas-card-gradient-toggle.theme-light .canvas-node.is-themed:not(.canvas-node-group) .canvas-node-content {
background: linear-gradient(135deg,
color-mix(in srgb, var(--canvas-color) calc(var(--canvas-card-gradient-opacity) * 100%), transparent) 0%,
color-mix(in srgb, var(--canvas-color) calc(var(--canvas-card-gradient-opacity) * 50%), transparent) 100%);
}
/* !设置卡片+连线阴影 @202603291145 */
/* https://forum.obsidian.md/t/cssclasses-for-canvas-cards/71865 */
.canvas-edges>g,
.canvas-edges {
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}
.canvas-node-container {
box-shadow:
0 8px 19px -13px rgba(0, 0, 0, 0.56),
0 4px 25px 0 rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.2) !important;
}
/* !设置卡片背景 */
/* 深色模式下的样式 */
.theme-dark {
--canvas-dot-pattern: rgba(255, 255, 255, 0.6);
}
/* 浅色模式下的样式 */
.theme-light {
--canvas-dot-pattern: rgba(0, 0, 0, 0.6);
}
/* !增强拖拽 */
/* 更方便地拖动canvas组/锁定canvas组 */
/* https://forum-zh.obsidian.md/t/topic/42826 */
.canvas-node.canvas-node-group {
pointer-events: auto !important;
}
/* ========================= */
/* !其他优化 */
/* canvas 嵌入的卡片编辑时,隐藏元数据和标题栏 */
.node-insert-event.mod-inside-iframe {
.metadata-container {
display: none !important;
}
.inline-title:not(.markdown-embed-content .inline-title) {
display: none !important;
margin-bottom: 0px;
}
}
/* !设置卡片背景 */
/* ========== 经典彩虹(6色分支标准色) ========== */
/* 参考 彩虹分支配色逻辑:色相均匀分布,饱和度适中 */
body.canvas-schemes-rainbow {
--canvas-color-1: #DC3545;
--canvas-color-2: #FD7E14;
--canvas-color-3: #FFC107;
--canvas-color-4: #28A745;
--canvas-color-5: #007BFF;
--canvas-color-6: #6F42C1;
}
/* ========== 商务蓝(专业/工作汇报) ========== */
body.canvas-schemes-business {
--canvas-color-1: #0D47A1;
--canvas-color-2: #1976D2;
--canvas-color-3: #42A5F5;
--canvas-color-4: #90CAF9;
--canvas-color-5: #1E88E5;
--canvas-color-6: #0097A7;
}
/* ========== 自然绿(学习/知识整理) ========== */
/* 低饱和度,长时间阅读舒适 */
body.canvas-schemes-nature {
--canvas-color-1: #1B5E20;
--canvas-color-2: #2E7D32;
--canvas-color-3: #4CAF50;
--canvas-color-4: #00897B;
--canvas-color-5: #1E88E5;
--canvas-color-6: #512DA8;
}
/* ========== 柔和渐变(创意/灵感收集) ========== */
/* 马卡龙色系,低对比度,视觉柔和 */
body.canvas-schemes-soft {
--canvas-color-1: #C2185B;
--canvas-color-2: #EF6C00;
--canvas-color-3: #F5BE00;
--canvas-color-4: #388E3C;
--canvas-color-5: #1565C0;
--canvas-color-6: #880EB3;
}
/* ========== 🇨🇳 中国红(传统/节日/文化主题) ========== */
/* 配色灵感:故宫红墙 + 鎏金 + 朱砂 + 胭脂,体现东方典雅 */
/* 渐变色系:从深红到亮金的层次感 */
body.canvas-schemes-china-red {
--canvas-color-1: #DE2910;
--canvas-color-2: #B22222;
--canvas-color-3: #8B0000;
--canvas-color-4: #DAA520;
--canvas-color-5: #B8860B;
--canvas-color-6: #FFD700;
}
/* ========== 💜 东方紫(神秘/创意/艺术主题) ========== */
/* 配色灵感:紫禁暮色 + 紫水晶 + 薰衣草,渐变层次丰富 */
body.canvas-schemes-purple.theme-light {
--canvas-color-1: #4B0082;
--canvas-color-2: #663399;
--canvas-color-3: #8A2BE2;
--canvas-color-4: #9966CC;
--canvas-color-5: #BA8FE3;
--canvas-color-6: #DDA0DD;
}
/* ========== 📊 顶刊经典配色(浅色+深色双模式) ========== */
/* 浅色模式 - 柔和学术风 */
body.canvas-schemes-classic {
--canvas-color-1: #DA4644;
--canvas-color-2: #EEB27D;
--canvas-color-3: #E9EAC7;
--canvas-color-4: #C2DCB1;
--canvas-color-5: #DCEFF6;
--canvas-color-6: #FAF2E9;
}
/* ========== 💙 蓝色渐变系(专业/科技) ========== */
/* 从浅蓝到深灰的渐变层次 */
body.canvas-schemes-blue {
--canvas-color-1: #E3ECF3;
--canvas-color-2: #C0E4FC;
--canvas-color-3: #B7D2E3;
--canvas-color-4: #AEC4DC;
--canvas-color-5: #C0E4FC;
--canvas-color-6: #595959;
}
/* ========== 🎨 复古学术风(复古/人文) ========== */
/* 淡紫、米色、橄榄绿、蓝灰、棕色 */
body.canvas-schemes-vintage {
--canvas-color-1: #5C2E1E;
--canvas-color-2: #EEE4DA;
--canvas-color-3: #D0D0EA;
--canvas-color-4: #517947;
--canvas-color-5: #576997;
--canvas-color-6: #D0D0EA;
}
/* ========== 💜 浪漫温柔系(创意/艺术) ========== */
/* 淡紫、薄荷青、粉色、米色、深红 */
body.canvas-schemes-romantic {
--canvas-color-1: #77171C;
--canvas-color-2: #CF989B;
--canvas-color-3: #EEE0D3;
--canvas-color-4: #B3DDD3;
--canvas-color-5: #C2A7D0;
--canvas-color-6: #C2A7D0;
}
/* ========== 🌸 马卡龙 pastel(柔和/可爱) ========== */
/* 超低饱和度的马卡龙色系 */
body.canvas-schemes-macaron {
--canvas-color-1: #f4d4d4;
--canvas-color-2: #f5dfa6;
--canvas-color-3: #ebc878;
--canvas-color-4: #b8d5b8;
--canvas-color-5: #bbd4f0;
--canvas-color-6: #cfb6d3;
}