Homepage    |    GitHub    |    API    |    FAQ

Color UI options?

Hello there.
I'm very surprised by the lack of customisation of the notebooks labels, also notes label too.

I have a ADHD condition, and i realy need color to help my brain to organize large list of items.

I would be REALY helpfull for me to be able to use colors to organize notebooks and notes.

Have i missed an option ?

I didn't find any extention for that...

Thx for your help

(i'm french, so my english is very bad, sorry for that.)

4 Likes

You can use CSS to modify the various elements (for example each notebook depth can be modified as a different colour) but its not as simple to modify an individual item with a particular colour.

Hello,
Yes i saw that but it's not what i need as you said.
Is there a feature request about it ? i search for it, but i didn't find it.

Am I the only one who need this ? I would think it's a natural way to organize...

I can't recall many people asking for it. For me I organise via notebook heirachy, note order/sorting and tags. There are changes implemented and upcoming to the backend theming so it may be possible in the future or by a plugin.

You can style individual items using their data-ids. Notebook ones you can find using the development tools under the Help menu. Note IDs are actually viewable in the GUI under Note properties (the i icon). Each notebook and each note have their own ID, and you can target that with CSS. A bit clunky, as you will need to keep modifying the CSS when you add new notebooks and/or notes, but doable.

The code would look something like

[data-id="547ff9070bcb4400ad263c2c58489783"] {
    background-color: red;
}

Personally, I'd probably add some cool little icons for folders and notes, and then colour that instead of changing background or text colours (which will look kind of ugly). I'm actually going to give this a shot. I'll try to come back with an update later.

Edit:

Here you go :slightly_smiling_face:.

Adding the icons is not very difficult. I've just had to replicate the IcoMoon style without actually adding any elements. It'd be better if we had solid icons, but the embedded font is extremely limited. They do have solid counterparts in on their website, but adding them would require downloading additional files and using them in content. Not very difficult either, but I haven't had time to toy with it right now.

The colours you'd need to tweak to be more pleasant to look at, as these ones I've just taken willy-nilly to show the capabilities of the code.

image

The following goes to userchrome.css. I've also bumped up the font sizes a little bit, because I hate small fonts, and also the icons do look better larger.

.folders > .list-item-container > a { font-size: 14px !important; }
.note-list > .list-item-container > a { font-size: 13px !important; }

.folders > .list-item-container > a:nth-child(2):before,
.note-list > .list-item-container > a:before {
	font-family: "icomoon";
	font-size: 18px;
	margin-left: -18px;
	padding-right: 2px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.folders > .list-item-container > a:nth-child(2):before { content: "\e905"; }
a[data-id="2892da3b3b284d198102baf539220df2"]:before { color: red; }
a[data-id="4c77ef45329a4793b49464dac06909c5"]:before { color: green; }
a[data-id="0364bd1c054f492fb15a3d1d37f1a613"]:before { color: blue; }

.note-list > .list-item-container > a:before { content: "\e90d"; }
a[data-id="7e1567995f044feeb759787d5dc3c459"]:before { color: red; }
a[data-id="eb66919a2b5a43b79f6741334acb3c9f"]:before { color: green; }
a[data-id="3fe7befbb2f04ee8aa350cf391db855a"]:before { color: blue; }
a[data-id="7f448c2855ca43499849eb91c553c964"]:before { color: aqua; }
a[data-id="1bf774f31eb848e1bb4d37ca38bb46c8"]:before { color: orange; }
5 Likes

Welcome to the forum!

If you spend enough time on the forum, you will start to see the huge variety of ways people use and try to use Joplin. Many people ask about features that seem to them like an obvious requirement. There is nothing wrong with asking! Just be aware that very often a potential feature doesn't end up being very popular. Or that the particular way the app is built makes something that seems simple not so easy to do.

But by all means ask away! You never know what will strike a cord with others.

This is great! Thank you for this.
For me, also having ADHD, as well as Dyslexia, being able to do this easily would be fantastic. While I don't mind editing the css files once or twice, like I did to change text color within notes, you're right that this is a little chunky for what's worth for me.
If it was an easy one or two clicks, I'd be all for it! But that's just I little too much work.
Hopefully OP get some use out of it.
Thanks, Ava

1 Like

Hello !

It's...complicated.
the brain use Feature-based attention to navigate in what the eyes give to him. Basicly, it's involve color (contrast), shape and motion. Everyone use this at a different level.
Lot of people use color for organizing their stuff. We use it a lot in management with Kanban, mindmap etc.
I understand people differe in this area. But i think it's a major need for some people, some will need other thing.
ADHD is manly a difference in the way the brain manage the attention, my brain will more likely navigate rapidly in an area, i cannot tell him to stay in a specified area, so it need to get meaningfull information as quick as possible in order to have a meaningfull reading of the area.
Onenote and Notion use colors extensively. But...it's not open source :slight_smile: And joplin does much more.
Thx for your reply !

1 Like

Thx Tomas,
Very nice implementation.
I think, and you prove it, that everthing is there to do it.
I will look to do it manualy for now, thx you very much :slight_smile:

1 Like

You should also be able to use fontawesone icons. The limited icomoon set was added during the revamp of the UI.

2 Likes

You're welcome :slight_smile:. Actually there's a small issue with the notebook icons being placed over the dropdown carets (that are used to fold and unfold notebooks). I'm going to work on this and post an updated code later.

I actually did try to, but the icons didn't match the existing notebook and note icons, so I decided to stick to these to keep the whole thing uniform. Adding Font Awesome icons together with replacing the existing ones does sound like a possible solution though.

Edit:

I've fixed the code.

image

.folders > .list-item-container > a { font-size: 14px !important; }
.note-list > .list-item-container > a { font-size: 13px !important; }

.folders > .list-item-container > a:nth-child(2):before,
.note-list > .list-item-container > a:before {
	font-family: "icomoon";
	font-size: 18px;
	margin-right: 8px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Make note bottom border align with note text. */
.note-list > .list-item-container:before { left: 24px; }
.note-list > .list-item-container > a:before { margin-left: -18px; }

.folders > .list-item-container > a:nth-child(2):before { content: "\e905"; }
a[data-id="99b31e6b26404470b8b557a68e9ad962"]:before { color: red; }

.note-list > .list-item-container > a:before { content: "\e90d"; }
a[data-id="64646940baa34561a2775b6a20a18d09"]:before { color: red; }
1 Like

Someone asked a similar question on a previous thread and ended up choosing to name their notebooks starting with emoji as a way to add color easily since the CSS gets unwieldy. Just thought I'd share in case it helps someone, although not sure it solves your issue. Also works on mobile which is nice.

🔴 Notebook 1
🔵 Notebook 2
🟢 Notebook 3
🟡 Notebook 4
4 Likes

Thanks for this one. Much easier than playing around with CSS for sure.

I must say though that the last two characters aren't displayed properly in Windows, both here on the forum, and also in Joplin, so one may need to test these on all their systems before implementing them more widely.

image

Thank you for this I have been wanting and requesting that we get the ability to change notebook colors and no one mentioned this to me. That's why joplin is so versatile cause you can makes these sort of things easily in css. Thanks a lot for opening my eyes to the solution.

You're not alone on using color as an organizing aid. They make 3"x5" index cards available in different colors after all.

One of the minor things I miss from the Windows version of Evernote was that it allowed you to add color to your tags. Alas, this feature seemed to depend on the peculiarities of the interface with Windows and few people complained about it missing when they redesigned their apps to have as much of a common code base as possible. I suspect the feature could be added (somehow) to Joplin but the developers have a long list of things to work on and colored tags would no doubt belong near the bottom of their priorities. As they probably should be. I'm willing to live with white index cards after all.

After using Joplin for a while, I collected all CSS-codes which highlight a note in the note-list and put them in the userchrome.css (Preferences -> Appearance -> Show Advanced Settings -> Custom stylesheet for Joplin-wide app-styles). I was also hoping for easy visual customisation via Preferences or so, but setting CSS this way, works for me too. Also I made the scrollbars a bit thicker and copied some CSS from another Forum-member to add nice round corners to the tag list at the bottom of a note:

div.tag-list span {
    border-radius: 5px;
    color:white !important;
    background: #49a2d0 !important;
}

::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-thumb {
	border-radius: 5px;
}

.list-item-container.selected {
	background-color: #ffe083 !important;
}

.list-item-container.selected span.tag-label,
.list-item-container.selected span.title {
	color: darkslategray !important;
}

I also wanted to add that you can do searches for emojis too, if you use the goto feature. I'm starting to rely on emojis more heavily these days, both in notebook names and note names.

1 Like

Thx everyone for your reply, it's a very cool community !

It's seems the smileys are a good solution, and a custom css.

Actualy, graphit0 send me a pm some time ago about this, but i didn't understand at the time.