OneLight Theme For Typora

1.概览

Tip

这里有两篇文章使用OneLight主题,可点击查看主题详细效果展示

1. OneLight 、OneLight-Dark
2. 计算机网络

2.如何使用

2.1 下载文件(推荐)

2.2 克隆

Caution

1. 同上找到typora的主题文件夹themes,在这个文件夹下打开一个终端

2. 为了避免克隆到其他分支的无关文件,请一定要使用下面这条命令克隆!!否则你要下载很长时间(项目fork自官方仓库,提交历史包含了gh-pages分支的记录)

   git clone --single-branch https://github.com/caolib/typora-onelight-theme.git

这种方法的优点是比较方便,后续更新只需要git pull命令即可获取最新的提交,缺点是clone会将整个项目的文件下载下来,包括一些不必要的md文件等

3.关于自定义

3.1 文件夹结构

📂 themes # Typora 主题根目录
├── 📂 onelight # OneLight 主题资源目录
│ ├── 📂 fonts # 字体资源目录
│ │ ├── CascadiaCode.woff2 
│ │ └── MiaoZi-GuoZhiTi.woff2 
│ ├── 📂 img # 图片资源目录
│ │ ├── bg.gif 
│ │ ├── ... 
│ └── 📂 style # 样式文件目录
│ ├── blockquote.css # 引用块样式
│ ├── code.css # 代码块样式
│ ├── editor.css # 编辑器样式
│ └── ...
├── onelight-dark.css # OneLight 暗色主题样式文件
├── onelight.css # OneLight 主题的主样式文件
├── onelight.user.css # 用户自定义样式文件(仓库中没有,有需要自己创建,样式优先级高)
└── onelight-dark.user.css # 同上,但是深色主题自定义样式文件

3.2 自定义配置

3.2 风格选择

Important

如何切换风格?

浅色主题修改onelight.css,深色主题修改onelight-dark.css

在文件顶部有类似下面的导入语句,可以选择性注释和取消注释来修改选择对应的风格

// ...exist code
/* 引用块,警告框样式 依次为 原样式 默认*/
/* @import './onelight/style/blockquote/blockquote.css'; */
@import './onelight/style/blockquote/blockquote2.css';
// ...exist code

比如我要切换引用块、警告框样式风格为"原样式",可以这样改,以此类推,其他风格的选择不再赘述

// ...exist code
/* 引用块,警告框样式 依次为 原样式 默认*/
@import './onelight/style/blockquote/blockquote.css';
/* @import './onelight/style/blockquote/blockquote2.css'; */
// ...exist code

3.2.1 标题

3.2.2 列表

Warning

默认风格某些情况下会出现错位

3.2.3 警告框

3.2.4 背景

@import './onelight/style/background/grok.css';
@import './onelight/style/background/grok-gpu.css';

4.关于字体

5.背景图片

Important

背景图片在onelight/img文件夹下,文件夹下有几张准备好的图片,你也可以添加自己的图片(最好使用透明背景的图片),然后在editor.css文件中搜索 bg.gif找到下面代码替换图片名

content {
 background-color: transparent;
 background-image: url('../img/bg.gif');
 background-position: 100% 100%;
 background-repeat: no-repeat;
 background-size: 100px auto;
 transition: background-image .5s ease-in-out, background-size .5s ease-in-out
}

6.其他