Typora主题

2024-12-06 354
Typora

类型:Markdown编辑器

简介:跨平台Markdown编辑器,所见即所得,支持Latex公式。

Typora提供了6种内置主题,可以通过菜单栏中的Themes菜单来进行选择。此外还可以下载、安装、修改或创建自定义主题,以便为Typora添加个性化样式。

Typora使用CSS文件来设置所有内容的样式。菜单中的每个主题对应的是Typora’s theme folder目录下的一个文件。因此可以通过修改或添加相应的”.css”文件来自定义主题。

一、在浅色模式和深色模式下使用Typora主题

在macOS和Windows上,可以为浅色模式和深色模式分别设置不同的主题。当系统的配色方案变化时,Typora会自动应用对应的主题。

Typora主题

主题也可以通过media query for prefers-color-scheme来支持响应式设计,根据用户的颜色模式切换主题。

二、Typora文件命名规则

在编写自定义主题时,请遵循以下命名规则:请勿使用大写字母和特殊字符,除非是 “.”。同时,请用连字符 “-” 替换空格。Typora 会根据命名自动在主题菜单中显示可读标签。例如将 “–my-first-typora-theme.css” 文件命名为 “My First Typora Theme”。

三、获取Typora主题

Typor 提供了一个官方的主题库,供设计师和开发人员分享自定义主题。可以从主题库中下载各种主题,进行使用或修改。

Typora主题

四、自定义Typora主题安装

1、打开主题文件夹(请参考以下操作说明)。

2、将自定义的 “.css” 文件及相关资源(如字体或图片)复制到打开的文件夹中。

3、重启 Typora,然后在 Themes 菜单中选择新主题。

五、打开Typora主题文件夹

1、macOS

打开 Typora 设置面板,点击 Open Theme Folder 按钮,默认路径通常是:

./Users/{用户名}/Library/Application Support/abnerworks.Typora/themes/

Typora主题

2、Windows/Linux

通过菜单栏打开首选项面板,点击 打开主题文件夹 按钮,路径如下:

File → Preferences → Open Theme Folder

Typora主题

六、修改Typora当前样式

如果仅想修改所有主题的字体样式,或者更改某个特定主题的标题颜色,可以通过Add Custom CSS 选项来实现,而无需复制或修改整个CSS 文件。

七、调试Typora主题CSS

可以使用 Chrome 或 Safari 的开发者工具(DevTools)来调试 CSS 样式。

1、macOS

打开 Safari,启用开发者菜单。然后,可以通过 Safari 的菜单,检查 Typora 的网页视图:

Develop → [ macOS 设备名称] → Typora

2、Windows/Linux

在 Typora 中,可以通过菜单 View 中的 Toggle DevTools 来打开开发者工具。

  • 广告合作

  • QQ群号:4114653

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。