Theme: obsidian_ia / Another iA Writer inspired theme

Thanks @matthewpmunger and @rcvd - appreciate both your inputs. I generally keep the window maximized and so looks like a lot of wasted space. Let me try, reducing the size of the window and see how that looks.

Big update: I changed the UI to system font, further aligned the GUI design to iA’s one, and reworked the handles when windows tiled. I hope you like it, please give feedback.

1 Like

Various small fixes have been pushed, please update.

1 Like

Latest update breaks Andy Matuschak mode with left sided title panel:

Here it is now:
1

Here it is with a different theme:

Thank you

@rcvd Love the update, I think using a system font for the UI looks much better.

Looks like there’s some indent / spacing issues for checkboxes. I feel like these should line up.

Add this to Andy Matuschak’s mode:

.workspace-leaf .view-header,
.workspace-leaf.mod-active .view-header {
	height: unset;
}
1 Like

Screen Shot 2020-09-09 at 06.55.19

Fixed with latest commit.

Absolutely great Theme. Would it be possible to slightly ‘darken’ the lines that separate the various windows/‘boxes’? The old eyes (and monitor) would greatly appreciate the tweak.

worked great. Thank you.

Sure, Do you want them to be highlighted if you move the mouse over it and while dragging? I have re-enabled that with the latest commit - please check if this helps.

Really like this theme!
On the decision to have all headings the same size, I think this works well in edit mode, but in preview mode there’s no way of distinguishing between heading levels. Do you think it would make sense to have small font size differences between each one? I can easily customise the CSS to do this myself, just wondering if it’s something you already considered?

Perfect with ‘move over’ and drag!!! But would I be going to far to ask that the grey lines between ‘windows’ be a little more distinct. Thank you!

Are you talking about the light or the dark mode?

Light mode, please!

Yeah, I thought about it more than once but wanted to keep the theme close to iA Writers one.

This is what they are using for their sans serif theme:

h1 {
  margin-top: calc((60 / 23) * 1em); /* 60px @23px */
  margin-bottom: calc((60 / 23) * 1em); /* 60px @23px */
  font-size: calc((23 / 18) * 1em); /* 1.2778em = 23px @ font-size: 18px */
  line-height: calc(30 / 23); /* 1.304 = 30px @ font-size: 23px */
}

h2 {
  margin-top: calc((60 / 21) * 1em); /* 60px @21px */
  margin-bottom: calc((30 / 18) * 1em); /* 30px @21px */
  font-size: calc((21 / 18) * 1em); /* 1.1667em = 21px @ font-size: 18px */
  line-height: calc(30 / 21); /* 1.4286 = 30px @ font-size: 21px */
}
1 Like

Pushed another commit to fulfill the request by @Daveb08.

If you look into the new css file, you can modify the variable --leaf-handle at the beginning:

.theme-light {
/* ... */
--background-quick:             #f7f7f7;
--file-hr: 						#ecebea;
--leaf-handle:					#ecebea;

You can make it darker by replacing #ecebea with #bab9b8 or any other color you like.

BINGO!!! You’re the man!

Cool, makes sense.
For anyone who does want to override this, you can add the following snippet to the end of obsidian.css:

/* Ensure headings are distinguishable by font size in preview mode */
.markdown-preview-view h1 {
	font-size: 24px;
}
.markdown-preview-view h2 {
	font-size: 20px;
}
.markdown-preview-view h3 {
	font-size: 18px;
}
1 Like

@rcvd is it possible to reduce the font size in the edit window of the Theme to be something less than the current size and something larger than the font in the Note/file column?

Standard Font Size is 16px and 13px in the site column. To change it, add the following to the bottom of the css file:

.markdown-source-view {
    font-size: 14px;
}