@former_evernotist I too found the default light theme lacking a little bit of contrast.
Below is some css I have collected over the years to put a bit of contrast into the Joplin light theme. It still seems to work and It also makes the scrollbar easier to see.
I have commented the css so you can remove any bits you do not want / need.
userchrome.css
Click to expand
/* ==Interface modifications== */
::-webkit-scrollbar-thumb {
/* changes the scrollbar slider colour */
background: #c0c0c0 !important;
}
div.note-list-item span {
/* notelist - note title text */
color: black !important;
}
input.title-input {
/* note - note title text*/
color: black !important;
}
a > span.icon-back,
a > span.icon-forward,
a > span.icon-share,
a > span.icon-bold,
a > span.icon-italic,
a > span.icon-link,
a > span.icon-code,
a > span.icon-attachment,
a > span.icon-bulleted-list,
a > span.icon-numbered-list,
a > span.icon-to-do-list,
a > span.icon-heading,
a > i.fa-ellipsis-h,
a > span.icon-add-date,
a > span.icon-layout,
a > span.icon-info {
/* changes toolbar icon colour - inactive icons are a % of this colour*/
/* these can be broken out into individual entries if a "rainbow" of colours is wanted*/
color: black !important;
}
/* Start - the below section is not required if you do not use the "Menu items, Shortcuts, Toolbar icons" plugin */
a > i.fa-highlighter,
a > i.fa-strikethrough,
a > i.fa-underline,
a > i.fa-superscript,
a > i.fa-subscript {
/* changes the "Menu items, Shortcuts, Toolbar icons" **plugin** toolbar icon size and colour - inactive icons are a % of this colour*/
/* these can be broken out into individual entries if a "rainbow" of colours is wanted*/
font-size: 1em !important;
color: black !important;
font-weight: 600 !important;
}
/* End - the above section is not required if you do not use the "Menu items, Shortcuts, Toolbar icons" plugin */
/* ==CodeMirror editor modifications== */
span[role="presentation"] {
/* editor pane text */
color: black;
}
userstyle.css
Click to expand
body,
table th,
table td {
/* sets body text, table cell, and header cell font colour */
color: #000000;
}
code {
/* sets code font colour - fenced code, inline code and pre */
color: #000000;
/* stops code boxes extending off the note page */
white-space: pre-wrap;
}
caption {
/* puts a table caption underneath the table rather than the default (above) */
caption-side: bottom;
/* sets the colour of the table caption */
color: #000000;
}