<div align="center">


# Phycat Theme for Typora

![GitHub release (latest by date)](https://img.shields.io/github/v/release/sumruler/typora-theme-phycat?style=flat-square) ![GitHub all releases](https://img.shields.io/github/downloads/sumruler/typora-theme-phycat/total?style=flat-square) ![License](https://img.shields.io/github/license/sumruler/typora-theme-phycat?style=flat-square)

**A beautiful style improves the writing experience.**
好看的样式可以提升写作体验。

[Installation](#installation--使用方法) • [Features](#features--主题特点) • [Theme Studio](#phycat-theme-studio--主题工坊) • [Support Me](#support-me--打赏支持)

</div>

---

## Introduction / 简介

**Phycat** is a series of Typora themes designed with clarity, simplicity, aesthetics, and vividness in mind.
Phycat 系列主题受到大量伙伴的喜爱。设计核心要素为清晰、分明、简约、美观、灵动。

*   **Phycat-color (Light Series / 亮色系)**
    *   **Elements**: Bubbles, Lines.
    *   **Vibe**: Clear, lively, and cute. Comes in 8 color schemes!
    *   **元素**：气泡、线条。风格清晰、灵动、可爱，共带来8款主题配色！

*   **Phycat-neon (Dark Series / 暗色系)**
    *   **Elements**: Dark night, Lines, Light & Shadow, Frosted Glass (Glassmorphism), Neon strips.
    *   **Vibe**: The collision of these elements makes the dark theme stunning.
    *   **元素**：暗夜、线条、光影、毛玻璃、灯带。这些元素碰撞在一起让这款暗色系主题尤为好看！

## Demo / 样式预览

Click the links below to view the HTML exported directly from Typora.
点击下方链接预览即可，都是直接通过 Typora 导出的 HTML 文件。

| Series / 系列               | Themes & Demo Links / 主题与演示链接                         |
| :-------------------------- | :----------------------------------------------------------- |
| **Color (Light)**<br>亮色系 | • [Cherry / 樱桃红](https://sumruler.github.io/typora-theme-phycat/demo-cherry.html)<br>• [Caramel / 焦糖橙](https://sumruler.github.io/typora-theme-phycat/demo-caramel.html)<br>• [Forest / 森绿](https://sumruler.github.io/typora-theme-phycat/demo-forest.html)<br>• [Mint / 薄荷青](https://sumruler.github.io/typora-theme-phycat/demo-mint.html)<br>• [Sky / 天蓝](https://sumruler.github.io/typora-theme-phycat/demo-sky.html)<br>• [Prussian / 普鲁士蓝](https://sumruler.github.io/typora-theme-phycat/demo-prussian.html)<br>• [Sakura / 樱花粉](https://sumruler.github.io/typora-theme-phycat/demo-sakura.html)<br>• [Mauve / 淡紫](https://sumruler.github.io/typora-theme-phycat/demo-mauve.html) |
| **Neon (Dark)**<br>暗色系   | • [Vampire / 吸血鬼](https://sumruler.github.io/typora-theme-phycat/demo-vampire.html)<br>• [Radiation / 辐射](https://sumruler.github.io/typora-theme-phycat/demo-radiation.html)<br>• [Abyss / 深渊](https://sumruler.github.io/typora-theme-phycat/demo-abyss.html) |

---

## Phycat Theme Studio / 主题工坊

🎨 **Create your own color scheme with one click!**
隆重介绍物理猫 Phycat 主题色工坊，一键生成你的专属主题配色！

👉 **[Click here to open Phycat Theme Studio](https://sumruler.github.io/typora-theme-phycat/phycat-theme-studio.html)**

**👉🏿** **[Click here to open Phycat Theme Studio Dark](https://sumruler.github.io/typora-theme-phycat/phycat-theme-studio-dark.html)**

---

## Features / 主题特点

1.  **Aesthetics / 美观**
    *   A beautiful style improves the writing experience.
    *   好看的样式可以提升写作体验 ✍️。

2.  **Hierarchy / 分明**
    *   Headings, lists, and outlines are carefully designed. You can distinguish heading levels at a glance.
    *   标题、列表、大纲都进行了精心设计，层级非常分明易读。

3.  **Vividness / 灵动**
    *   Rich animations: **Hover effects** ✨, **Task list** completion animations ✅. Surprising but not distracting.
    *   精心设计了大量动画效果，在给你一些小惊喜的同时不影响布局。

4.  **Details / 细节**
    *   Twinkling stars in the outline 🌟, rotating link icons 🔗, language labels in code blocks 💻, custom styles for Yaml & KBD ⌨️.
    *   处处都有小巧思 💡，如大纲目录后跳动的星星、超链接转动的小图标等。

5.  **HTML Export Optimization / 导出优化**
    *   The exported HTML perfectly matches the software style 🌐.
    *   导出的 HTML 完美兼容软件内样式，相信你看了会喜欢的 ❤️。

6.  **Easy Customization / 易定制** 🎨
    *   Color files are separated from style files. Easy to modify. If you can't match colors, use the **AI Theme Studio** mentioned above 🤖.
    *   配色文件与样式文件分离，复制一份即可轻松修改。也可以使用主题色工坊生成。

7.  **Feature Toggles / 便捷开关** ⚙️
    *   Easily toggle **Background Styles** or **Auto-numbering** in the CSS file.
    *   在配色 CSS 文件中，可以通过简单调整快速启用或改变背景样式、自动编号等功能。

## Design Language / 设计语言

### Light Series (亮色系)

*   **Keywords**: Clear, Distinct, Simple, Round, Lively, Fashionable.
*   **Font**: *LXGW WenKai (霞骛文楷)*
*   **Card Style**: Bubbles, Frosted Glass.

### Dark Series (暗色系)

*   **Keywords**: Clear, Distinct, Simple, Night, Lines, Light & Shadow, Neon.
*   **Font**: *LXGW WenKai (霞骛文楷)*
*   **Card Style**: Light & Shadow, Frosted Glass, Neon Strips.

---

## Screenshots / 效果截图

### Light Series

![image-20251224115955956](/assets/image-20251224115955956.png)



### Dark Series

![image-20260105105845959](./assets/image-20260105105845959.png)



---

## Installation / 使用方法

1.  Download the latest theme package from [Releases](https://github.com/sumruler/typora-theme-phycat/releases).
    从 Releases 下载最新的主题包。

2.  Copy the `phycat` folder and all `.css` files into the Typora Theme Folder.
    将 `phycat` 文件夹与所有 CSS 文件放进 Typora 主题目录下。

    *Tip: You can open the folder quickly by running this command (Win+R):*
    *提示：复制下面内容，WIN+R 运行即可快速打开主题目录*

    ```bash
    %appdata%\Typora\themes
    ```

3.  Restart Typora and select the theme from the themes menu. 重启 Typora，在主题中启用相应主题即可。

## FAQ / 常见问题

**Q: How to keep the sidebar outline in exported HTML?** **导出网页如何具有侧边栏大纲？**

> Settings -> Export -> HTML -> Check "Preserve Sidebar Outline". 在偏好设置，找到导出，选择 HTML，勾选保留侧边栏大纲。

**Q: How to include LXGW WenKai font in exported HTML?** **导出的网页如何包括霞骛文楷字体？**

> Settings -> Export -> HTML -> Add to `<head/>`. Insert the following: 在偏好设置–>导出–>HTML–>在 `<head/>` 中添加，添加下面的内容：
>
> ```
> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-webfont/1.6.0/style.min.css" />
> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css" />
> ```

**Q: How to enable auto-numbering?** **如何开启自动编号？**

> Open the corresponding CSS file (e.g., `phycat-forest.css`) and uncomment the auto-numbering section. 在配色 CSS 文件中，取消注释对应的自动编号级别即可。

**Q: How to change the background image?** **如何开启或更换背景图案？**

> Open the CSS file and change the `--bg-style` variable. 在配色 CSS 文件中，更改 `--bg-style` 变量即可。

**Q: Numbering error shown below?** **编号出现如图所示错误？** 

<img src="/assets/image-20260120094206353.png" alt="image-20260120094206353" style="width:400px;" />

> **Likely caused by a numbering plugin. Please disable the plugin.** **可能是安装了编号插件导致的，禁用插件即可。**

------

## Support Me / 打赏支持

If you like this theme, please consider buying me a coffee! Your support is greatly appreciated. 如果你喜欢这套主题，可以选择打赏支持。不胜感激！

### ☕ Support via Ko-fi (International)

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/sumruler)

### 🧧 Support via WeChat / Alipay (China)

<img src="/assets/image-20251224165551114.png" alt="WeChat Pay" style="width:250px;" />    <img src="assets/image-20251224165606988.png" alt="Alipay" style="width:250px;" />
