Less for theming

Thought I’d create a topic specifically for sharing themes and Less tips.

Here’s the Less code I’ve been tweaking. It’s not very attractive but it illustrates some of the formatting

// Base text
@font-family: Source Sans Pro;
@font-size: $USER_FONT_SIZE;
@text-color: black;
@background-color: rgb(247, 247, 247);
@line-height-multiple: 1.1;
@done-color: rgba(127, 127, 127, 0.52);
@link-color: #3974cb;
@waiting-color: #828ccb;
@due-color: orange;
@flag-color: red;


// UI
@tint-color: #ff4b4d;
@interface-color: @tint-color;
@selection-color: mix(@tint-color, @background-color, 30%); // rgb(148, 192, 255);
@invisibles-color: mix(@tint-color, @background-color, 70%); // rgb(67, 119, 211);

editor {
color: @text-color;
font-size: @font-size;
font-family: @font-family;
background-color: @background-color;
line-height-multiple: @line-height-multiple;

item-indent: 20px;
caret-width: 2px;
caret-color: @tint-color;
handle-color: @tint-color;
drop-indicator-color: @tint-color;
invisibles-color: @invisibles-color;
selection-background-color: @selection-color;
guide-line-color: mix(@tint-color, @background-color, 15%);
message-color: mix(@text-color, @background-color, 50%);
}

item[data-type="note"] {
font-style: italic;
}

item[data-type="task"] {
font-style: normal;
}

item[data-type="project"] {
font-weight: bold;
}

item[depth="1"].item[data-type="project"] {
}

item[data-done] {
> run[display] {
text-strikethrough: NSUnderlineStyleSingle;
text-strikethrough-color: @done-color;
}
}

run[link] {
cursor: pointer;
color: @link-color;
}

run[link^="button"] {
color: @text-color;
text-expansion: 1;
}

run[link^="filter"] {
color: @text-color;
}

run[tag] {
font-size: @font-size;
font-style: normal;
font-weight: normal;
color: mix(@text-color, @background-color, 50%);
}

item[data-done] {
color:@done-color;
}

run[tag=data-done] {
color:@done-color;
}

item[data-today] {
color: orange;
}

run[tag=data-today] {
color: mix(@due-color, @done-color, 70%);
}

item[data-flag] {
color: @flag-color;
}

run[tag=data-flag] {
color: darken(@flag-color, 20%);
}

item[data-next] {
color: darken(@due-color, 20%);
}

run[tag=data-next] {
color: darken(@due-color, 20%);
}

item[data-waiting] {
color: @waiting-color;
}

run[tag=data-waiting] {
color:@waiting-color;
}

item[data-hold] {
color: @waiting-color;
}

run[tag=data-hold] {
color:@waiting-color;
}

This produces the following theme:

7 Likes

What’s the syntax for setting the front hyphen color? I’m working on a dark theme and I prefer to color the hyphen.

What’s the syntax for setting the front hyphen color?

See Taskpaper 3 themes - #2 by jessegrosjean

1 Like

@macdrifter, could you also contribute your dark theme here? I think it is very cool looking and it would be awesome to have.

Dark theme. Not terrible.

// Base text
@font-family: Source Sans Pro;
@font-size: $USER_FONT_SIZE;
@text-color: white;
@background-color: #131313;
@line-height-multiple: 1.1;
@done-color: rgba(127, 127, 127, 0.52);
@link-color: #3974cb;
@waiting-color: #828ccb;
@due-color: orange;
@flag-color: red;
@project-color: #f8e9ad;


// UI
@tint-color: #e3ea5c;
@interface-color: @tint-color;
@selection-color: mix(@tint-color, @background-color, 30%); // rgb(148, 192, 255);
@invisibles-color: mix(@tint-color, @background-color, 70%); // rgb(67, 119, 211);

editor {
color: @text-color;
font-size: @font-size;
font-family: @font-family;
background-color: @background-color;
line-height-multiple: @line-height-multiple;

item-indent: 20px;
caret-width: 2px;
caret-color: @tint-color;
handle-color: @tint-color;
drop-indicator-color: @tint-color;
invisibles-color: @invisibles-color;
selection-background-color: @selection-color;
guide-line-color: mix(@tint-color, @background-color, 15%);
message-color: mix(@text-color, @background-color, 50%);
}

run[link^="button"] {
color: @text-color;

}

item[data-type="note"] {
font-style: italic;
color: darken(@text-color, 30%);
}

