Skip to content

配置主题

Jump to bottom
sunsonliu edited this page Aug 30, 2024 · 4 revisions

注：只在v0.8.47及以上版本中支持

简单例子

new Cherry({
  id: 'markdown-container', 
  value: '## hello world', 
  // 定义主题的作用范围，相同nameSpace的实例共享主题配置
  nameSpace: 'cherry',
  themeSettings: {
    // 主题列表，用于切换主题
    themeList: [
        { className: 'default', label: '默认' },
        { className: 'dark', label: '黑' },
        { className: 'light', label: '白' },
        { className: 'green', label: '绿' },
        { className: 'red', label: '粉' },
        { className: 'violet', label: '紫' },
        { className: 'blue', label: '蓝' },
    ],
    // 目前应用的主题
    mainTheme: 'light',
    // 目前应用的代码块主题
    codeBlockTheme: 'default',
  },
  toolbars: {
      // 配置切换主题的按钮到顶部工具栏里
      toolbar: ['bold','italic','size','|','color','header','|','theme'],
      // 配置切换主题的按钮到侧边栏里
      sidebar: ['mobilePreview', 'copy', 'theme'],
  }
});

效果如下： image

自带的主题

  • default
  • dark
  • light
  • green
  • red
  • violet
  • blue

扩展主题

要扩展主题，首先需要先了解cherry主题的机制

主题机制

一言以蔽之：主题就是通过外层容器的一个class来控制编辑器的样式展示 image

所以要扩展主题，只需要实现一套.theme__XXX下的样式就好了

具体做法

概括来讲一共分三步：

  • 复制模板
  • 修改成新样式
  • 配置到主题候选项中

复制模板：

在/src/sass/themes/目录下选一个样式文件（如green.scss，但不要选default.scss），复制成新样式文件

修改成新样式：

新样式文件有四部分组成：

  • 颜色变量定义
  • 通用变量定义
  • 编辑器样式
  • 预览区样式

如果只是需要修改颜色，只需要对样式文件里的颜色值进行修改就好了，如修改成下面的样子：

$ORANGE0: #fff4e6;
$ORANGE1: #ffe8cc;
$ORANGE2: #ffd8a8;
$ORANGE3: #ffc078;
$ORANGE4: #ffa94d;
$ORANGE5: #ff922b;
$ORANGE6: #fd7e14;
$ORANGE7: #f76707;
$ORANGE8: #e8590c;
$ORANGE9: #d9480f;

/** 工具栏样式 */
$toolbarBg: #FFF;
$toolbarBtnColor: $ORANGE9;
$toolbarBtnBgHover: $ORANGE5;
$toolbarBtnHoverColor: $ORANGE0;
$toolbarColorItemHoverBorderColor: $ORANGE9;
$sidebarShadow: $shadow;
/** 编辑区域样式 */
$editorBg: #FFF;
$editorColor: $ORANGE9;
$editorSelectedBg: $ORANGE2;
$editorUrlBg: $ORANGE0;
$editorCursorColor: $ORANGE9;
$editorImportantColor: $ORANGE7;
$editorCodeColor: $ORANGE6;
/** 预览区域样式 */
$previewBg: $ORANGE0;
$previewMobileBgColor: #FFF;
/** markdown样式 */
$mdColor: $editorColor;
$mdHeaderColor: $editorImportantColor;
$mdLineColor: $ORANGE8;
$mdAColor: $editorCodeColor;
$mdAHoverColor: $editorImportantColor;
$mdInlineCodeColor: $editorCodeColor;
$mdInlineCodeBg: $ORANGE1;
$mdBlockquoteBg: $ORANGE1;
/** 编辑器样式 */
.cherry.theme__orange {
    ...
    ...
}
/** 预览区域样式 */
.cherry-markdown.theme__orange {
    ...
    ...
}

配置到主题候选项中：

首先要引入新的样式文件

然后在config中修改主题的候选值，如下：

new Cherry({
  id: 'markdown-container', 
  value: '## hello world', 
  // 定义主题的作用范围，相同nameSpace的实例共享主题配置
  nameSpace: 'cherry',
  themeSettings: {
    // 主题列表，用于切换主题
    themeList: [
        { className: 'dark', label: '黑' },
        { className: 'light', label: '白' },
        { className: 'orange', label: '橘里橘气' },
    ],
    // 目前应用的主题
    mainTheme: 'orange',
  },
  toolbars: {
      // 配置切换主题的按钮到顶部工具栏里
      toolbar: ['bold','italic','size','|','color','header','|','theme'],
      // 配置切换主题的按钮到侧边栏里
      sidebar: ['mobilePreview', 'copy', 'theme'],
  }
});

效果如下： image

主题配置持久化方案

  • 第一步：配置切换主题的事件回调，这里
  • 第二步：把切换主题/代码块主题的工具栏配置出来
  • 第三步：当用户切换主题/代码块主题时，把目标语言持久化到本地或服务端
  • 第四步：新页面重新实例化cherry时，从持久化里拿到目标主题放进配置项里
Clone this wiki locally