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;
}
posted @   鸭梨的药丸哥  阅读(20)  评论(0)  编辑  收藏  举报  
相关博文：
· 制作一个实时渲染的markdown编辑器YaliEditor
· 一款轻量级的markdown编辑器
· 超越环境边界：打造无视执行环境的在线编辑器组件
· 也及夜间模式样式
· 网页主题切换的实现方案
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示