YaliEditor的主题风格的制作流程

文章目录

YaliEditor的主题风格的制作流程
- YaliEditor介绍
- 夜间模式
- 日间模式
- 主题切换的方法
- YaliEditor的主题风格实现

YaliEditor介绍

YaliEditor支持两种主题风格，一常规的light模式，一种是夜间模式。

YaliEditor是一款轻量级的实时渲染markdown编辑器，支持markdown纯代码模式，SV分屏模式，和IR实时渲染模式。支持图片导出和pdf和html导出的轻量级markdown编辑器。

项目地址WenyaoL/YaliEditor: 一个简易的实时渲染markdown编辑器 (github.com)

夜间模式

日间模式

主题切换的方法

在element-ui中就有主题功能了，让我们来分析一下，element-plus的主题功能是如何制作的。

暗黑模式 | Element Plus (element-plus.org)通过element-plus的方法，可以知道element-plus是通过在html上添加一个class进行主题切换的，其目的是为了引入一个夜间模式的变量表。

<html class="dark"><head></head><body></body>
</html>// main.ts
// 如果只想导入css变量
import 'element-plus/theme-chalk/dark/css-vars.css'

查看一下element-plus/theme-chalk/dark/css-vars.css到底是什么内容，没错他就是一张变量表，定义了各种css变量，通过改变变量是值，从而改变组件的主题颜色

html.dark{color-scheme:dark;--el-color-primary:#409eff;--el-color-primary-light-3:#3375b9;--el-color-primary-light-5:#2a598a;--el-color-primary-light-7:#213d5b;--el-color-primary-light-8:#1d3043;--el-color-primary-light-9:#18222c;--el-color-primary-dark-2:#66b1ff;--el-color-success:#67c23a;--el-color-success-light-3:#4e8e2f;--el-color-success-light-5:#3e6b27;--el-color-success-light-7:#2d481f;--el-color-success-light-8:#25371c;--el-color-success-light-9:#1c2518;--el-color-success-dark-2:#85ce61;--el-color-warning:#e6a23c;--el-color-warning-light-3:#a77730;--el-color-warning-light-5:#7d5b28;--el-color-warning-light-7:#533f20;--el-color-warning-light-8:#3e301c;--el-color-warning-light-9:#292218;--el-color-warning-dark-2:#ebb563;--el-color-danger:#f56c6c;--el-color-danger-light-3:#b25252;--el-color-danger-light-5:#854040;--el-color-danger-light-7:#582e2e;--el-color-danger-light-8:#412626;--el-color-danger-light-9:#2b1d1d;--el-color-danger-dark-2:#f78989;--el-color-error:#f56c6c;--el-color-error-light-3:#b25252;--el-color-error-light-5:#854040;--el-color-error-light-7:#582e2e;--el-color-error-light-8:#412626;--el-color-error-light-9:#2b1d1d;--el-color-error-dark-2:#f78989;--el-color-info:#909399;--el-color-info-light-3:#6b6d71;--el-color-info-light-5:#525457;--el-color-info-light-7:#393a3c;--el-color-info-light-8:#2d2d2f;--el-color-info-light-9:#202121;--el-color-info-dark-2:#a6a9ad;--el-box-shadow:0px 12px 32px 4px rgba(0, 0, 0, 0.36),0px 8px 20px rgba(0, 0, 0, 0.72);--el-box-shadow-light:0px 0px 12px rgba(0, 0, 0, 0.72);--el-box-shadow-lighter:0px 0px 6px rgba(0, 0, 0, 0.72);--el-box-shadow-dark:0px 16px 48px 16px rgba(0, 0, 0, 0.72),0px 12px 32px #000000,0px 8px 16px -8px #000000;--el-bg-color-page:#0a0a0a;--el-bg-color:#141414;--el-bg-color-overlay:#1d1e1f;--el-text-color-primary:#E5EAF3;--el-text-color-regular:#CFD3DC;--el-text-color-secondary:#A3A6AD;--el-text-color-placeholder:#8D9095;--el-text-color-disabled:#6C6E72;--el-border-color-darker:#636466;--el-border-color-dark:#58585B;--el-border-color:#4C4D4F;--el-border-color-light:#414243;--el-border-color-lighter:#363637;--el-border-color-extra-light:#2B2B2C;--el-fill-color-darker:#424243;--el-fill-color-dark:#39393A;--el-fill-color:#303030;--el-fill-color-light:#262727;--el-fill-color-lighter:#1D1D1D;--el-fill-color-extra-light:#191919;--el-fill-color-blank:transparent;--el-mask-color:rgba(0, 0, 0, 0.8);--el-mask-color-extra-light:rgba(0, 0, 0, 0.3)
}
html.dark .el-button{--el-button-disabled-text-color:rgba(255, 255, 255, 0.5)
}
html.dark .el-card{--el-card-bg-color:var(--el-bg-color-overlay)
}
html.dark .el-empty{--el-empty-fill-color-0:var(--el-color-black);--el-empty-fill-color-1:#4b4b52;--el-empty-fill-color-2:#36383d;--el-empty-fill-color-3:#1e1e20;--el-empty-fill-color-4:#262629;--el-empty-fill-color-5:#202124;--el-empty-fill-color-6:#212224;--el-empty-fill-color-7:#1b1c1f;--el-empty-fill-color-8:#1c1d1f;--el-empty-fill-color-9:#18181a
}

可以通过浏览器的开发者工具查看到组件引用的变量，从而通过达到通过添加样式从而切换主题的功能，只需要定义不同的变量表即可，然后再html标签上更改其class属性，就可以做到主题的切换功能。

YaliEditor的主题风格实现

现在我们只需要实现定义一种变量表，然后在YaliEditor的个个主键中引用该变量表的变量，当我们需要切换主题的时候，只需要更改HTML标签的class即可。

下面的为夜间模式下定义的CSS变量，通过CSS的var()方法即可使用上下文中的变量，十分方便管理和做主题切换。

html.dark{--yali-background-color:#333333;--yali-text-color:#CFD3DC;--yali-md-focus-before-color:#C8C8C8;--yali-selection-color:#CFD3DC;--yali-selection-background-color:#4183C4;--yali-pre-background-color:#282C34;--yali-blockquote-color:#777777;--yali-blockquote-border-color:#409EFF;--yali-font-before-color:#C7C5C5;--yali-code-font-color:#e83e8c;--yali-code-font-background-color:#424243;--yali-code-font-border-color:#636466;--yali-bold-font-color:#e83e8c;--yali-underline-font-color:#e83e8c;--yali-italic-font-color:#e83e8c;--yali-deleteline-font-color:#e83e8c;--yali-outline-item-hover-background-color:#262727;--yali-scrollbar-thumb-background-color:#282C34;--yali-scrollbar-track-background-color:#333333;
}