OneLight Theme For Typora

简体中文 | English

1.概览

Tip

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

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

---

展开查看更多截图

---

2.如何使用

下面两种办法视自己方便程度选一种即可

2.1 下载文件

1. 下载主题文件压缩包
2. 在typora中选择 文件 → 偏好设置 → 外观 → 打开主题文件夹
3. 将下载的压缩包解压，将css文件和文件夹粘贴到typora的主题文件夹themes中
4. 重启Typora然后在菜单栏切换主题，大功告成

这种方法的优点是下载的文件更少，只含有主题必须的文件，缺点是比较麻烦，如果后续想要更新需要重新下载进行替换

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 自定义配置

如果你想添加一些自己的样式，不建议你直接修改onelight.css文件。

你可以在onelight.css同级目录下新建一个onelight.user.css文件，将你的样式放在这个文件，它有更高的优先级，而且你后续要更新只需要更新onelight.css，不会覆盖你的样式

⚠️暗色主题添加onelight-dark.user.css文件

如果onelight.user.css无效，你可能要添加!important提高优先级

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 背景

动态星空背景针对暗色主题，在onelight-dark.user.css顶部添加@import './onelight/style/background/grok-starry-sky.css';即可

Warning

动态星空背景会消耗一定的CPU资源

默认	动态星空

4.关于字体

在onelight.css文件设置了默认字体（搜索root），可以自行修改，如果需要导入字体文件，可在font.css中配置

---

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.其他

⭐ 如果喜欢主题的话，请给一个star吧，感谢🙏！

✅ 一体化模式下主题效果更佳✨

❓ 有问题可以在 Issues 提问，欢迎各种意见

📄 docs文件夹中有示例文章的markdown文件📄

🖼️ img文件夹中有主题的背景图片，如果不需要可以直接删除