Basic theme with formatting tags

TaskPaper
1

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.

Taskpaper-Notebook
Taskpaper-Notebook1202×1722 296 KB

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;
}
3 Likes