Material theme for Joplin 🎨

[ltndat]

Hi guys,

I just use Joplin for a few time. And now, I switch to Joplin as my primary note app . But, for the theme, I like Material theme as well and it not in Joplin .

Any supported for this? I'm a developer and always ready to work together to make material theme for Joplin.

[Daeraxa]

You can make your own theme and publish it as a package - there are other themes published like this you can reference.

[ltndat]

You mean, to publish as package for Joplin, for everyone can use it, bro ?

[Sinacs]

Hi and welcome @ltndat,! It would be great if you would like to publish your work for everyone, and below are serval choices for building your theme:

1. Making a custom CSS theme
2. Making a theming plugin
3. Making a built-in theme
4. Making an external interface

[ltndat]

Yes bro , I early work for this. But sometime, I need for help. May everyone can help me .
@Sinacs Where the guide doc for building custom CSS theme?

[Daeraxa]

There isn't a guide as such because things are subject to change.

There are plenty of helpful resources though (mostly in the wiki section).

Introduction to customising Joplin (userchrome.css & userstyle.css)

Joplin has several internal stylesheets that control what Joplin looks like to the user. However two have been provided that allow the user to customise the app. Joplin uses its built-in styles but these two files can be used to override those styles. These files are just like the Cascading Style Sheets (CSS) used when creating web-sites. The files are called userchrome.css and userstyle.css. userchrome.css allows styling of the app itself, including the Markdown Editor, userstyle.css allows s…

Share your CSS

I would be curious if anyone would care to share their userstyle.css snippets and perhaps a screenshot?

Joplin Customization

This page is a collection of CSS tweaks to customize Joplin (e.g. editor, rendering, ...) To discover CSS classes and types refer to this comment Plain editor (no color, no font changes) userchrome.css Joplin version tested on: 1.1.4 div.CodeMirror-lines * { font-size: inherit !important; color: black !important; font-weight: normal !important; text-decoration: none !important; } Example [plain_codemirror] /ref dpoulton comment Dark Theme Mermaid Flowchart (Flowchart only) users…

[ltndat]

Joplin haven't intended to add Material theme to source code. I mean, use it for cross desktop and mobile app as well.
I tried custom userchrome.css and userstyle.css on Joplin desktop, it worked perfectly. On mobile app, I didn't see options for it.

[Sinacs]

Currently, the mobile app is not supported custom CSS and plugins. So, if you want to create a theme that fits both mobile and desktop, the only way should be to learn and join Joplin's core contribution and create pull requests on the GitHub repo.

I think it would be nice to get started with only adding the material colors to both devices first, just as an option for the color. It would be the easiest way to create consistency between them. On the other hand, since you have created the consistency by colors, then changing the UI can be a separate topic because you can have different options:

1. Not going to touch the mobile app anymore, stay focused on building theming plugin on the desktop. (or custom CSS theme)

2. Dive deep into Joplin's core contribution, and start working on both UI.