Plugin: 🎨 macOS theme for Joplin

Hi,
I just installed the plugin, now after restarting Joplin I see the theme is in action. But unfortunately there is no way to deactivate it again. Also it does not show up in the prefereneces - appearance - theme-list.

I can select a different theme from there but each time I leave the preferences the macOS theme seems to be active again.

Is that an issue with the plugin or with my Joplin installation? Thanks for any hints!

Hi @JOJ0 , hmm interesting. I also don't see the theme settings button in preferences anymore. :confused: I guess some Joplin internals changed. Will look into it. To completely deactivate the theme you can use this switch under 'Plugins':

1 Like

@JOJ0 Sorry, I misunderstood your question. The theme is not listed under 'Appearance › Theme', but has it's own dedicated tab named 'macOS theme' in settings:

Hi, very neat theme, thank you!
I think I discovered a little bug: The markdown and render views are not synchronized correctly...when I scroll to the end of a long note, the cursor is in the middle of the view in the markdown view (as it should be) and at the bottom in the render view. Do you think this can be fixed somehow?

See those screenshots

Without any custom theme:

With the macOS theme:

Kind regards!

That probably is not a bug, but the synchronized scrolling mechanism that keeps both views synchronized for posts of different lengths with different content types. @ken1kob wrote this great doc about it. Or do you mean something else?

But the viewer is definetly out of sync with the theme turned on und in sync when turned off. At least at the end of the file...

Hi, thanks for the great work! I have only one question :slight_smile: How can i change the font size in the editor?

I noticed that with the plugin activated, the cursor property is set to default instead of pointer when you hover over a plugin title under Options -> Plugins or when you hover over the "Copy token" link under Options -> Web Clipper. I searched through the files and I think it should be due to these lines:

/* src/scss/elements/_elements.page.scss */
a {
    cursor: default;
  }

Best regards!

hi @MrKanister , that indeed is the selector that is causing it. Within Joplin's main interface I consistently override all cursor: pointer, because... have you ever seen a pointer while navigating your OS? Me neither. :slight_smile:

However, within Joplin's settings I don't consistently override it and I'm hesitant to do so, because I want to touch Joplin's settings page as little as possible. But until we have a :has()-pseudo class, it is hard to prevent the cursor: default in the settings page on some elements.

1 Like

@andrejilderda - My apologies for not posting this issue on Git. I didn't identify a quick way to upload a gif to an issue on Git. As seen below, a black screen appears to flash briefly when switching notebooks using the below configuration. I was curious if this is within the realm of the plugin capability to prevent the flash? I suspect it has something to do with using the 'Dark' theme in Joplin, and then specifying the MacOS 'Light' theme for the plugin. I currently prefer this combination as the 'Dark' theme applies to the Settings (Tools > Options) panel in the application (whereas the MacOS plugin has no bearing on the Settings).

OS: Linux
Joplin: 2.7.15 (latest)
MacOS Theme: 1.3.2
Settings: MacOS theme light with dark sidebar; 'Dark' Theme under the Appearance tab (Joplin setting)

Notebook Switch Flash

Hi @joplin_user, the tinyMCE iframe gets fully rerendered when you switch between notebooks. What you see is the original background, just before the theme styles are reloaded inside the iframe. So unfortunately I can't resolve your specific issue.

@andrejilderda - Thanks for the reply! Since this is the case, what do you think about the plugin changing the Joplin 'Theme' setting under Tools > Options > Appearance to 'Light' in order to provide the best user experience? Does the Joplin API allow plugins to make such app level settings changes?

Edit: I just realized this is also an issue with using the MacOS 'Dark' appearance plugin theme at the same time as using the 'Light' Theme in Joplin settings. We would have to flex the Joplin Theme based off of the selected MacOS Theme.

I don't think Joplin's plugin API provides a method for setting Joplin's base theme (and I also wouldn't really want to force this on users tbh).

@andrejilderda - Thanks for the reply. Do you think it would be helpful to include some language around this behaviour on the README.md so that folks can apply the best looking theme? Possibly under the 'Disclaimer' section? I don't want to sound nit-picky here, but I want folks to enjoy this plugin as much as I do and the work on the plugin is greatly appreciated.

Include something like the following on the README.md:

To provide the best theme experience, the following settings are recommended:

Joplin Theme: Light
MacOS Theme: Light or Light with Dark Sidebar

Joplin Theme: Dark
MacOS Theme: Dark

Currently using a Light Joplin Theme with a Dark MacOS Theme and vice versa causes flashes when switching notebooks due to limitations within tinyMCE iframe.

Absolutely! I've just updated the README. Thanks for your suggestion.

2 Likes

Thanks so much!

Hello, normally, Joplin's rendered view shows a solid thin line under the H1 heading. If the MacOS theme plugin is used, then no more.

I've tried to set:

h1 {
    border-bottom: blue 5px solid;
}

This is not working; "border-top" ist working.

h2 {
    border-bottom: blue 5px solid;
}

is also working.

Any ideas?

hi @Nordiger , try:

#rendered-md h1 {
    border-bottom: blue 5px solid;
}

#rendered-md h2 {
    border-bottom: blue 5px solid;
}

In case that is not working you can always !important:

h1 {
    border-bottom: blue 5px solid !important;
}

h2 {
    border-bottom: blue 5px solid !important;
}

:lipstick:

Thanks. The !important is working.

Another problem. I've tried the following setting:

h1 {
    border-bottom: cornflowerblue 1px solid !important;
    color: cornflowerblue !important;
    margin-bottom: 15px !important;
}

margin-bottom: 15px !important; is not working using the macOS theme. Without the theme it's working.

Try a combination of the above solutions :wink: :

#rendered-md h1 {
    border-bottom: cornflowerblue 1px solid !important;
    color: cornflowerblue !important;
    margin-bottom: 15px !important;
}

That should work. I'd advise to put #rendered-md in front of all custom rendered markdown styling, since that is what the plugin is using also.