> ## Documentation Index
> Fetch the complete documentation index at: https://docs.simp.red/llms.txt
> Use this file to discover all available pages before exploring further.

# 自定义样式

此功能最低要求 1.0.2 版本，如低于此版本，[请升级](https://simpread.pro) 到最新版本。

***

> \[!TIP]
> 关于自定义样式的更多玩法 [请看这里](https://github.com/Kenshin/simpread/discussions?discussions_q=label%3A%22read+mode%22)。

## 一览（动图）

![](http://sr.ksria.cn/custom%20theme.gif)

## 简易方案

打开 [https://sspai.com/post/69972](https://sspai.com/post/69972) 进入阅读模式后，可在右下角触发器直接输入 CSS 样式

[![xv3V5n.png](https://s1.ax1x.com/2022/11/07/xv3V5n.png)](https://imgse.com/i/xv3V5n)

## 入口

选项页 → 高级设定 → 自定义样式

![Imgur](https://s1.ax1x.com/2022/11/07/xv1s3V.png)

## 界面说明

![Imgur](https://s1.ax1x.com/2022/11/07/xv1guF.png)

## 优先级

简悦跟 CSS 有关的地方共有两处：

* 阅读模式中的 `主题` `字体样式` `字体大小` `版面布局`
* 选项页 → 高级设定 → 自定义样式

优先级的顺序：（高 → 底）

* 自定义 CSS；（上图 ① 所示）
* 全局、标题与描述、正文、代码段（上图 ② 所示）
* 阅读模式中的 `主题` `字体样式` `字体大小` `版面布局`；

图示：\
![Imgur](https://s1.ax1x.com/2022/11/07/xv1hNR.png)

## 简悦 HTML 标签说明

#### Class 说明

* `.simpread-font`\
  定义阅读模式的字体样式，如：

```
.simpread-font {
    font: 300 16px/1.8 -apple-system,PingFang SC,Microsoft Yahei,Lantinghei SC,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;
    color: #333;
    text-rendering: optimizelegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}
```

* `simpread-theme-root`\
  用来描述主题的 `背景色` 与 `字体颜色`，如：

```
.simpread-theme-root {
    background-color: #fff;
    color: #555;
}
```

#### HTML Tag 说明（普通页面）

* `sr-read`\
  阅读模式的根节点

* `sr-rd-title`\
  标题

* `sr-rd-desc`\
  描述

* `sr-rd-content`\
  正文

* `sr-rd-footer`\
  页脚

#### 图示（普通页面）

![Imgur](https://s1.ax1x.com/2022/11/07/xv1441.png)

#### HTML Tag 说明（论坛类面）

* `sr-rd-mult`\
  每段内容的根节点

* `sr-rd-mult-avatar`\
  头像

* `sr-rd-mult-content`\
  每段内容的正文

#### HTML Tag 说明（分页面）

* `sr-page`\
  分页的根节点

#### 图示（论坛类页面 与 分页）

![Imgur](https://s1.ax1x.com/2022/11/07/xv17jO.png)

## 如何自定义

> 一般情况下，只需要在 `高级设定` → `自定义样式` → `自定义 CSS` 段覆盖除 `.simpread-font` 以外的上述内容，即可。

## 提交你的样式

[https://github.com/Kenshin/simpread/issues/71](https://github.com/Kenshin/simpread/issues/71)

## 无法更新阅读模式的：主题、字体样式、字体大小、版面布局

当遇到如图所示时，则发生了无法设定的问题。

![Imgur](https://s1.ax1x.com/2022/11/07/xv1jUA.png)

* 当 `自定义样式` 中包含了对应的设置，则无法使用 `主题` `字体样式` `字体大小` `版面布局`；
* 如果想要使用 `主题` `字体样式` `字体大小` `版面布局` 则需要删除相关项；
* 详细请看 [优先级关系](%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%B7%E5%BC%8F#%E4%BC%98%E5%85%88%E7%BA%A7)

对应项的代码如下：

```
    switch( type ) {
        case "layout":
        case "margin":
            return styles.global.marginLeft != "" || styles.css != "";
        case "fontsize":
            return styles.title.fontSize != "" ||
                   styles.desc.fontSize != ""  ||
                   styles.art.fontSize != ""   ||
                   styles.css != "";
        case "fontfamily":
            return styles.global.fontFamily != "" || styles.css != "";
        case "theme":
            return styles.css.search( "simpread-theme-root" ) != -1;
    }
```