jhildenbiddle / typora-themeable

A clean, customizable, typography-focused theme for the markdown editor, Typora.

Typora Themeable

A clean, customizable, typography-focused theme system for the markdown editor, Typora.

Features

• Fast and flexible customization using CSS custom properties
• Light, dark, and auto-switching light/dark mode theme variants
• Based on the Inter typeface family and the Tailwind CSS color palette
• Compatible with all Typora platforms (macOS, Windows, Linux)

Installation & Customization

See the documentation site for details.

Sponsorship

A sponsorship 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.

Thank you! 🙏🏻

Contact & Support

• Follow 👨🏻‍💻 @jhildenbiddle on Twitter and GitHub for announcements
• Create a 💬 GitHub issue for bug reports, feature requests, or questions
• Add a ⭐️ star on GitHub and 🐦 tweet to promote the project
• Become a 💖 sponsor to support the project and future efforts

License

This project is licensed under the MIT License. See the LICENSE for details.

Copyright (c) John Hildenbiddle (@jhildenbiddle)

typora-themeable's Issues

Increase visibility of scrollbars in dark mode

Here is a screenshot of the main scrollbar in dark mode:

In a big window, it's almost impossible to find (and I have good eyes and a good monitor).

The other scrollbars, like horizontal scrollbars in code fences, look similar, and could also benefit from increased visibility:

Incorrect display and cropping of text in headings

1. Highlighted headings (H1, H2) are cut off at the bottom of the text
2. Incorrect display of inline code and superscript / subscript text in headings

Monospace text does not scale with surrounding text

Things work fine with Typora's default font size:

But, if I change (in Typora's setting, under Appearance→Font Size) the font size to, say, 9 px, the monospace text does not seem to scale correctly:

[Dark Theme] Unreadable source code mode switch

Double dimming for checked sub-items

When nesting checkbox items, nested checked items are progressively dimmed according to their depth. I would expect all dimmed items to be the same color.

Strikeout for nested checklist items

Checking a checklist item makes all of its content be striked out, including any unchecked sub-items.

I would expect unchecked sub-items to still be unchecked, so I don't mistake them for being done.

(Ideally, of course, it doesn't make that much sense to check an item without checking its sub-items, but the real world is not always ideal.)

This is not terribly important to me, so don't feel bad if you drop this.

[Dark Theme] The tooltips of some buttons have a light theme

Incorrect cursor/pointer when hovering over horizontal scrollbar in code fences

When hovering over (and using) horizontal scroll bars in code fences, the mouse pointer is still the "Text select pointer:

I had expected to see the normal pointer, which is normally used for scroll bars:

No ligatures in level 1-3 headings (works in level 4-6 headings)

Here is a line with normal text and the six different headings, all containing the two characters - and >:

As you can see, heading level 1-3 does not render the characters as a ligature. However, normal text as well as heading level 4-6 render the ligature. I suggest supporting ligatures in headings with level 1-3 too.

I assume everything is using the same font and that this fix is simple. If the reason ligatures won't show up in headings level 1-3 is that these levels use a different font, then it is indistinguishable to me from level 4-6 (I can see no differences between level 3 and 4 other than the text size), and I suggest making them use the same font so that ligatures are supported.

Source code mode: Incorrect size for heading when using setext

This is a screenshot from source code mode:

As you can see, the increased font size for the heading applies only to the setext-style underline (the dashes), not the actual heading text ("Windows settings"). The heading size should apply to both (in other words, they should have the same length).

The page doen't fit very well in dark mode