Phycat Theme for Typora

February 15, 2026 · View on GitHub

Phycat Theme for Typora

GitHub release (latest by date) GitHub all releases License

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

Installation • Features • Theme Studio • Support Me

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)
亮色系		• Cherry / 樱桃红
• Caramel / 焦糖橙
• Forest / 森绿
• Mint / 薄荷青
• Sky / 天蓝
• Prussian / 普鲁士蓝
• Sakura / 樱花粉
• Mauve / 淡紫
Neon (Dark)
暗色系		• Vampire / 吸血鬼
• Radiation / 辐射
• Abyss / 深渊

Phycat Theme Studio / 主题工坊

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

👉 Click here to open Phycat Theme Studio

👉🏿 Click here to open Phycat Theme Studio Dark

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

Dark Series

image-20260105105845959

Installation / 使用方法

  1. Download the latest theme package from 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 运行即可快速打开主题目录

    %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? 编号出现如图所示错误？

image-20260120094206353

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

🧧 Support via WeChat / Alipay (China)

WeChat Pay Alipay