告别单调!10 套高颜值 Obsidian Canvas 配色方案分享

新版本(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;
}