Why is custom CSS an important feature for you?

[whitewall]

[Related, are their currently instructions on making themes? I couldn't find here https://joplinapp.org/]

[laurent]

You would start either from the light or the dark theme (depending on the overall appearance of your theme) and tweak the colours from there, but yes that could be better documented.

[Rob]

Main reason I use custom css is to remove the ugly icon next to internal links, and to make the internal/external link distinction by link colour instead.

[ines]

I joined just to share my view on this topic, so that should show you how much this option really is appreciated and used

Background:
I managed to switch to markdown because of joplin. It was the only app with markdown that works with linux and android at the time when I was looking for a new one (cca 2018/2019). Previously I've used evernote and google notes and whatnot for some personal stuff (and ended inventing my own marking system before I discovered markdown exist); cherrytree for lecture and tech notes (2013-2019); before that I think I've used notecase after txt files in folders ended being too cumbersome - when you want to search.

Now I use private github repo and .md files and edit them in atom for tech and lectures/meetup notes, so atom covers organisation, and I have benefit of versioning. Joplin I intensively use for more personal stuff, general todo lists and convenience of editing and viewing from the phone. And google docs for collaborating with my language teachers during online lessons.

I prefer markdown and only editor mode, mostly because I like to be able to edit when I notice something, without toggling the view and then scrolling to the point (in both setup, atom and joplin).

I like colors because I don't need to parse text in my head for meta meaning, I can skim through colors and locate fast what I want.
Yes, I have tendency for having very long notes, that's why I went with atom, in order not to hold everything in one db but still have it easily accessible. I had to split my first cherrytree into several db files (totaling 160 mb, but loaded with pics).
Joplin cannot work with several db files, right?

My note repo is around 9 mb and joplin db is 4 mb, both only plain text, so that'd be a few thousand pages if printed out

So, I'm definitely a heavy note-taking user.

I realized that I can tweak atom md colors several months ago, and yesterday thought about if something similar would be possible with joplin. Spend whole night tweaking and I'm very happy with the result.

Answers to why is CSS important feature for me, especially userchrome.css:

• took me just several hours to get great results
• there's no currently available theme that fits my needs
  • they either have too little color, or colors they use are too intense, or they're light
  • I had the same situation with atom themes available for download, so that means that what bunch of people like, I don't
  • I've checked using default ones on both editors (I was at version 1.0.x until few hours ago and oh boy, was the upgrade awesome )
• if only option is to do custom theme, that would take me insanely longer
  • and I suppose I should have to tweak (and understand) all components, and not that I could be able to change only 10-20 colors with the theme?
  • unless you have in mind some plugin that would inject css into current theme (and with that solved the wish[1] below)
• I don't have time nor desire to create my own themes and I really appreciate when small tweaks are available for apps I use
• to the point that I'd be ready to pay some (small) amount for (unlocking) such feature (ok, this isn't common reasoning I guess)
• no clue what plugins can do, I've just discovered them today, but when I looked at one, it also looked complicated like a theme compared to several lines of css

reflections

• [1] I'd very much like to see option for this css edit on android app as well, or ideally, importing this one, since I'm using it even more often than desktop one for editing
• it would be great if we could disable preview on android and have just markdown, plus awesome would be if cursor position could be remembered
• to the point that I'm willing to learn android to help with it, since I doubt I can figure out alone how it could be done, so I won't offer myself for that, unless it's really easy

Thanks for the great editor

[dpoulton]

As well as changing how notes are rendered I also use css quite a bit to modify interface elements, such as:

• Remove the icon before "All notes" in the Notebook pane - Cosmetic
• Tweak the font size and weight in the Notebook pane - Legibility
• Increase font contrast in the Note list pane - Legibility
• Remove the "New to-do" icon - Not needed in my use case
• Remove the "Spell-check" icon - Not needed by me once set
• Increase contrast for active Note toolbar icons - Legibility
• Remove the WYSIWYG button - Not needed in my use case
• Change tags at the foot of a note to look like the "In: Notebook" indicators - Cosmetic

