Ah yes, I have some other CSS that is affecting the colors. The code snippet above will only affect the size of the icon. You can see the other styles I have in this comment if you want to play : Share your CSS
More generally you can adjust the link color by changing the value of
a {
color: <YOUR COLOR HERE> !important;
}
in userstyle.css
As promised at issue #2690 â Zooming out deforms table borders in v1.0.193:
Instead of fighting a loosing battle, it seems better to avoid overlapping of borderlines. That will make the CSS more complicated, but I think it's doable. I will publish about it when I've found time to sort this out.
I have written down my insights in some underlying CSS/HTML mechanisms here. Unruly stuff, I must say. I also added a TOC, as I hope to publish more about CSS et al.
One more question Amanda,
You removed the Layout button from the menu (Ctrl-L), but I was used to it⌠How can I get that back from your userchrome in the similar style as the others?
Thank you,
Lourens
I started collecting all the posted themes with screenshots into an awesome-joplin list. It seemed like a good way of collating Joplin-related community configs and tools. Apologies if I missed anyone!
@Rolograaf itâs still there, but I did reorder it.
The code that is affecting those is
/* toggle sidebar */
.header *:nth-child(1) {
order: 1
}
/* toggle notebooks */
.header *:nth-child(2) {
order: 2
}
/* new note */
.header *:nth-child(3) {
order: 5
}
/* new todo */
.header *:nth-child(4) {
order: 6
}
/* new notebook */
.header *:nth-child(5) {
order: 4;
margin-left: var(--base-size-24);
}
/* layout */
.header *:nth-child(6) {
order: 3
}
/* search */
.header *:nth-child(7) {
order: 7;
margin-left: auto;
}
You can remove that to get them back in the traditional order.
Sorry Amanda,
After asking I noticed the shift of the icon, how old habits die hard. (and users are stupidâŚ)
That is perfect thanks for the code-detail.
Also, I have changed the icon color to primary and find it looks much better (personal opinion)
thanks again
I have added my CSS files here: https://github.com/TobiasDev/Joplin-Custom-CSS
If anyone would be interested in checking it out.
There is one thing I havenât been able to change, that is the checkbox design in the note-list. Hopefully I can figure that out soon to make them fit with the new style as well.
No problem at all, glad it's working. 
I will check out changing the icon color. I'm mostly using keyboard shortcuts for those, so I tend to ignore them.
I was able to change opacity and add margin of the notelist checkbox with this selector:
.note-list input[type="checkbox"i] but it seems like most of the checkbox styling tricks require a label to modify, which this checkbox doesnât have.
I have a feeling you might already know that since your markdown HTML uses the label trick, but just wanted to call out the selector in case it helped.
Is there anyway to change UI positioning in CSS? What i mean is moving search bar, sidebar, etc
It wouldâve been possible if the whole layout was flex based, But I donât that it is.
yes it's possible to change some things, see above where uxamanda's theme reorders the top bar
I'm not sure about the entire application though. I would err on the side of it not being possible, but I imagine that someone needs to try.
I made a couple of themes based on the work of @uxamanda and @tessus.
They are for the Dark Theme and Dracula Theme and are Synthwave influenced.
I have some troubles with the dark theme trying to change the backgrounds of the whole app. I get it but either I lose the mouse cursor or I lose the background when selecting text.
These are how they look. If anyone is interested in the code, I could upload it somewhere.
Looks cool! Good work. Would love to see the code, especially for your markdown coloring.
Sure,
You can get it here markdown
And here whole app
Itâs for Dracula Theme, just change the background to make it work with other theme.
Also, uncomment header numeration if you like it.
This is the whole app dark theme here but as I said, It breaks background selection (you donât see what you select with yout mouse). Maybe you can fix it.
Try changing lines 46 - 52 to this:
#react-root {
background-color: transparent !important;
}
#react-root > div > div{
background-color: transparent !important;
}
That should keep the transparency from cascading all the way down to the selected text.
I am an not a developer in any sense but want to share a small contribution. I use this colored boxes everywhere in my notes and my goal was to make it very simple, so I used custom tags.
b-gray, b-green, b-red, b-blue, b-orange, b-pink, b-purple {
width: 90%;
display: block;
margin-left: 20px;
padding: 10px;
border: 1px solid;
border-left: 5px solid;
border-radius: 2px;
word-wrap: break-word;
box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3) ;
}
b-gray {
border-color: #b1bcc2;
background-color: #e9edf0;
}
b-green {
border-color: #5fa04e;
background-color: #c5e5b4;
}
b-red {
border-color: #f65354;
background-color: #fad3d4;
}
b-blue {
border-color: #229ade;
background-color: #bbe5fb;
}
b-orange {
border-color: #cf7506;
background-color: #faf3d3;
}
b-purple {
border-color: #af74e8;
background-color: #ead9fb;
}
b-pink {
border-color: #ed5393;
background-color: #fad3e5;
}
That worked, thanks!!!
Thanks, it works fine.
