I've added an alternative icon pack (Phosphor) so that non-mac users can also use it (see the updated installation instructions on how to use it). I must say I think it looks as good as with SF Pro (GIF animation with SF Pro icons/Phosphor Icon):
@joplineveryday I can think of better ways for making the world a better place, but glad you like it. 
I have a very basic plugin running that loads the CSS into the chrome and note editor, adds some dummy settings and listens to changes. Now I want to generate some extra CSS based on the settings and append it to the DOM. But now I can only load CSS from a file, am I right? It would be nice if you'd be able to do something like this:
injectCustomStyles(`
:root {
--s-custom-property: ${foo};
}
`, 'macOsThemeUserPrefs');
Where everytime you'd recall injectCustomStyles with the same id ('macOsThemeUserPrefs') would overwrite/update it. What do you think Laurent?
The latest release fixes two styling issues:
That would require getting CSS to work in real time, without having to restart the app, and that's probably tricky as it's never worked this way. So I think you could write a description message on the config screen saying that the user needs to restart for the changes to take effect. Then on startup you simply generate a CSS file based on user settings and load this (after having loaded your base CSS file). I think that should work although it's true it's less convenient.
Having to restart the app is not ideal but also not that bad. You suggest to generate a file on startup. But is that even possible via the plugin API? Can you give a some pointers?
You can access fs-extra from a plugin, so all you'd need is call writeFile with your custom CSS. Something like this should work:
const fs = joplin.require('fs-extra');
await fs.writeFile(installDir + '/user.css', yourDynamicCss, 'utf8');
await joplin.window.loadChromeCssFile(installDir + '/user.css');
And yourDynamicCss is the string you've constructed your example above.
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.
@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:
These are the options in the settings panel:
Which looks like this:
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.
I think the "Hide note count" option might not be useful because you can already turn that off from under the View menu.
Would it be possible to load the Phosphor Font via CSS, instead of having it installed as a system font?
Yes, with the plugin that will be the case.
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!
This is amazing, thank you so much!
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.
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?
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?
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’.
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:
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:
So I guess it's overriding some default margin that maybe shouldn't be overridden?
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:
Also the ticking boxes are not displayed properly:
Any idea what the problem is? (I'm on linux if that helps.)
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. 
