# misans-typora-theme

**Repository Path**: jscloud/misans-typora-theme

## Basic Information

- **Project Name**: misans-typora-theme
- **Description**: 基于小米风格的Typora编辑器主题
- **Primary Language**: CSS
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-10-12
- **Last Updated**: 2025-11-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MiSans 主题系列 - 为 Typora 打造的澎湃OS风格主题


## 主题概述

MiSans 主题系列是为 Typora 编辑器精心设计的高质量主题，融合了小米澎湃OS的设计语言和现代UI美学。本系列包含两个主题版本：

- **MiSans Light**: 明亮模式主题，采用纯白色背景和深灰色文字，提供清晰舒适的阅读体验
- **MiSans Dark**: 暗黑模式主题，采用深灰色背景和浅灰色文字，减少夜间使用时的视觉疲劳

## 主要特点

### 设计风格

- **澎湃OS设计语言**: 采用小米最新操作系统的设计理念，注重简洁、现代和高效
- **MiSans 字体**: 内置小米官方字体 MiSans，确保在各种设备上都能呈现一致的美观效果
- **层次化设计**: 通过精心设计的标题层级、颜色对比和间距设置，提供清晰的内容结构
- **响应式布局**: 自动适应不同屏幕尺寸，在各种设备上都能提供良好的编辑体验

### 功能亮点

- **优化的颜色系统**: 使用小米标志性橙色 (#ff6700) 作为强调色，建立和谐的视觉体系
- **精美的选中文本样式**: 使用橙色半透明背景高亮选中文字，提高编辑效率
- **小米风格右键菜单**: 悬停时显示橙色背景和白色文字，带有平滑的动画效果
- **清晰的标题样式**: 一级和二级标题下方均有醒目的横线，通过颜色区分层级
- **紧凑的列表布局**: 优化列表项间距，序号与文字更加贴近，符合小米紧凑设计风格

## 安装方法

### 前提条件

- 已安装 Typora 编辑器
- 确保 `misans` 字体文件夹已放置在 Typora 主题目录中

### 安装步骤

1. 下载主题文件和字体文件
   - 确保以下文件已下载并放置在 Typora 主题目录中：
     - `misans-light.css`
     - `misans-dark.css`
     - `misans` 文件夹（包含所有 MiSans 字体文件）

2. 打开 Typora 主题目录
   - 在 Windows 上，通常位于：`C:\Users\用户名\AppData\Roaming\Typora\themes`
   - 在 macOS 上，通常位于：`~/Library/Application Support/abnerworks.Typora/themes`
   - 在 Linux 上，通常位于：`~/.config/Typora/themes`

3. 重启 Typora
   - 关闭并重新打开 Typora，使主题生效

## 使用方法

1. 在 Typora 中，点击菜单栏的「主题」选项
2. 在下拉菜单中选择「MiSans Light」或「MiSans Dark」
3. 根据环境光线和个人喜好选择合适的主题模式

### 切换明暗模式技巧

- 在明亮环境下，建议使用 MiSans Light 主题，减少反光干扰
- 在昏暗或夜间环境下，建议使用 MiSans Dark 主题，减轻视觉疲劳
- 根据个人显示器亮度设置，选择最合适的主题模式

## 主题定制

如果你想进一步定制主题，可以修改 CSS 文件中的以下变量：

### 颜色系统变量

```css
/* 在 :root 选择器中修改以下变量 */

/* 明亮模式颜色变量 */
--bg-primary: #ffffff;        /* 主要背景色 */
--bg-secondary: #f7f7f7;      /* 次要背景色 */
--bg-tertiary: #eeeeee;       /* 第三级背景色 */
--text-primary: #333333;      /* 主要文字颜色 */
--text-secondary: #666666;    /* 次要文字颜色 */
--text-tertiary: #999999;     /* 辅助文字颜色 */
--accent-color: #ff6700;      /* 小米橙色强调色 */

/* 暗黑模式颜色变量 */
--bg-primary: #1a1a1a;        /* 主要背景色（深灰色而非纯黑） */
--bg-secondary: #252525;      /* 次要背景色 */
--bg-tertiary: #333333;       /* 第三级背景色 */
--text-primary: #e0e0e0;      /* 主要文字颜色 */
--text-secondary: #b0b0b0;    /* 次要文字颜色 */
--text-tertiary: #808080;     /* 辅助文字颜色 */
--accent-color: #ff6700;      /* 小米橙色强调色 */
```

### 常用样式调整

- 调整字体大小：修改 `html` 标签的 `font-size` 属性
- 调整行高：修改 `body` 标签的 `line-height` 属性
- 修改标题样式：调整 `h1`, `h2`, `h3` 等标签的样式定义
- 调整列表缩进：修改 `ul`, `ol` 标签的 `padding-left` 属性

## 技术细节

### 字体引入

主题使用了完整的 MiSans 字体家族，包括从轻量级到粗体的各种字重：

- MiSans-Thin
- MiSans-ExtraLight
- MiSans-Light
- MiSans-Regular
- MiSans-Normal
- MiSans-Medium
- MiSans-Semibold
- MiSans-Demibold
- MiSans-Bold
- MiSans-Heavy

### 代码结构

主题文件采用模块化结构设计，主要包含以下部分：

1. **字体引入**: 使用 `@font-face` 规则定义字体
2. **颜色系统**: 在 `:root` 选择器中定义 CSS 变量
3. **基础样式**: 设置全局样式和通用元素样式
4. **内容样式**: 定义标题、段落、列表、表格等内容元素样式
5. **交互样式**: 定义选中文本、链接、右键菜单等交互元素样式
6. **响应式设计**: 使用媒体查询适配不同屏幕尺寸

### 兼容性

主题已在以下环境中测试并确认兼容：

- Windows 10/11
- macOS
- Linux (Ubuntu)
- Typora 1.0 及以上版本

## 常见问题

### 1. 字体显示不正确怎么办？

确保 `misans` 文件夹已正确放置在 Typora 主题目录中，并且包含所有必要的字体文件。如果问题仍然存在，尝试重启 Typora 或检查字体安装。

### 2. 右键菜单样式不生效怎么办？

Typora 的右键菜单样式可能因版本不同而有差异。如果样式不生效，尝试在 CSS 文件中查找 `.context-menu` 相关样式，并确保使用了足够高的优先级（如添加 `!important`）。

### 3. 如何调整主题以适应不同屏幕亮度？

- 在明亮环境下，可以考虑将明亮模式的背景色从纯白色 `#ffffff` 调整为稍微柔和的 `#fafafa`
- 在暗色环境下，可以调整文字颜色的亮度以提高可读性

## 更新日志

### v1.0.0 (初始版本)
- 发布 MiSans Light 和 MiSans Dark 主题
- 实现澎湃OS风格颜色系统
- 添加 MiSans 字体支持
- 优化选中文本样式
- 实现小米风格右键菜单

### v1.0.1
- 增强二级标题样式，添加醒目的底部横线
- 优化列表样式，减小序号与文字间的间距
- 改进右键菜单悬停效果


## 鸣谢

- 小米科技：提供 MiSans 字体
- Typora 开发团队：打造优秀的 Markdown 编辑器

---

希望您喜欢 MiSans 主题系列！如有任何问题或建议，请随时反馈。

*本主题由爱好者设计，非小米官方产品*