Here is the theme I’m using. It’s quite basic, intentionally doesn’t make a difference between notes and tasks, and abuses a small amount of tags in order to accomplish basic formatting for items and separate words.
The formatting tags are:
-
@fb
Bold -
@fi
Italics -
@fu
Underline -
@fr
Sans-serif font -
@fm
Monospace font -
@fs
Smaller font size -
@fl
Larger font size -
@fh
Huge font size -
@cb
Blue highlight -
@cr
Red highlight -
@cy
Yellow highlight -
@cm
Brown highlight -
@cg
Green highlight -
@cv
Violet highlight
These tags can be dropped at the end of a line, and thus apply to the entire line, possibly several at a time (but only one of each kind).
They can also be used to affect just a few words, by (ab)using the tag value (e.g., @fb(hello)
will display “hello” in bold), but again, only one tag of each kind can appear on a single line. Also, formatting this way prevents you from using several tags at a time.
It’s not perfect, and the formatting part is a bit of a hack, but I couldn’t make something better using Javascript without making TaskPaper awfully slow, and I find it offers just the amount of formatting I need to make something stand out. When I need more, I use a more adapted app and format (a Markdown editor or a word processor).
@font-family: -apple-system, "Lucida Grande", sans-serif;
@nbmix: 40%;
.nbteal() {
color: #2E6765;
background-color: mix(#8FE6D3, #FFFFFF, @nbmix);
}
.nbyellow() {
color: #605C2B;
background-color: mix(#E9D92B, #FFFFFF, @nbmix);
}
.nbgreen() {
color: #2F5D20;
background-color: mix(#9AFF42, #FFFFFF, @nbmix);
}
.nbbrown() {
color: #493934;
background-color: mix(#ADA389, #FFFFFF, @nbmix);
}
.nbred() {
color: #603546;
background-color: mix(#DA919B, #FFFFFF, @nbmix);
}
.nbblue() {
color: #3E6566;
background-color: mix(#78D0C9, #FFFFFF, @nbmix);
}
.nbviolet() {
color: #1a0340;
background-color: mix(#ae7dff, #FFFFFF, @nbmix);
}
item[data-type="note"] {
font-style: normal;
}
item[data-type="project"] {
font-weight: bold;
}
item[data-i], item[data-ii], item[data-iii] {
&>run[content] {
background-color: #BF363B;
color: #FFFFFF;
}
}
item[data-i][data-done], item[data-ii][data-done], item[data-iii][data-done] {
&>run[content] {
text-strikethrough-color: #FFFFFF;
}
}
item[data-ii], item[data-iii] {
&>run[content] {
font-weight: bold;
}
}
item[data-iii] {
font-size: @user-font-size * 1.25;
line-height-multiple: 1.5;
}
item[data-today] {
color: #605C2B;
background-color: mix(#E9D92B, #FFFFFF, @nbmix);
& > run[tag] {
color: mix(#605C2B, #E9D92B, 50%);
}
&[data-done] {
&>run[content] {
text-strikethrough-color: #605C2B;
}
}
}
item > run[tag="data-fb"][tag], item > run[tag="data-fi"][tag], item > run[tag="data-fu"][tag], item > run[tag="data-fr"][tag], item > run[tag="data-fm"][tag], item > run[tag="data-fs"][tag], item > run[tag="data-fl"][tag], item > run[tag="data-fh"][tag], item > run[tag="data-cb"][tag], item > run[tag="data-cr"][tag], item > run[tag="data-cy"][tag], item > run[tag="data-cm"][tag], item > run[tag="data-cg"][tag], item > run[tag="data-cv"][tag] {
color: mix(@text-color, @background-color, 15%);
}
item[data-fb=""] > run[content], item > run[tag="data-fb"][tagvalue] {
font-weight: bold;
}
item[data-fi=""] > run[content], item > run[tag="data-fi"][tagvalue] {
font-style: italic;
}
item[data-fu=""] > run[content], item > run[tag="data-fu"][tagvalue] {
text-decoration: underline;
}
item[data-fr=""] > run[content], item > run[tag="data-fr"][tagvalue] {
font-family: Georgia, "Times New Roman", serif;
}
item[data-fm=""] > run[content], item > run[tag="data-fm"][tagvalue] {
font-family: Consolas, Menlo, monospace;
}
item[data-fs=""], item[data-fs=""] > run[tag], item > run[tag="data-fs"][tagvalue] {
font-size: @user-font-size * 0.8;
}
item[data-fl=""], item[data-fl=""] > run[tag], item > run[tag="data-fl"][tagvalue] {
font-size: @user-font-size * 1.2;
}
item[data-fh=""], item[data-fh=""] > run[tag], item > run[tag="data-fh"][tagvalue] {
font-size: @user-font-size * 1.5;
}
item > run[tag="data-fb"][tagvalue], item > run[tag="data-fi"][tagvalue], item > run[tag="data-fu"][tagvalue], item > run[tag="data-fr"][tagvalue], item > run[tag="data-fm"][tagvalue], item > run[tag="data-fs"][tagvalue], item > run[tag="data-fl"][tagvalue], item > run[tag="data-fh"][tagvalue] {
color: @text-color;
}
item[data-cb=""] > run[content], item > run[tag="data-cb"][tagvalue] {
.nbblue();
}
item[data-cr=""] > run[content], item > run[tag="data-cr"][tagvalue] {
.nbred();
}
item[data-cy=""] > run[content], item > run[tag="data-cy"][tagvalue] {
.nbyellow();
}
item[data-cm=""] > run[content], item > run[tag="data-cm"][tagvalue] {
.nbbrown();
}
item[data-cg=""] > run[content], item > run[tag="data-cg"][tagvalue] {
.nbgreen();
}
item[data-cv=""] > run[content], item > run[tag="data-cv"][tagvalue] {
.nbviolet();
}
item[data-fu=""][data-cb=""] > run[content], item[data-fu=""] > run[tag="data-cb"][tagvalue] {
text-underline: NSUnderlineStyleSingle;
text-underline-color: #78D0C9;
}
item[data-fu=""][data-cr=""] > run[content], item[data-fu=""] > run[tag="data-cr"][tagvalue] {
text-underline: NSUnderlineStyleSingle;
text-underline-color: #DA919B;
}
item[data-fu=""][data-cy=""] > run[content], item[data-fu=""] > run[tag="data-cy"][tagvalue] {
text-underline: NSUnderlineStyleSingle;
text-underline-color: #E9D92B;
}
item[data-fu=""][data-cm=""] > run[content], item[data-fu=""] > run[tag="data-cm"][tagvalue] {
text-underline: NSUnderlineStyleSingle;
text-underline-color: #ADA389;
}
item[data-fu=""][data-cg=""] > run[content], item[data-fu=""] > run[tag="data-cg"][tagvalue] {
text-underline: NSUnderlineStyleSingle;
text-underline-color: #9AFF42;
}
item[data-fu=""][data-cv=""] > run[content], item[data-fu=""] > run[tag="data-cv"][tagvalue] {
text-underline: NSUnderlineStyleSingle;
text-underline-color: #ae7dff;
}
item {
handle-size: @handle-size;
handle-border-width: floor(1.5 * @ui-scale);
}
item[expanded] {
handle-border-color: @handle-secondary-color;
}
item[collapsed] {
handle-color: @handle-color;
handle-border-color: none;
}
item[filtered] {
handle-color: @handle-secondary-color;
handle-border-color: none;
}
item[mouseOverHandle] {
handle-size: @handle-size + (2 * @ui-scale);
}
item[mouseOverHandle][leaf] {
handle-border-color: @handle-secondary-color;
}