Plugin: 🎨 macOS theme for Joplin

Awesome Plugin! Beautiful and works (almost) perfectly.

One small problem, though. The icon for the "random" plugin doesn't show up. On default Joplin it kind of looks like a shuffle symbol

Here's a picture of the highlighted tile.

Screen Shot 2021-08-31 at 1.12.34 PM

Also, in the rendering mode, the backlink plugin icon doesn't show up either:

Screen Shot 2021-08-31 at 1.13.41 PM

I know it would be virtually endless work to constantly plug in new icons for every plugin, but is there some way that I can put something in there? Unfortunately I'm not very tech savvy, I just downloaded Joplin because it has pretty much every feature I could ever ask for, it's free, and it has this awesome plugin community.

Note: I'm on macOS Big Sur and the problem is present with both SF Pro and Phosphor.

Otherwise, like I said, works perfectly. And I'm fine clicking on that blank tile for the time being! Thanks again.

1 Like

Hi there,
Since the last update all fonts render bold ... any ideas?

I have finally been able to install the theme an love it. Thank you so much :slight_smile:

But I have one question: I tried to remove the folder icon on the right, because I added unicode emoji to the notebook names. Looks a little bit weird to have to icons next to each other an I dont want to rename all my notebooks. Is there someone with the same problem who has some Custom CSS to hide the folder icons?

A picture to show my problem:
grafik

And I have the same problem as @B0BIC. The icon for the Note Graph and BibTeX plugins are not rendered correctly. The Note overview and backlink plugin icons work just fine.

You could try this in userchrome. Seems to work but not checked for anything unintended.

.list-item::before{
    display: none !important; 
}

That kills the tag icons as well, but its good enough. Thanks!

Didn't even think of it. Try this:

.folders .list-item::before{
    display: none !important; 
}
3 Likes

The theme is awesome, great work! I’ve been using Joplin for awhile and, although it’s very powerful, I think your changes are definitely a big improvement. I was wondering, though, if you could share the theme's original userchrome and userstyle CSS? I was hoping to get ideas from it and make adjustments to personalize things. Thanks!

Thanks @astro9 ! The source code you can find on Github: GitHub - ajilderda/joplin-macos-native-theme: Native looking macOS theme for note taking app Joplin

1 Like

I found a little bug using the dark mode of your theme. (I am using the snap package on Ubuntu, but I dont think it is relevant for the problem)

If I select some text to copy it, it works fine on the black background, but in a codeblock the background-color and the highlight color are the same, so I cannot see which part I selected.

Thank you so much for making this. This theme is gorgeous.

I just noticed that there's no color indication showing whether or not a note has been published via Joplin Server.

@Yann1ck This is probably related to the ‘Markdown editor dark’ option you have selected. Does changing this resolve your issue?

@Shamp0o I don’t use Joplin Server myself. What does it look like with the default theme?

The font color is changed to yellow.
Screenshot 2021-11-14 at 22.15.57

That was the problem. The base16-dark one is not working. Switched to another one and everything is fine.

You might want to update your plugin to account for the new sort order buttons introduced in Joplin v2.6.2. The color of these buttons is not affected by the Accent color set in the settings of this plugin. Using any Accent color other than blue looks off.

@Shamp0o Yes I saw that also. Personally I'm not a fan of the new button there. In the Github issue I posted the following:

[...] yes, this definitely needs fixing, but imo within Joplin itself. I find the whole split button weird and the icons confusing. Since this is just a theme my options are limited to replacing the icons, but that doesn't really fix the UX-design problem imo. Also, there is not a good macOS UI pattern for this, which is why I'm hesitant to pick this up.

If you have any suggestions how to solve this in a 'mac-like' way, I'm all ears.

I believe the choice of icon was fairly limited as to what was available in the free version of fontawesome. There was a discussion about the topic of the entire feature but other than me it seemed nobody had any particularly strong feelings on the UI/UX decisions.

Out of interest what would be your preferred approach to implementing this function in the UI?

I'm not so involved here, so never saw that discussion. :sweat_smile:

What I'd explore is combining the two buttons into a single dropdown. Take for example this context menu from the Windows 11 design docs. The • indicates the value is selected.

image

So you could do:

name
• last updated (= selected)
creation date
custom order


• ascending
descending

This has two advantages. 1. you have clear text labels in the dropdown (as I said, I find the icons cryptic), 2. it adds only one dropdown button in stead of a split-button. But still you have to add a dropdown caret there where space is limited...

When adding features at some point you reach the stage where you need to make changes to other parts of the UI, and maybe that point is now reached? :slight_smile: Just my two cents!

2 Likes

This was my initial thought as well (I made a horrible mashup image at the time as demonstration - I'm sure I could do much better now :smile: )
image

The argument against the dropdown idea was that it should be possible to "cycle" through the different modes at the simple click of a button (well, 1.5 buttons) rather than having to seek it from the dropdown which is still presented in the main toolbar dropdowns.
I didn't (and still don't) know of a commonly used metaphor that would suppport this exact workflow so I left it to the comment of people who may know better.

I finally made some time to work on this:

2022-03-06 16.48.48

Doesn't look too bad, does it? :blush:

9 Likes

It certainly doesn't and I really like it, thank you for your efforts!

1 Like