使用 Stylus 定制简悦的样式或主题

[Kenshin]

Stylus 是一款调整网页外观的用户样式管理器，简单的说，它可以给任意页面调整外观，所以也可以定制简悦的阅读模式。

社区提供主题目录

• 简洁白

• 仿 Medium 效果

• 简约

• Dark & Peace

• LXGW WenKai（霞鹜文楷）

• 护眼绿

与简悦自定义样式的区别

简悦本身具有 自定义样式 的功能，Stylus 相对简悦的来说，具有如下优点：

方便的 CSS 编辑器

具有一个可实时预览的 CSS 编辑器

可方便切换多个不同的样式

方便安装

点击下面的 Button 自动安装（在已经安装 Stylus 的前提下）

安装

Chrome Webstore

如何定制

这是一个 现成的模板 内容如下：

/* ==UserStyle==
@name           simpread style: xxxx
@namespace      simpread.pro
@version        0.1.0
@description    xxxx style for simpread
@author         xxxx
==/UserStyle== */
@import xxxx
@-moz-document regexp("http[s]://.*")
{
    sr-rd-title {
        
    }

    sr-rd-desc {

    }

    sr-rd-content *, sr-rd-content p, sr-rd-content div {
        
    }
}

简单的一些说明

如何提交你的样式

请提交到 https://gist.github.com/Kenshin/d10d4f4a52c556ef68e073dc443f7e57 命名使用务必使用 impread_custom_xxx.user.css 的形式。

同时在这个 discussion 下面建立（请替换下面的 xxx 为你设置的内容）

## 样式的名称

### 安装

[![Install simpread xxx with Stylus](https://img.shields.io/badge/Install%20simpread%20xxx%20style-Stylus-195bf7.svg)](https://gist.githubusercontent.com/Kenshin/d10d4f4a52c556ef68e073dc443f7e57/raw/simpread_custom_xxx.user.css)

### 截图

<请截图>

关联阅读

• 利用 Google Fonts 为阅读模式添加任何字体

[Kenshin]

简洁白

普通方案 请访问

安装

截图

[Kenshin]

仿 Medium 效果

普通方案 请访问

安装

截图

[Kenshin]

简约

普通方案 请访问

安装

截图

[eterlan]

Dark & Peace

普通方案 请访问

特点

• 美化了一点排版
• 降低了图片亮度以及字体亮度, 使其比较护眼
• 调整了代码以及链接的字体大小和颜色

安装

截图

注意

• 推荐使用 Amazon Ember 字体
• 截图中是覆盖了绀鼠主题的效果

[Kenshin]

嗨，我明天看下，如果没问题的话，Merge 过来。
然后会发到简悦的各种渠道中。

谢谢付出。🙏

[Kenshin]

嗨，此样式已经 Merge 到 https://gist.github.com/Kenshin/d10d4f4a52c556ef68e073dc443f7e57 🙏

另外，建议

请详细说明如何使用 Amazon Ember 字体

[Kenshin]

已发布到 Telegram Channel

[Kenshin]

LXGW WenKai（霞鹜文楷）

普通方案 请访问

特点

• 使用了 霞鹜文楷 的字体方案
• 仅改变正文，当遇到 <code> 或 <pre> 代码段时仍使用默认等宽字体。

安装

截图

注意

• 霞鹜文楷 下载地址

[lyserenity]

护眼绿

特点

• 修改了背景色和链接的字体色

安装

截图

版权说明

配色来自 oldj 兄的作品 WonderPen 一个主打写作的 App

[john-walks-slow]

柔焦

特点

• 鼠标经过某一元素时，将其他元素渐渐虚化、淡化，朦胧而梦幻
• 鼠标停留在页面边距时，取消虚化效果
• 不改变字体、配色。可以和其他主题共同使用

安装

截图

视频演示

[Kenshin]

Cool ~ 这个 👍 👍 👍

谢谢分享 ❤️

---

PS：链接失效了 😂

[john-walks-slow]

真抱歉！我忘记回复了。

这是正确的链接（我 fork 了用户样式的 gist）：simpread_custom_softfocus.user.css

[Kenshin]

哈，小事情。

我帮你更新了使用链接 & 增加了一个 gif 演示。

PS：看了下代码，很有意思的实现方式，思路清奇，效果斐然！

[john-walks-slow]

感谢！看小说时的突发奇想哈哈