Theme: obsidian_ia / Another iA Writer inspired theme

Font: iA Writer Quattro - Must be installed locally

Heavily inspired by iA Writer.

Completely reworked on 2020/08/29

Big UI Update on 2020/09/08

WORK IN PROGRESS / FEEDBACK AND BUG REPORTS APPRECIATED

Download

28 Likes

Updated:

  • Fixed heading font size in editor mode (was overridden by app.css in latest insider build)
  • Fixed leaf-resize-handle color in light mode to a more subtle grey
  • Updated font to iA Writer Quattro V which has more font weights
  • Enhanced the checkboxes with code by kepano from here
1 Like

This is excellent, signed up just to thank you! :rocket:

3 Likes

Love this theme. I really like the typographic style of IA Writer, Quattro is a great typeface that sits really well and I find really helps drive content clarity. Thanks for sharing!

2 Likes

I noticed a small issue on the spacing for the disclosure triangles in search. Quickly fixed from:

.search-result-file-title {
  padding: 5px 10px;

to:

.search-result-file-title {
  padding: 5px 20px;

Thanks for the theme, it’s exactly what I was looking for: uses iA Writer font and small headings. Love the circle checklists too.

3 Likes

Love the theme! Very clean.

When you’re finished (I noticed you said it’s WIP), feel free to @ me to add it to the list of community themes. Thanks!

1 Like

Thanks for the finding, fixed it in the latest version.

It looks like we have a solid version, feel free to add it to the community list (and thanks for doing it).

I have downloaded the iA Writer Quattro fonts, but cannot find an instruction on the Github page of how to install them.

Can you help?

If you are using macOS just open the Font Book Application, select all wanted fonts, and drag and drop them to the Font Book Application Window.

If you are using Windows 10 you can do the same with the Settings Window.

1 Like

Yep, I am on macOS, and that works.
Many thanks.

Hi, I started trying out your theme.

Your highlighting colour is the standard yellow, which is fine. However, in search results the relevant terms are also show in the same yellow. I would like to use a different colour (e.g. green) for those search results. What should I amend in your css?

Replace:

.search-result-file-matched-text {
   color: var(--text-normal);
   background-color: var(--text-highlight-bg);
}

with something like this:

.search-result-file-matched-text {
   color: var(--text-normal);
   background-color: rgba(0,255,0,0.4);
}

That’s fine. Many thanks!

Having troubles with this on Windows 10, fonts are installed but aren’t being rendered.
Seems like some of the IA Writer fonts overwrite each other rather than installing a different style (regular, italic, bold).

Anyone else have any trouble and find some solutions?

Maybe their name is different in windows? Could you please look up the full names in Control Panel → Appearance and Personalization → Fonts for me?

image

It looks like the Quattro variable font is only installing the italic style?

These two ttf’s overwrite each other.
image

Sorry for not getting back to you sooner!

Our community theme page works by fetching a list of GitHub repos, so could you please create a repo like this one please? Thank you!

1 Like