[symisz]

So, why is custom CSS important to you?

I think it's the familiarity with CSS and accessing control over styling is what creates a feel for importance for such a great tool. But I must confess that its more the control over style versus getting used to a style that is handed to you that probably makes CSS a loved tool. And I must say CSS pretty darn great.

That said, I've also got used to particular styles that I initially wanted to change with CSS and to be more specific its the Outline plugin versus the Joplin's legacy [toc] I did want to change, but got over my wish to restyle, the moment the plugin added features that the legacy [toc] lacked. Which is copying a link on right click.

The current style is already good, but with some CSS control I would nitpick some elements and even want to add more code-highlighting support to some code-syntax blocks.

Edit: I mean I think customization is what draws a lot of creative users in and not just with CSS styling, but also choosing your plugins or even contributing to Joplin's repo. CSS is also a fairly accessible tool for new users who are also new to coding, to start modding Joplin to their likes.

[ines]

In short:

The best tool is the one you use, most loved is the one you've made.

Ability to tweak brings ownership, especially when it's visual and serves as a constant reminder of 'this one is mine'.

[whitewall]

@symisz

CSS is also a fairly accessible tool for new users who are also new to coding, to start modding Joplin to their likes.

This is an interesting point (although it probably can't hold up as a justification). For non-coders css is a far off secret city. For aspiring coders, css is is the glorious welcome ceremony to that very city.

And kind of as a halfway point, the ability to do custom css means that non-coders may be lost on their way to the city and be helped by a kind coder-stranger along the way to get where they want to go, even if they never make it to the city. (by getting specific instructions to paste css into their custom css file)

[seatrout]

I can do minimal, old-fashioned css, because I used to make my own web sites by hand. But I really can't decipher what's going on with the css in Joplin. There is so much and it's so hard to work out which bits are being applied to which parts of the screen.

All I want to do at the moment is to change the white background of the notes and the markdown editor to something less glary (no; I don't want a fully dark theme). I can't find out which element needs restyling. Can anyone tell me?

Otherwise I could play with the theme file, but what then? I mean, how would I get Joplin to pick up on my edits or to use an edited copy of the file I made?

[blank]

@laurent

And these customisation you make, would it not be possible to make them by creating a theme?

I don't feel the need to create a theme entirely.
I use Dark mode in Windows 10, I checked the option in Joplin to use this theme and I'm quite happy with it.
From there, I've just changed some colors/font sizes, a few margins/paddings here and there.
It took me 15 mn.
That's what I like in Joplin, among others things : quick customisations when the need is there.

Creating a theme, even from an existing one, is much more complex and would take too much time for little benefit. I prefer taking notes instead !

[whitewall]

I wonder if what you meant, @laurent, when you suggested creating themes, was that themes could be designed for more use cases? For example, I use a small laptop, so I could probably benefit from a "compact" theme for many of the changes I want to make.

[uxamanda]

@laurent

I don't use custom CSS actually, and I'm curious why is it an important feature? Is it because the available themes are not good enough? If so, wouldn't the solution be to create more themes? Then theme variables could be made available to plugins, thus making them automatically match the current theme. I feel that's a more elegant solution that would be available to everybody, even those who don't know CSS, but maybe I'm missing something.

was commenting on this Enable userchrome.css for plugin webviews - #11 by laurent thread, but realized the convo moved here

I am realizing that you might have gone further with theme development than I realize. I think your idea of having the plugin developers deeply integrate into the theme is ideal.

There are a few pieces of a great theme, in my opinion:

• Fonts
• Colors
• Icons
• Layout
• Spacing

It seems like fonts/colors might now have deeper integration with variables, I will check it out. The layout part is handled well from the Change Application Layout menu. I still would like the ability to adjust spacing (compact mode / whitespace mode), but not as big of a deal. Would love to have custom icons, but I feel like that is a stretch since the app uses a icon font.

For me, the main use for custom CSS is to override the base theme decisions – specific requests I've seen asked about recently are making font sizes different in note panel vs Markdown panel, changing the size / color of scrollbar, changing how the TOC is displayed (hide until hovered).

As someone who is much more familiar with HTML / CSS than building the app / modifying the code, I have really enjoyed the ability to "hack" Joplin with CSS. It makes the app extremely flexible in a way that no other app I've used ever has. To make this flow better, having an ID on each module in the app and applying state with CSS classes would be really great. I realize this is easier said than done.

tl;dr: Improving theming is awesome! Having the ability to customize CSS is whatever way someone can dream up – that's a super power.

[joplin1]

I use it to match the rest of my Linux system theme (gruvbox). I didn’t know if there was a custom theme option, but it was incredibly easy to find a preconfigured gruvbox css file for Joplin on GitHub via another user and then make minor font and symbol tweaks to match it to my system. The whole process took maybe 5 minutes from start to finish. If there is a way to customize themes, idk if I’d be able to do that as quickly especially since CSS is such a universally understood and easy to tweak language.

[bartatgithub]

You could do like this; 3 themes:

• light
• dark
• custom

The custom one can then be modified by modifying the CSS of it and saved as custom 1, 2 , 3, ...
I personally don't like that i have to modify a custom CSS file somewhere in the users directory, and i am a designer/developer. It would be easier to custom a template.
It would be nice that this works the same for desktop and mobile.

Why keeping the possibility of CSS theming:

• CSS is standard and it's not code but a language that's quite simple to learn,
• We are all individuals living togheter in a connected networked world.
• And most important i think; a lot of Joplin users are 'creative' person's in design, code, writing, ...
• So, we like to tweak the look of applications we like and use a lot, because we are in one way or another 'creative' people, thinkers, makers, coders, .... If we where not we would use the proprietary applications out there and don't bother with 'making it more difficult', anyway i would do that.

[Jerry]

I have no preference between custom CCS or a theme if it's easy to deal with it.

I wish to be able to customize Joplin fully (fonts, colors, buttons, sidebar, wordings…) and keep this customization for next version.

[tessus]

@Jerry

keep this customization for next version

Well, we always said that we cannot guarantee that css elements will stay the same. Especially after the new interface, many elements have random class names.

The first step would be to actually adding names for certain css elements:

List of CSS elements which should have a class

In most cases using a selector would probably work, but there are some that will select other elements in different screens. e.g. I changed the color for the “warning” in the attachment screen: [image] This is what happens, when you open preferences: [image] Therefore a ui-warning class is the only way to change this without side-effects. This class should also be used for Preferences -> Encryption -> E2EE text and Banner (see first 2 items in above list). I understand that there are more…

[ambrt]

I would second the opinion about doing modification quick.

There's also community aspect of it - people can ask and answer about some tweaks and apply them themselves without waiting for theme author to improve a code.

[PatrickM]

For me, I couldn't stand the gray on white text color in the editor, and wanted a way to force it to black on white

[zen-quo]

for the most part, i use it to change the colors to make it more legible for me which seems like a subjective thing (i see most people prefer dark themes). it's nice to have a way to customize the app to even make very small changes like changing the color for ==highlighted text==.

i had emoji display problems. i think it's because i'm using a relatively older version of windows (8). i was able to solve this issue by myself by adding some emoji friendly fonts to the font list. i'm not sure if there was no way to edit the css, that it would be practical for developers to spend time on this small issue.. which probably only few people have.

[symisz]

this is a pretty late reply and in case you are still looking for the CSS selectors to style the elements in Joplin:

#react-root .CodeMirror-scroll {
    background: #292929;
}

#react-root .folders div {
    background: darkslategray;
}

#react-root .folders div:hover {
    background: tomato;
}

#react-root .list-item-container.list-item-depth-0 {
    background: #292929;
}