Home

Awesome

Hero

<p align="center"> <img src="https://img.shields.io/github/release/etigerstudio/typora-misty-theme.svg" href="https://github.com/etigerstudio/typora-misty-theme/releases/latest" alt="Release"/> &nbsp; <img src="https://img.shields.io/github/downloads/etigerstudio/typora-misty-theme/total" href="https://github.com/etigerstudio/typora-misty-theme/releases/latest" alt="Download"/> </p>

Yet another subtle,elegant & unobstructive theme aimed at the philosophy of simplicity, aesthetic and readability, for the awesome Typora markdown editor and reader.

Tweaked for both English🇺🇸 & 中文🇨🇳. Works on both macOS & Windows.

Ships with Light 🌞 & Dark 🌑 color schemes. Download

🙉  Quick Glance

Light mode:

<p align="center"> <img src="https://github.com/etigerstudio/typora-misty-theme/raw/master/assets/misty-light-demo.png" alt="misty-light-demo" width="887"/> </p>

Dark mode:

<p align="center"> <img src="https://github.com/etigerstudio/typora-misty-theme/raw/master/assets/misty-dark-demo.png" alt="misty-dark-demo" width="887"/> </p>

🔭  Full Preview

<details><summary>Show light preview:</summary> <p align="center"> <img src="https://github.com/etigerstudio/typora-misty-theme/raw/master/assets/light-preview.png" alt="light-preview" width="648"/> </p> </details> <details><summary>Show dark preview:</summary> <p align="center"> <img src="https://github.com/etigerstudio/typora-misty-theme/raw/master/assets/dark-preview.png" alt="dark-preview" width="648"/> </p> </details>

🔌  Installation

Download theme stylesheets of the platform you work on and color schemes you like. Copy it into the themes folder of Typora. Select theme name (eg. Misty Light Macos) form the theme list to apply it. You may restart Typora once to help it discover the theme file.

For detailed reference, please see Install Theme.

🔨  How to Build

Misty is now written in SASS and the dist\ folder has been dropped from this repo. You may directly download distributed builds from release portal.

If you need to manually build the theme, with npm installed, you could easily compile source SCSS to CSS Typora could read by running:

npm i --only=dev
npx gulp build

Compiled & optimized CSS files can then be found in dist\:

[16:06:41] Using gulpfile ~/typora-misty-theme/gulpfile.js
[16:06:41] Starting 'build'...
[16:06:41] Finished 'build' after 227 ms

🖥  Compatibility

Misty is both test on macOS 10.13.6 to 10.15.3 and Windows 10 version 1909. However, it has not been tested on Linux thoroughly yet and will be tested in future.

Any test on Windows or Linux and any issue feedback will be welcome.

Font fallback list is tweaked for both English and Chinese, on both macOS and Windows. Font weight values have been slightly adjusted on Windows to match Windows-specific rendering characteristic.

🧟  Known Issues

Brought to you with ❤️ by E-Tiger Studio, 2017-2020.