Plugin: 🎨 macOS theme for Joplin

benmordecai · 2021-07-26T13:24:58.248Z

This is a great look. I am looking forward to it being a plugin since the manual installation leaves me messing with a language I don't really understand well enough to go mucking around with.

andrejilderda · 2021-07-26T15:28:35.963Z

@laurent Thanks! Wasn't aware I could use fs that way, handy!

@benmordecai Yes, messing around in the CSS is far from ideal. The plugin is actually finished* and makes customizing things a lot easier. I’ve also added a few extra options:

The Phosphor icon family is the default, and doesn’t require installing a font anymore,
Appearance: Auto (light/dark based on system preferences), always light, always dark or light with dark sidebar,
You can easily choose an accent color,
Ability to pick a theme for the Markdown editor

These are the options in the settings panel:

Joplin macOS theme - plugin-settings1392×1594 264 KB

Which looks like this:

Joplin macOS theme - pink3104×1974 516 KB

I think the pink is !

*I still need to update the readme and find out how plugin-distribution works. Plus this plugin relies on a function in Joplin which is not available yet in a stable release.

laurent · 2021-07-26T15:57:58.358Z

I think the "Hide note count" option might not be useful because you can already turn that off from under the View menu.

Dante0881 · 2021-07-26T19:55:08.668Z

Would it be possible to load the Phosphor Font via CSS, instead of having it installed as a system font?

andrejilderda · 2021-07-26T20:07:46.940Z

Yes, with the plugin that will be the case.

uxamanda · 2021-07-26T21:17:53.865Z

This is very exciting! Congrats on the plugin. How will it interact with other CSS? Will userstyles.css etc also load?

I was also wondering about how this could interact with the CSS that other plugins use, such as --joplin-background-color etc that are seem to be defined within a plugin iframe (and are therefore not able to be affected by custom CSS at the moment). It would be really nice if you could make a 1-1 mapping with your colors so that plugins "automatically" (if built to spec) would use your theme colors. Probably out of scope for this!

adam.nz · 2021-07-26T22:59:19.010Z

This is amazing, thank you so much!

andrejilderda · 2021-07-27T15:33:20.421Z

Well, an iframe creates a new CSS scope. So even if I'd set the --joplin-background-color in the parent, plugins will not have access to it (unfortunately). The only solution to this would be that loadChromeCssFile(...) would also append the CSS to all plugin iframes or do some postMessage'ing to the iframe. This we can not achieve via plugins at the moment.

s.umlaut.o.llner · 2021-08-05T11:34:12.447Z

First of all this theme is brilliant - Thank you for sharing it!
I do have an issue on Linux though, some of the icons (mainly from plugins) don't appear in the bar ... for example Strikethrough, Outline etc ... any ideas what I am doing wrong?

andrejilderda · 2021-08-09T13:45:00.723Z

Hi @s.umlaut.o.llner , you're not doing anything wrong. It's just that I'm probably overwriting the default icon font family. Can you tell me what icons are missing and what plugins you're using?

andrejilderda · 2021-08-09T17:43:35.682Z

I’ve just released the plugin. Installation and changing theme settings is now much easier and doesn’t require messing around in CSS anymore. See installation instructions in the first post.

Do make sure that you’re running at least Joplin v. 2.2.4, which is still in beta. You can do so by checking 'Get pre-releases when checking for updates’ under ‘Application’.

laurent · 2021-08-09T17:56:05.859Z

Thanks for sharing @andrejilderda, it seems to work very well overall. There's just something a bit off with spacing on the Rich Text editor. Without the theme enabled, everything is aligned to the left, and there's a space between H2 tag and the content below:

image1258×536 52.5 KB

But with the theme, left alignment is less consistent (not sure if on purpose or not), and more importantly the space between H2 and content below is too small, for example compared to the space between bullet points:

image1258×536 31.1 KB

So I guess it's overriding some default margin that maybe shouldn't be overridden?

109767345 · 2021-08-11T12:34:37.919Z

Thanks for the wonderful theme and plugin! Unfortunately, on my machine there is a big issue with displaying notes with the theme, the word spaces and numbers are displayed all wrong:

image1920×1704 220 KB

Also the ticking boxes are not displayed properly:

image844×639 47.4 KB

Any idea what the problem is? (I'm on linux if that helps.)

andrejilderda · 2021-08-14T14:43:19.275Z

Hi @109767345 , that's interesting. Do you maybe have a line with text-align: justify; in your userchrome.css maybe? If not, are you using any plugins?

@laurent yes the indenting on the left is to give the text some more breathing space (which is similar to Apple Notes and Evernote).

I indeed tweaked the vertical margins of the headings. This looked nice on running text, but I've also found on a few of my notes where it doesn't. I will change this in a future release.

andrejilderda · 2021-08-16T13:21:52.847Z

I've just pushed an update that increases the spacing for the headers based on the 'editor paragraph spacing'-setting. The full changelog can be found here:

github.com

ajilderda/joplin-macos-native-theme/blob/main/CHANGELOG.md

# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

## [1.1.0] - 2021-08-16

### Added

- This CHANGELOG file.
- Add dividers between horizontal and vertical panels.
- Add missing icon for Outline plugin (#5).
- Add search panel styling (#6).
- Add checkbox styling in Markdown preview.

### Fixed

This file has been truncated. show original

109767345 · 2021-08-18T16:54:06.569Z

Hi @andrejilderda, my userchrome.css is empty! I'm using the following plugins: Automatic Backlinks to note, Kanban, Quick Links, Rich Markdown, and Simple Backup.

andrejilderda · 2021-08-18T17:38:55.089Z

Just to make sure, which version of Joplin are you running? And are you using the latest version of the macOS theme plugin (v. 1.1.0)?

benmordecai · 2021-08-18T18:58:48.294Z

I am running into an issue where on joplin 2.3.3 from the AUR is not showing most of the toolbar icons. Only H2 is visible. This problem does not exist on Windows.

andrejilderda · 2021-08-18T19:11:54.595Z

What icon family do you have selected in the plugin settings? Phosphor icons or macOS native?

benmordecai · 2021-08-18T19:28:48.443Z

Phosphor