Awesome

Logseq miA theme

miA is a Logseq theme family inspired by the styling and typography used by macOS and iA Writer. All of the miA themes share a common aesthetic and support light and dark mode (based on the selection in Logseq's Settings). Priority is placed on providing a clean editing and reading experience in a familiar, productive environment.

Installation

miA is available on the Logseq marketplace. To see the marketplace, choose Plugins from Logseq's main menu. Once miA is installed, choose Themes from the main menu, then select the desired theme variation.

If you don’t see Plugins on the main menu, you will need to enable plug-ins: go to Logseq Settings from the main menu, then the Advanced section, and enable the Plug-in system. You will then need to restart Logseq.

If you don’t want to use the marketplace, you can add one of the following lines to the start of your Logseq custom.css file (you can access this file from Settings).

@import url('https://playerofgames.github.io/logseq-mia-theme/mia_mono.css');
@import url('https://playerofgames.github.io/logseq-mia-theme/mia_duo.css');
@import url('https://playerofgames.github.io/logseq-mia-theme/mia_quattro.css');
@import url('https://playerofgames.github.io/logseq-mia-theme/mia_sans.css');
@import url('https://playerofgames.github.io/logseq-mia-theme/mia_sans_compact.css');
@import url('https://playerofgames.github.io/logseq-mia-theme/mia_serif.css');
@import url('https://playerofgames.github.io/logseq-mia-theme/mia_serif_compact.css');

Customising the themes

The themes use CSS variables to control various aspects of presentation, and may therefore serve as a good foundation for user-specified typography choices. The following variables are available, and their purpose is mostly self-explanatory. Values specified by the miA Serif theme are shown as an exemplar.

Notes

1. Font feature settings may be used to specify, for example, non-slashed zeros (as in miA Quattro).

2. The title font applies to page titles and breadcrumbs (the path shown at the top of pages and in references).

Tips and tricks

Journal entries

There are two ways to view a Journal entry: from the Journals view where you can scroll through the different days, and the page view, where you see just the single day, plus its references. It can be useful to distinguish the two views. One way is by changing how the title is presented when in the journal view. For example, this CSS makes the journal titles italic and normal weight, giving journaling a more informal feel:

a.journal-title > h1.title {
	font-weight: 300;
	font-style: italic;
}

Matching title font for miA Quattro

For the Mono, Duo and Quattro themes, the System default font is used for page titles and breadcrumbs. However, the iA Writer Quattro font is [almost] a proportional font and is sufficiently compact to use for titles and breadcrumbs. If you use miA Quattro, add the following to custom.css to change titles and breadcrumbs to match:

:root {
	--title-font-family: "iA Writer Quattro S";
	--title-font-size: 18pt;
	--title-font-feature-settings: "ss04"; /* plain (not dotted) zeros */
}

(If you aren't using miA Quattro, you'll have to install the iA Writer Quattro font first.)

Credits

"iA Writer" fonts: Copyright © 2018 Information Architects Inc. with Reserved Font Name "iA Writer". Licensed under the SIL Open Font License 1.1.

IBM "Plex" fonts: Copyright © 2017 IBM Corp. with Reserved Font Name "Plex". Licensed under the SIL Open Font License 1.1.

rcvd for their Logseq Quattro theme, from which I took inspiration to make the first miA theme.

Licence

Licensed under the MIT License.