自用思源笔记CSS配色记录

北の亮色主题配色—Plus

:root[data-theme-mode=light] {
    /* === 更深的文字颜色 === */
    --b3-font-color1: #FF7043 !important;  /* 深珊瑚红 */
    --b3-font-color2: #EC9AAB !important;  /* 深粉紫 */
    --b3-font-color3: #2979FF !important;  /* 深天蓝 */
    --b3-font-color4: #5CA85C !important;  /* 深翠绿 */
    --b3-font-color5: #FFB74D !important;  /* 深金黄 */
    --b3-font-color6: #1DE9B6 !important;  /* 深青绿色 */
    --b3-font-color7: #D81B60 !important;  /* 深番茄红 */
    --b3-font-color8: #F57C00 !important;  /* 深橙色 */
    --b3-font-color9: #9E9E9E !important;  /* 深银灰 */
    --b3-font-color10: #00ACC1 !important; /* 深青蓝 */
    --b3-font-color11: #039BE5 !important; /* 深浅天蓝 */
    --b3-font-color12: #E65100 !important; /* 深暖橘 */
    --b3-font-color13: #512DA8 !important; /* 深淡紫色 */

    /* === 更深的背景颜色 === */
    --b3-font-background1: #FFE0E0 !important; /* 较深的珊瑚红背景 */
    --b3-font-background2: #F8BBD0 !important; /* 较深的粉紫背景 */
    --b3-font-background3: #BBDEFB !important; /* 较深的天蓝背景 */
    --b3-font-background4: #C8E6C9 !important; /* 较深的翠绿背景 */
    --b3-font-background5: #FFF8E1 !important; /* 较深的金黄背景 */
    --b3-font-background6: #B2EBF2 !important; /* 较深的青绿色背景 */
    --b3-font-background7: #FFCDD2 !important; /* 较深的番茄红背景 */
    --b3-font-background8: #FFE0B2 !important; /* 较深的橙色背景 */
    --b3-font-background9: #F5F5F5 !important; /* 较深的银灰背景 */
    --b3-font-background10: #B2DFDB !important; /* 较深的青蓝背景 */
    --b3-font-background11: #90CAF9 !important; /* 较深的浅天蓝背景 */
    --b3-font-background12: #FFCC80 !important; /* 较深的暖橘背景 */
    --b3-font-background13: #D1C4E9 !important; /* 较深的淡紫色背景 */
}

北の暗色主题配色—Plus

:root[data-theme-mode=dark] {
    /* === 更加明亮的文字颜色 === */
    --b3-font-color1: #FFB0B0 !important;   /* 深珊瑚红 → 提升至柔和粉红 */
    --b3-font-color2: #F8D6E8 !important;   /* 柔和粉 → 更为柔和明亮 */
    --b3-font-color3: #B3D9FF !important;   /* 加深蓝 → 更加明亮但不过分刺眼 */
    --b3-font-color4: #A0E0C8 !important;   /* 加深翠绿 → 清新且明亮 */
    --b3-font-color5: #FFF073 !important;   /* 明亮黄 → 增强活力与亮度 */
    --b3-font-color6: #B3FFE0 !important;   /* 青绿色 → 更加清新亮丽 */
    --b3-font-color7: #FF8066 !important;   /* 番茄红 → 更鲜艳但不过于强烈 */
    --b3-font-color8: #FFCC80 !important;   /* 稳重橙 → 更温暖且明亮 */
    --b3-font-color9: #F2CFCF !important;   /* 红灰 → 轻微提亮，增加舒适感 */
    --b3-font-color10: #80FFE0 !important;  /* 青蓝 → 更加鲜亮 */
    --b3-font-color11: #B3D4FF !important;  /* 天空蓝 → 更加明亮 */
    --b3-font-color12: #FFC066 !important;  /* 橙色 → 更加生动且明亮 */
    --b3-font-color13: #E0C0FF !important;  /* 紫色 → 更加明亮 */

    /* === 对应背景颜色（保持适中对比度）=== */
    --b3-font-background1: #5A3F3F !important;  /* 对应深珊瑚红的背景色 → 更加柔和 */
    --b3-font-background2: #62545A !important;  /* 对应柔和粉的背景色 → 温暖一点 */
    --b3-font-background3: #3C5464 !important;  /* 对应加深蓝的背景色 → 稍微明亮 */
    --b3-font-background4: #465D54 !important;  /* 对应加深翠绿的背景色 → 更加清新 */
    --b3-font-background5: #645D2A !important;  /* 对应明亮黄的背景色 → 提升亮度 */
    --b3-font-background6: #4A625C !important;  /* 对应青绿色的背景色 → 更为清爽 */
    --b3-font-background7: #7F3C3C !important;  /* 对应番茄红的背景色 → 热情增加 */
    --b3-font-background8: #655321 !important;  /* 对应稳重橙的背景色 → 更加生动 */
    --b3-font-background9: #5E4E4E !important;  /* 对应红灰的背景色 → 轻微提亮 */
    --b3-font-background10: #3F5F5A !important; /* 对应青蓝的背景色 → 更加鲜明 */
    --b3-font-background11: #3D4A6A !important; /* 对应天空蓝的背景色 → 更加明亮 */
    --b3-font-background12: #6C4800 !important; /* 对应橙色的背景色 → 提升亮度 */
    --b3-font-background13: #52386A !important; /* 对应紫色的背景色 → 更加明亮 */
}