item[data-type="task"] {
font-style: normal;
}

item[data-type="project"] {
font-weight: bold;
color: @project-color;
}

item[depth="1"].item[data-type="project"] {
}

item[data-done] {
> run{
text-strikethrough: NSUnderlineStyleSingle;
text-strikethrough-color: @done-color;
color:@done-color;
}
}

run[link] {
cursor: pointer;
color: @link-color;
}



run[link^="filter"] {
color: @text-color;
}


run[tag=data-done] {
color:@done-color;
}

run[tag] {
font-size: @font-size;
font-style: normal;
font-weight: normal;
color: mix(@text-color, @background-color, 50%);
}

item[data-today] {
color: orange;
}

run[tag=data-today] {
color: mix(@due-color, @done-color, 70%);
}

item[data-flag] {
color: @flag-color;
}

run[tag=data-flag] {
color: darken(@flag-color, 20%);
}

item[data-next] {
color: darken(@due-color, 20%);
}

run[tag=data-next] {
color: darken(@due-color, 20%);
}

item[data-waiting] {
color: @waiting-color;
}

run[tag=data-waiting] {
color:@waiting-color;
}

item[data-hold] {
color: @waiting-color;
}

run[tag=data-hold] {
color:@waiting-color;
}
3 Likes

Thanks. I need you to create my example files. Terror Star todo is much more interesting then a grocery list.

2 Likes

A fully operational Terror Star doesn’t just happen.

5 Likes

@macdrifter, thank you very much. It was awesome to find out you helped implement the critical markup.

Ok, quick CSS question to the experts here. Is there a way to apply the CSS format to everything underneath the tag?

For example. Sometimes I have a series of tasks that are done almost simultaneously, so it is easier to tag the project as @done instead of tagging all the individual tasks. I want all the children to also have the @done attributes.

I am also wondering if it is possible to change the color of a tag based on the value of it. Something like

@priority(high)
@priority(low)

To have a different color according to the value.

Do you know how to create bullets for notes? I miss having bullets for notes like previous versions of Taskpaper.

Can someone explain to me what is the purpose of

run[display]{}

When or why is this necessary?

In TaskPaper all is divided into runs. All text is part of one and only one run. Each run has a set of attributes. The end goal when styling runs is to map from TaskPaper model runs to rich text runs… so map from TaskPaper things like, tag, lead, and display to rich text things like font, color, background.

The actual syntax says:

run[display]{ apply these attributes }: For any run that includes the “display” attribute “apply these attributes”.

With that in mind “display” is an attribute in TaskPaper attribute runs that is applied to all “non syntax” text content. In particular the display attribute is applied everywhere except:

  1. Not applied to leading dash in tasks

  2. Not applied to trailing colon on projects

  3. Not applied to trailing list of tags

The primary use (why I added it) of the display attribute is so that when items are tagged done I can make the strikethrough go just through the task “text” and not through the trailing @done tag and the leading dash. The other use for it is that when I generate the project names in the project sidebar notice that the trailing colon and tags are not included… this is because I only include text in the sidebar that has the “display” attribute.

PS

“display” is probably a bad name for this attribute, in the future I might change it to “content”, that’s maybe a more descriptive name for what this attribute does… mark “content” text separate from “syntax” text.

Here’s a set of low level rules to try:

// colors the entire tag rule (@, name, value and ()'s)
run[tag=data-priority] {
  color: green;
}

// colors just the tag @ and name runs
run[tagname=data-priority] {
  color: blue;
}

// colors just the tag value run.
run[tagvalue=high] {
  color: orange;
}

But note that run[tagvalue=high] would also match the “high” text in @someothertag(high). If you want to be more specific, and color the tag name based on the tag value you could use rules like this:

item[data-priority=high] {
    > run[tag=data-priority] {
        color: red;
    }
}

item[data-priority=low] {
    > run[tag=data-priority] {
        color: blue;
    }
}
1 Like

Hi there,

I’ve just been trying, and failing, to use font-variant: small-caps; in a theme for the project names. Just wanted to check: Is this part of .less not supported?

Thanks!

Mark

Correct, I’ve listed the supported style properties here (plus a few more in 3.1 Preview documented in those release notes):

http://guide.taskpaper.com/theme_definitions.html

If you want small caps I think you could just refere directly to the small caps variants font file name (probably have all those terms messed up), but I think it should be possible by using right value for @font-family.

Very helpful, thanks Jesse. I’ll refer there next time!