# Typora Themeable
[](https://github.com/jhildenbiddle/typora-themeable/releases)
[](https://github.com/jhildenbiddle/typora-themeable/actions?query=branch%3Amain+)
[](https://www.jsdelivr.com/package/gh/jhildenbiddle/typora-themeable)
[](https://github.com/jhildenbiddle/typora-themeable/blob/main/LICENSE)
[](https://github.com/sponsors/jhildenbiddle)
[](https://github.com/jhildenbiddle/typora-themeable)
[](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fjhildenbiddle%2Ftypora-themeable&hashtags=developers,frontend,javascript)
A clean, customizable, typography-focused theme for the markdown editor, [Typora](https://typora.io).
Light and dark theme examples
## Features
- Fast and flexible customization using CSS custom properties
- Light, dark, and auto-switching light/dark mode theme variants
- Based on the [Inter](https://rsms.me/inter/) typeface family and the [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors) color palette
- Compatible with all Typora platforms (macOS, Windows, Linux)
## Screenshots
The screenshot below illustrates how Typora Themeable renders various markdown elements. The markdown document used to create this screenshot is included with Typora Themeable.
Typora Themeable markdown demo
## Installation
1. Download the latest [release](https://github.com/jhildenbiddle/typora-themeable/releases) of Typora Themeable: typora-themeable.zip
2. Extract files from the ZIP archive
3. Open Typora's `themes` directory:
- Open Typora's preferences
- Select **Appearance**
- Click **Open Theme Folder**
4. Copy the extracted files (including the `themeable` directory) into Typora's `themes` directory
5. Delete the ZIP archive
6. Restart Typora
7. Select a **Themeable** theme from Typora's **Preferences** or **Themes** menu
Alternatively, command line users can perform the same download, extract, copy, and delete actions in a single step using one of the following commands:
#### **macOS**
```shell
cd ~/Library/Application\ Support/abnerworks.Typora/themes/ \
&& curl -L https://github.com/jhildenbiddle/typora-themeable/releases/latest/download/typora-themeable.zip -o typora-themeable.zip \
&& unzip typora-themeable.zip \
&& rm typora-themeable.zip \
&& echo "\nInstallation complete. Please restart Typora."
```
#### **Windows**
Command Prompt:
```shell
cd /d "%USERPROFILE%\AppData\Roaming\Typora\themes" ^
&& curl -L https://github.com/jhildenbiddle/typora-themeable/releases/latest/download/typora-themeable.zip -o typora-themeable.zip ^
&& tar -xf typora-themeable.zip ^
&& del typora-themeable.zip ^
&& echo. && echo Installation complete. Please restart Typora.
```
Powershell:
```shell
cd ~\AppData\Roaming\Typora\themes;
if ($?) { curl https://github.com/jhildenbiddle/typora-themeable/releases/latest/download/typora-themeable.zip -o typora-themeable.zip };
if ($?) { tar -xf typora-themeable.zip };
if ($?) { rm typora-themeable.zip };
if ($?) { echo "`nInstallation complete. Please restart Typora.`n" };
```
#### **Linux**
If Typora was [installed](https://support.typora.io/Typora-on-Linux/) via `apt-get`:
```shell
cd ~/.config/Typora/themes/ \
&& curl -L https://github.com/jhildenbiddle/typora-themeable/releases/latest/download/typora-themeable.zip -o typora-themeable.zip \
&& unzip typora-themeable.zip \
&& rm typora-themeable.zip \
&& echo -e "\nInstallation complete. Please restart Typora.\n"
```
If Typora was [installed](https://support.typora.io/Snap/#limitations-for-the-snap-version) via `snap`:
```shell
cd ~/snap/typora/current/.config/Typora/themes/ \
&& curl -L https://github.com/jhildenbiddle/typora-themeable/releases/latest/download/typora-themeable.zip -o typora-themeable.zip \
&& unzip typora-themeable.zip \
&& rm typora-themeable.zip \
&& echo -e "\nInstallation complete. Please restart Typora.\n"
```
!> **Don't forget to update Typora Themeable!** Typora currently does not auto-update third-party themes when new versions are released. To ensure you are running the latest version of Typora Themeable, check this site periodically or follow **@jhildenbiddle** on [Twitter](https://twitter.com/jhildenbiddle) or [GitHub](https://github.com/jhildenbiddle) for update notifications.
## Customization
### Setup
Typora provides built-in support for custom theme styles using a `[theme].user.css` stylesheet. This stylesheet is automatically loaded *after* the `[theme].css` stylesheet, allowing custom styles to be stored separately from and without modification to a theme's CSS (see [official documentation](https://support.typora.io/Add-Custom-CSS/) for details).
1. Add a `[theme].user.css` stylesheet in Typora's theme directory:
- For **Themeable**, create or download themeable.user.css
- For **Themeable Dark**, create or download themeable-dark.user.css
- For **Themeable Light**, create or download themeable-light.user.css
2. Review the [Color Palette](#color-palette) and [Theme Properties](#theme-properties) sections below.
3. Set custom values within the `:root` selector. These values will be applied regardless of the operating system's light/dark mode setting.
```css
:root {
--color-primary: var(--pink-500);
}
```
4. Custom styles that should only be applied in dark mode must be nested within the corresponding `@media` rule:
```css
/* Dark Mode (OS-level) */
@media screen and (prefers-color-scheme: dark) {
:root {
--color-primary: var(--violet-500);
}
}
```
5. Note that because this is a standard stylesheet you are free to `@import` other stylesheets, declare `@font-face` rules, override theme declarations, and create new CSS rulesets as needed.
```css
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
:root {
--font-family-mono: "Fira Code", monospace;
}
```
### Add-ons
Theme add-ons are stylesheets that contain ready-to-use styles for Typora Themeable. Add-ons are applied using a CSS `@import` rule within your `[theme].user.css` stylesheet (see [Setup](#setup) for details).
?> Do you have a new add-on that you'd like to share? Add-on [contributions](https://github.com/jhildenbiddle/typora-themeable/pulls) are welcome!
- **Material Design**: Dark syntax highlighting theme
```css
@import "themeable/addons/code-material.css";
```
- **Mermaid:** Typora Themeable color palette applied to Mermaid diagrams (work-in-progress)
```css
@import "themeable/addons/mermaid.css";
```
### Color Palette
Typora Themeable's color palette is based on the same [palette](https://tailwindcss.com/docs/customizing-colors) provided by [Tailwind CSS](https://tailwindcss.com). Color property names are based on the color name followed by a numeric value based on a color range ordered from light to dark (where 50 is light and 900 is dark):
50
100
200
300
400
500
600
700
800
900
Blue
In dark mode or when using the **Themeable Dark** variant, monochrome color ranges are reversed causing them to be ordered from dark to light (where 50 is dark and 900 is light). This allows monochrome tints and shades to auto-adjust to their light/dark environment.
50
100
200
300
400
500
600
700
800
900
Neutral (Light)
50
100
200
300
400
500
600
700
800
900
Neutral (Dark)
```css
:root {
/* Same color in light and dark mode */
--color-primary: var(--blue-500);
/* Lightest tint in light mode, darkest shade in dark mode */
--background-color: var(--mono-50);
}
```
#### **Swatches**
50
100
200
300
400
500
600
700
800
900
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
#### Monochrome
50
100
200
300
400
500
600
700
800
900
Slate
Gray
Zinc
Neutral
Stone
#### **CSS**
[vars-palette.css](https://cdn.jsdelivr.net/gh/jhildenbiddle/typora-themeable/src/core/vars-palette.css ':include')
**Dark Mode / Themeable Dark**
[vars-palette-dark.css](https://cdn.jsdelivr.net/gh/jhildenbiddle/typora-themeable/src/core/vars-palette-dark.css ':include')
### Theme Properties
Typora Themeable offers customizable theme properties defined using [CSS custom properties](https://jhildenbiddle.github.io/docsify-themeable/#/customization). These properties allow style changes to be made without the need to navigate and modify complex CSS.
The following CSS represents a complete list of available theme properties. The values shown are those applied in light mode or when using the **Themeable Light** variant.
[vars-theme.css](https://cdn.jsdelivr.net/gh/jhildenbiddle/typora-themeable/src/core/vars-theme.css ':include')
**Dark Mode / Themeable Dark**
The following CSS contains the modified theme properties that are applied in dark mode or when using the **Themeable Dark** variant.
[vars-theme.css](https://cdn.jsdelivr.net/gh/jhildenbiddle/typora-themeable/src/core/vars-theme-dark.css ':include')
## Sponsorship
A [sponsorship](https://github.com/sponsors/jhildenbiddle) is more than just a way to show appreciation for the open-source authors and projects we rely on; it can be the spark that ignites the next big idea, the inspiration to create something new, and the motivation to share so that others may benefit.
If you benefit from this project, please consider lending your support and encouraging future efforts by [becoming a sponsor](https://github.com/sponsors/jhildenbiddle).
Thank you! 🙏🏻
## Contact & Support
- Follow 👨🏻💻 **@jhildenbiddle** on [Twitter](https://twitter.com/jhildenbiddle) and [GitHub](https://github.com/jhildenbiddle) for announcements
- Create a 💬 [GitHub issue](https://github.com/jhildenbiddle/typora-themeable/issues) for bug reports, feature requests, or questions
- Add a ⭐️ [star on GitHub](https://github.com/jhildenbiddle/typora-themeable) and 🐦 [tweet](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fjhildenbiddle%2Ftypora-themeable&hashtags=typora,markdown,css,developers) to promote the project
- Become a 💖 [sponsor](https://github.com/sponsors/jhildenbiddle) to support the project and future efforts
## License
This project is licensed under the MIT License. See the [LICENSE](https://github.com/jhildenbiddle/typora-themeable/blob/master/LICENSE) for details.
Copyright (c) John Hildenbiddle ([@jhildenbiddle](https://twitter.com/jhildenbiddle))