暗色主题引述块

:root[data-theme-mode=dark] {
/* 紧凑且优雅的引述块样式 */
.b3-typography blockquote,
.b3-typography .bq,
.protyle-wysiwyg blockquote,
.protyle-wysiwyg .bq {
    position: relative;
    margin: 8px 0; /* 减少上下外边距 */
    padding: 6px 10px; /* 更紧凑的内边距 */
    padding-left: 6px; /* 稍微增加左侧内边距，但保持紧凑 */
    /* border-left: 4px solid #5e97b0; */ /* 柔和的蓝色边框 - 已移除 */
    background-color: #4a4a4a7d; /* 修改为稍微深一点的灰色 - 仅适用于亮色模式 */
    border-radius: 6px; /* 小圆角处理 */
    color: var(--b3-theme-on-surface-lighter); /* 使用主题变量定义文字颜色 */
    font-size: 0.98em; /* 文字大小略微缩小 */
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

/* 悬停时的变化 */
.b3-typography blockquote:hover,
.protyle-wysiwyg blockquote:hover {
    background-color: #dcdcdc; /* 在悬停时稍微加深灰色背景 - 仅适用于亮色模式 */
}

/* 移除所有默认 ::before 伪元素干扰 */
.b3-typography blockquote::before,
.b3-typography .bq::before,
.protyle-wysiwyg blockquote::before,
.protyle-wysiwyg .bq::before {
    display: none;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .b3-typography blockquote,
    .protyle-wysiwyg blockquote {
        background-color: #3a3a3a; /* 深色模式下使用更深邃的背景色 */
        /* border-left-color: #7ab8db; */ /* 浅蓝灰 - 已移除 */
        color: #d3eaf2;
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(255, 255, 255, 0.05);
    }

    .b3-typography blockquote:hover,
    .protyle-wysiwyg blockquote:hover {
        background-color: #4a4a4a; /* 悬停时稍微加深背景色 - 仅适用于暗色模式 */
    }
}

明亮主题引述块

:root[data-theme-mode=light] {
/* 紧凑且优雅的引述块样式 */
.b3-typography blockquote,
.b3-typography .bq,
.protyle-wysiwyg blockquote,
.protyle-wysiwyg .bq {
    position: relative;
    margin: 8px 0; /* 减少上下外边距 */
    padding: 6px 10px; /* 更紧凑的内边距 */
    padding-left: 6px; /* 稍微增加左侧内边距，但保持紧凑 */
    /* border-left: 4px solid #5e97b0; */ /* 柔和的蓝色边框 - 已移除 */
    background-color: #ebebeb; /* 修改为稍微深一点的灰色 - 仅适用于亮色模式 */
    border-radius: 6px; /* 小圆角处理 */
    color: var(--b3-theme-on-surface-lighter); /* 使用主题变量定义文字颜色 */
    font-size: 0.98em; /* 文字大小略微缩小 */
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

/* 悬停时的变化 */
.b3-typography blockquote:hover,
.protyle-wysiwyg blockquote:hover {
    background-color: #dcdcdc; /* 在悬停时稍微加深灰色背景 - 仅适用于亮色模式 */
}

/* 移除所有默认 ::before 伪元素干扰 */
.b3-typography blockquote::before,
.b3-typography .bq::before,
.protyle-wysiwyg blockquote::before,
.protyle-wysiwyg .bq::before {
    display: none;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .b3-typography blockquote,
    .protyle-wysiwyg blockquote {
        background-color: #3a3a3a; /* 深色模式下使用更深邃的背景色 */
        /* border-left-color: #7ab8db; */ /* 浅蓝灰 - 已移除 */
        color: #d3eaf2;
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(255, 255, 255, 0.05);
    }

    .b3-typography blockquote:hover,
    .protyle-wysiwyg blockquote:hover {
        background-color: #4a4a4a; /* 悬停时稍微加深背景色 - 仅适用于暗色模式 */
    }
}

}

北の亮色主题配色

:root[data-theme-mode=light] {
    /* 自定义文字颜色 */
    --b3-font-color1: #FF5722 !important;  /* 温暖且柔和的珊瑚红 */
    --b3-font-color2: #F48FB1 !important;  /* 甜美而不过于甜腻的粉紫 */
    --b3-font-color3: #448AFF !important;  /* 鲜艳而不刺眼的天蓝 */
    --b3-font-color4: #66BB6A !important;  /* 自然清新的翠绿 */
    --b3-font-color5: #FFD740 !important;  /* 明亮温暖的金黄 */
    --b3-font-color6: #26C6DA !important;  /* 清新亮丽的青绿色 */
    --b3-font-color7: #E91E63 !important;  /* 强烈而热情的番茄红 */
    --b3-font-color8: #FF9800 !important;  /* 充满活力的橙色 */
    --b3-font-color9: #BDBDBD !important;  /* 中性低调的银灰 */
    --b3-font-color10: #00ACC1 !important; /* 深邃清澈的青蓝 */
    --b3-font-color11: #03A9F4 !important; /* 清爽宜人的浅天蓝 */
    --b3-font-color12: #FF0000 !important; /* 饱满而生动的暖橘 */
    --b3-font-color13: #673AB7 !important; /* 神秘深邃的淡紫色 */

    /* 自定义背景颜色 */
    --b3-font-background1: #FFF0F0 !important; /* 轻柔的珊瑚红背景 */
    --b3-font-background2: #FCE4EC !important; /* 甜美柔和的粉紫背景 */
    --b3-font-background3: #E3F2FD !important; /* 清新舒适的天蓝背景 */
    --b3-font-background4: #E8F5E9 !important; /* 清新自然的翠绿背景 */
    --b3-font-background5: #FFFDE7 !important; /* 明亮轻快的金黄背景 */
    --b3-font-background6: #E0F7FA !important; /* 清新明亮的青绿色背景 */
    --b3-font-background7: #FFEBEE !important; /* 温暖柔和的番茄红背景 */
    --b3-font-background8: #FFF3E0 !important; /* 温暖活力的橙色背景 */
    --b3-font-background9: #FAFAFA !important; /* 中性平和的银灰背景 */
    --b3-font-background10: #B2EBF2 !important; /* 清澈明亮的青蓝背景 */
    --b3-font-background11: #BBDEFB !important; /* 清新宜人的浅天蓝背景 */
    --b3-font-background12: #FFF3E0 !important; /* 温暖明快的暖橘背景 */
    --b3-font-background13: #EDE7F6 !important; /* 平静神秘的淡紫色背景 */
}

北の暗色主题配色

:root[data-theme-mode=dark] {
    /* 自定义文字颜色 */
    --b3-font-color1: #F08080 !important;   /* 深珊瑚红 */
    --b3-font-color2: #E8A8D0 !important;   /* 柔和粉 */
    --b3-font-color3: #7BADFF !important;   /* 加深蓝 */
    --b3-font-color4: #55B594 !important;   /* 加深翠绿 */
    --b3-font-color5: #E8D538 !important;   /* 明亮黄 */
    --b3-font-color6: #6ED3B8 !important;   /* 青绿色 */
    --b3-font-color7: #FF4B36 !important;   /* 番茄红 */
    --b3-font-color8: #F2B866 !important;   /* 稳重橙 */
    --b3-font-color9: #E0A8A8 !important;   /* 红灰 */
    --b3-font-color10: #3FC9B9 !important;  /* 青蓝 */
    --b3-font-color11: #6EA7F0 !important;  /* 天空蓝 */
    --b3-font-color12: #E09000 !important;  /* 橙色 */
    --b3-font-color13: #c09effdb !important;  /* 紫色 */


    /* 自定义背景颜色 */
    --b3-font-background1: #3A1F1F !important;  /* 对应深珊瑚红的背景色 */
    --b3-font-background2: #42343A !important;  /* 对应柔和粉的背景色 */
    --b3-font-background3: #1C3144 !important;  /* 对应加深蓝的背景色 */
    --b3-font-background4: #263D34 !important;  /* 对应加深翠绿的背景色 */
    --b3-font-background5: #443D12 !important;  /* 对应明亮黄的背景色 */
    --b3-font-background6: #2A423C !important;  /* 对应青绿色的背景色 */
    --b3-font-background7: #4F1C1C !important;  /* 对应番茄红的背景色 */
    --b3-font-background8: #453311 !important;  /* 对应稳重橙的背景色 */
    --b3-font-background9: #3E2E2E !important;  /* 对应红灰的背景色 */
    --b3-font-background10: #1F3F3A !important; /* 对应青蓝的背景色 */
    --b3-font-background11: #22304A !important; /* 对应天空蓝的背景色 */
    --b3-font-background12: #4C3000 !important; /* 对应橙色的背景色 */
    --b3-font-background13: #32204A !important; /* 对应紫色的背景色 */
}

‍

posted @ 2025-08-04 13:55  恨水长秋  阅读(79)  评论(0)    收藏  举报