Hi. I’m using the “Dark” theme with Joplin but I don’t like it as much as the “Dark” themes from other softwares I am using.
It is possible to add some adjustment option for the themes? Maybe some sort of .css themes so to be able to change the colours as I need?
Currently there’s no way of adding themes by just creating a theme directory in the config dir.
However, you can still have a look at the PR for the dark theme and create an additional theme and make it available to everyone. But check with @laurent first, if he even wants an additional theme. I think he’d be more interested in a theme plugin manager system, which works across all clients.
Or, there’s a also the possibility of using a custom css file:
Rendered markdown can be customized by placing a userstyle file in the profile directory ~/.config/joplin/userstyle.css. This file supports standard css syntax.
Hi tessus and thank you for reply.
I am using the portable windows version right now, so I do created a new file like this: “JoplinProfile/userstyle.css”
I edited the css file as follows:
====================
a:{
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: green;…
=====================
but nothing happens. I want to remove the underline of the links.
What it is wrong?
The CSS file is only loaded on startup, did you restart the editor after creating the file?
It’s also possible that it’s been created in the wrong location, you can double check that.
C:\Users\MyUser.config\joplin-desktop\userstyle.css
This is the location. Switched from the portable version to normal one.
I restarted Joplin but nothing happens.
I think you meant
C:\Users\MyUser.config\joplin-desktop\userstyle.css
Anyway, is it possible that when you close Joplin and re-open, it's not actually stopping the application? I.e. is it only closing to the clip tray? The application needs to be completely stopped.
I restarted the computer a few times since created the userstyle.css file. Nothing changed.
The correct path to the file:
C:\Users\MyUser\.config\joplin-desktop\userstyle.css
Oops I just noticed I had a typo in the path, but it looks like yours is correct.
I installed joplin on a windows computer to test this and the userstyle.css file worked correctly with the path you specified, but not with the css you provided. I’m not an expert on css but I think the a:visited doesn’t work with userstyle.css, perhaps because userstyle stuff is basically inline, or it could have to do with the renderer joplin uses.
That said, you can still customize links, but it looks like you have an issue with your css, there should not be a colon after the ‘a’ i.e.
a {
color: #FFFFFF;
text-decoration: none;
}
This worked on my computer, but what you have above didn’t.
Yes, indeed, this way it is working. Thank you.
~/.config/joplin/userstyle.cssis a PC directory, doesn’t work on a mac. Can someone find the good directory to add custom CSS style to Joplin on a mac?
The doc is pretty complete in general so if you don't know something that's where you should look first: https://joplin.cozic.net/#custom-css
Rendered markdown can be customized by placing a userstyle file in the profile directory
~/.config/joplin-desktop/userstyle.css(This path might be different on your device - check at the top of the Config screen for the exact path).
Thanks, I miss the line “check at the top”… But, though I go to the path /Users/username/.config/joplin-desktop/ (on mac), I don’t find any userstyle.css nowhere, and I’m not sure of what to do: if I add one file with this name, do I have to put it at the root of the joplin-desktop folder? Does it prevail on the default settings without erase it (or: can I get the default settings back)?
Is it possible to add several file to have the choice with the CSS style ?
Sorry for this question, but as I’m not a dev, I don’t want to make severe mistakes…
Afaik the css you put overrides the default one but if you delete the custom one, it just reverts back to the default one. Default isn’t deleted, so you can play around with the custom one.
You can have the userstyle1.css and so on and change as you like. It’s a matter of renaming and restarting the app.
Just add userstyle.css at said path and you are good. Just restart the app after the changes.
Hope this helps.
thanks, it helps !
Another question is: is there a template that could be use as a model to create the css ? Other markdown app showed me that the template changed with the app, with some difference in naming, adding colors, or so.
@pat3, what would you like to customise? Maybe someone here can give you some hints if you provide an example. There’s currently no template and I doubt there will be one (at least not an official one as this is too complex for me to support).
I can’t work with pink list, for example (to flashy for my eyes), but I used lists everytime, sometimes lists of arguments, that could be 40 or plus lines long; I’d like to limit the list color to the iphen, and not the whole paragraph.
I would have paired themes, a dark and a light one, also.
Though a template would help to create the custom css I’d like.
Best would be a system of themes like textmate have, reused and reshared for any text editor dev who want to use it.
I just understand, following another topic, that the CSS only concern the RENDERED markddown, though I thought about the raw markdown editor… Sorry for my misunderstanding that makes you loose timz :-/
Yes, you are correct. There’s no way to change the colors withing the editor.
I feel sorry of that, I really thought it was possible, as it is in lot of open source markdown editor (Mou, Macdown, etc.); I think it’s important, as I could spend lot of time per day in front of my text editor. Though, it’s not only a question of comfort, it’s also a question of ease: some color are to flashy, sometimes you work very late and you need a dark smooth theme…
There is already a dark theme if you’d prefer to switch to that. But I highly recommend you switch to using an external editor to edit markdown files. Typora is a very good one with a WYSIWYG editor and a selection of themes.
Let me know if you have trouble setting up an external editor!