Typora has 6 built-in themes, which can be selected using under the Themes menu in the menu bar. You can also download, install, modify or write your own custom theme to stylize Typora.
Typora uses CSS to style everything. Each theme shown in the Themes menu is one
.css file under “Typora’s theme folder”. So you can add/modify themes by adding/modifying corresponding css files under “Typora’s theme folder”.
You can set separate themes for light mode and dark mode (on macOS / Windows). When the system’s color scheme changed, the corresponding theme you chose will be applied.
Your theme can also use media query for prefers color scheme to write a responsive theme for both light mode and dark mode.
When writing your own theme, you need to use this file naming rule for theme css: do not use capitalized letters, and nonalphabet characters except
-. Replace any whitespace with
-, and Typora will convert them to a readable label in menu item. For example, for
my-first-typora-theme.css, Typora will show “My First Typora Theme” under the “Themes” menu.
We have an official website Typora Theme Gallery for designers/developers to share their custom themes with others. You can download themes from there.
.cssfile and related resources, like fonts or images, into the newly opened folder.
Open the preference panel and click “Open Theme Folder” button.
On macOS, usually it is
Open preference panel from
Preference from menubar, then click “Open Theme Folder”:
Sometimes you may just want to change font family for all themes, or change font color for headings for specific themes. In this case, you do not need to copy/modify a whole exiting css file, instead Add Custom CSS is enough.
Please see Write Custom Theme for Typora.
You can open Chrome/Safari DevTools to debug element styles.
Enable Debugmenu item, then right click anywhere in Typora’s hybrid edit view, then click “Inspect Elements” from context menu.
Toggle DevToolsmenu item.