WorkFlowy inspired theme

saf-dmitry · August 22, 2017, 6:59am

Here is my TaskPaper theme based on WorkFlowy style:

The LESS code:

// Base Size

@base-font-size: 15;
@user-font-size: (1.1 * $USER_FONT_SIZE);
@ui-scale: @user-font-size / @base-font-size;

// UI Colors

@tint-color: rgb(70%,84%,99%);
@background-color: rgb(100%,100%,100%);
@selection-color: mix(@tint-color, @background-color, 50%);
@invisibles-color: mix(@tint-color, @background-color, 100%);
@searchbar-background-color: rgb(92%,92%,92%);
@searchbar-error-text-color: rgb(100%,0%,0%);

// Base Text

@font-family: .SF NS Text, Helvetica;
@text-color: rgb(25%,25%,25%);
@text-dimmed-color: mix(@text-color, @background-color, 30%);
@line-height-multiple: 1.15;

// Handles

@handle-size: floor(16 * @ui-scale);
@handle-border-width: floor(5 * @ui-scale);
@handle-color: mix(rgb(0%,0%,0%), @background-color, 55%);
@handle-border-color: mix(rgb(0%,0%,0%), @background-color, 12%);
@handle-border-secondary-color: mix(rgb(0%,0%,0%), @background-color, 25%);

// Guide Lines

@guide-line-color: mix(rgb(0%,0%,0%), @background-color, 8%);
@guide-line-width: floor(1.5 * @ui-scale);

// Elements

window {
  appearance: NSAppearanceNameVibrantLight;
}

sidebar {
  appearance: NSAppearanceNameVibrantLight;
}

searchbar {
  appearance: NSAppearanceNameVibrantLight;
  background-color: @searchbar-background-color;
  color: mix(rgb(10%,10%,10%), @background-color, 90%);
  placeholder-color: mix(rgb(10%,10%,10%), @background-color, 50%);
  secondary-text-color: mix(rgb(10%,10%,10%), @background-color, 50%);
  error-text-color: mix(@searchbar-error-text-color, @background-color, 100%);
}

editor {
  color: @text-color;
  ui-scale: @ui-scale;
  font-size: @user-font-size;
  font-family: @font-family;
  background-color: @background-color;
  line-height-multiple: @line-height-multiple;
  item-indent: floor(28 * @ui-scale);
  caret-width: floor(2 * @ui-scale);
  caret-color: rgb(8%,54%,79%);
  drop-indicator-color: @tint-color;
  fold-color: @tint-color;
  invisibles-color: @invisibles-color;
  selection-background-color: @selection-color;
  guide-line-color: @guide-line-color;
  guide-line-width: @guide-line-width;
  top-padding-percent: 0%;
  bottom-padding-percent: 25%;
  typewriter-scroll-percent: 25%;
}

item {
  handle-size: @handle-size;
  handle-border-width: @handle-border-width;
}

item[leaf] {
  handle-color: none;
  handle-border-color: none;
}

item[empty] {
  handle-color: none;
  handle-border-color: none;
}

item[expanded] {
  handle-color: @handle-color;
  handle-border-color: @background-color;
}

item[collapsed] {
  handle-color: @handle-color;
  handle-border-color: @handle-border-color;
}

item[filtered] {
  handle-color: @handle-color;
  handle-border-color: @handle-border-color;
}

item[focused] {
  handle-color: @handle-color;
  handle-border-color: @handle-border-color;
}

item[hoisted] {
  line-height-multiple: @line-height-multiple * 2;
  handle-color: none;
  handle-border-color: none;
}

item[mouseOverHandle] {
  handle-size: @handle-size + (1.2 * @ui-scale);
  handle-border-color: @handle-border-secondary-color;
}

item[mouseOverHandle][leaf] {
  handle-border-color: @handle-secondary-color;
}

item[data-type="project"] {
  font-style: normal;
  font-weight: bold;
  paragraph-spacing-before: @ui-scale * 6;
  paragraph-spacing-after: @ui-scale * 4;
}

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

item[data-type="note"] {
  font-style: normal;
  font-weight: normal;
  color: @text-dimmed-color;
}

item[data-done] {
  > run[content] {
      color: @text-dimmed-color;
      text-strikethrough: NSUnderlineStyleSingle;
      text-strikethrough-color: @text-dimmed-color;
    }
  > run[link^="button"] {
      color: @text-dimmed-color;
    }
  > run[tag] {
      color: @text-dimmed-color;
    }

}

run[link] {
  cursor: pointer;
  // color: rgb(10%,63%,85%);
  color: rgb(8%,54%,79%);
  text-decoration: underline;
}

run[link^="button"] {
  color: rgb(0%,0%,0%);
  text-decoration: none;
}

run[link^="filter"] {
  text-decoration: none;
}

run[tag] {
  font-size: @user-font-size;
  font-style: normal;
  font-weight: normal;
  color: @text-dimmed-color;
}

run[tag="data-na"] {
  color: rgb(99%,48%,17%);
}

mylevelbest · December 15, 2017, 4:04pm

I appreciate that it is so easy to share and alter style sheets in TaskPaper. I made some quick tweaks to this Work-Flowy style sheet as I am using it primarily as a replacement for how I have been using nvAlt. That is, not as my main task manager but as a repository of sorts of ideas, links for further research, etc. .

Because of this I wanted a similar background to how I had it in nvAlt, sort of a beige color. I also had to darken the overly light notes text as it was a bit hard to read. I was surprised that when I changed the @base-font-size to a larger value (from 15 to 22), it did not change the actual font size but instead compressed the left text margin - which was good.

// Base Size

@base-font-size: 22;
@user-font-size: (1.12 * $USER_FONT_SIZE);
@ui-scale: @user-font-size / @base-font-size;

// UI Colors

@tint-color: rgb(70%,84%,99%);
@background-color: mix(orange, beige, 15%);
@selection-color: mix(@tint-color, @background-color, 50%);
@invisibles-color: mix(@tint-color, @background-color, 100%);
@searchbar-background-color: rgb(92%,92%,92%);
@searchbar-error-text-color: rgb(100%,0%,0%);

// Base Text

/* @font-family: Helvetica; */
@font-family: .SF NS Text;
@text-color: mix(black,white,90%);
@text-dimmed-color: mix(@text-color, @background-color, 90%);
@line-height-multiple: 1.1;

// Handles

@handle-size: floor(16 * @ui-scale);
@handle-border-width: floor(5 * @ui-scale);
@handle-color: mix(rgb(0%,0%,0%), @background-color, 55%);
@handle-border-color: mix(rgb(0%,0%,0%), @background-color, 12%);
@handle-border-secondary-color: mix(rgb(0%,0%,0%), @background-color, 25%);

// Guide Lines

@guide-line-color: mix(rgb(0%,0%,0%), @background-color, 8%);
@guide-line-width: floor(1.5 * @ui-scale);

// Elements

window {
  appearance: NSAppearanceNameVibrantLight;
}

sidebar {
  appearance: NSAppearanceNameVibrantLight;
}

searchbar {
  appearance: NSAppearanceNameVibrantLight;
  background-color: @searchbar-background-color;
  color: mix(rgb(10%,10%,10%), @background-color, 90%);
  placeholder-color: mix(rgb(10%,10%,10%), @background-color, 50%);
  secondary-text-color: mix(rgb(10%,10%,10%), @background-color, 50%);
  error-text-color: mix(@searchbar-error-text-color, @background-color, 100%);
}

editor {
  color: @text-color;
  ui-scale: @ui-scale;
  font-size: @user-font-size;
  font-family: @font-family;
  background-color: @background-color;
  line-height-multiple: @line-height-multiple;
  item-indent: floor(28 * @ui-scale);
  caret-width: floor(2 * @ui-scale);
  caret-color: rgb(37%,51%,65%);
  drop-indicator-color: @tint-color;
  invisibles-color: @invisibles-color;
  selection-background-color: @selection-color;
  guide-line-color: @guide-line-color;
  guide-line-width: @guide-line-width;
  top-padding-percent: 0%;
  bottom-padding-percent: 25%;
  typewriter-scroll-percent: 25%;
}

item {
  handle-size: @handle-size;
  handle-border-width: @handle-border-width;
}

item[expanded] {
  handle-color: @handle-color;
  handle-border-color: @background-color;
}

item[collapsed] {
  handle-color: @handle-color;
  handle-border-color: @handle-border-color;
}

item[filtered] {
  handle-color: @handle-color;
  handle-border-color: @handle-border-color;
}

item[mouseOverHandle] {
  handle-border-color: @handle-border-secondary-color;
}

item[leaf] {
  handle-color: none;
  handle-border-color: none;
}

item[empty] {
  handle-color: none;
  handle-border-color: none;
}

item[hoisted] {
  line-height-multiple: @line-height-multiple * 2;
  handle-color: none;
  handle-border-color: none;
}

item[data-type="project"] {
  font-style: normal;
  font-weight: bold;
  paragraph-spacing-before: 6.0;
  paragraph-spacing-after: 2.0;
}

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

item[data-type="note"] {
  font-style: normal;
  font-weight: normal;
  color: @text-dimmed-color;
}

item[data-done] {
  > run[content] {
      color: @text-dimmed-color;
      text-strikethrough: NSUnderlineStyleSingle;
      text-strikethrough-color: @text-dimmed-color;
    }
  > run[link^="button"] {
      color: @text-dimmed-color;
    }
  > run[tag] {
      color: @text-dimmed-color;
    }

}

run[link] {
  cursor: pointer;
  color: rgb(8%,54%,68%);
  text-decoration: underline;
}

run[link^="button"] {
  color: rgb(0%,0%,0%);
  text-decoration: none;
}

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

run[tag] {
  font-size: @user-font-size;
  font-style: normal;
  font-weight: normal;
  color: @text-dimmed-color;
}

run[tag="data-na"] {
  color: rgb(99%,52%,14%);
}

run[tag="data-due"] {
  /* color: rgb(43%,57%,81%); */
}

saf-dmitry · December 30, 2017, 3:01pm

Here is another version of the WorkFlowy-inspired style sheet with a “warm” background and adapted colors and spacings:

I recommend using this theme with Ubuntu font.

The LESS code:

// Colors

@appearance: $APPEARANCE; // dark | light

@light-text-color: rgb(25%, 25%, 25%);
@light-background-color: rgb(100%, 100%, 97%);
@light-link-color: rgb(8%, 54%, 79%);
@light-caret-color: rgb(8%, 54%, 79%);
@light-selection-color-percent: 10%;
@light-guide-line-color-percent: 10%;
@light-handle-color-percent: 55%;
@light-handle-secondary-color-percent: 10%;
@light-handle-border-color-percent: 12%;
@light-handle-border-secondary-color-percent: 25%;
@light-text-dimmed-color-percent: 30%;

@dark-text-color: rgb(72%, 72%, 72%);
@dark-background-color: rgb(10%, 10%, 10%);
@dark-link-color: rgb(28%, 51%, 71%);
@dark-caret-color: rgb(8%, 54%, 79%);
@dark-selection-color-percent: 20%;
@dark-guide-line-color-percent: 30%;
@dark-handle-color-percent: 55%;
@dark-handle-secondary-color-percent: 10%;
@dark-handle-border-color-percent: 12%;
@dark-handle-border-secondary-color-percent: 25%;
@dark-text-dimmed-color-percent: 30%;

@curr-appearance-text-color: "@{appearance}-text-color";
@curr-appearance-background-color: "@{appearance}-background-color";
@curr-appearance-link-color: "@{appearance}-link-color";
@curr-appearance-caret-color: "@{appearance}-caret-color";
@curr-selection-color-percent: "@{appearance}-selection-color-percent";
@curr-guide-line-color-percent: "@{appearance}-guide-line-color-percent";
@curr-handle-color-percent: "@{appearance}-handle-color-percent";
@curr-handle-secondary-color-percent: "@{appearance}-handle-secondary-color-percent";
@curr-handle-border-color-percent: "@{appearance}-handle-border-color-percent";
@curr-handle-border-secondary-color-percent: "@{appearance}-handle-border-secondary-color-percent";
@curr-text-dimmed-color-percent: "@{appearance}-text-dimmed-color-percent";

// UI size

@base-font-size: 15;
@user-font-size: (1.2 * $USER_FONT_SIZE);
@ui-scale: @user-font-size / @base-font-size;

// Base text

@font-family: Ubuntu, -apple-user;
@line-height-multiple: 1.25;
@item-indent: floor(28 * @ui-scale);
@text-color: @@curr-appearance-text-color;
@background-color: @@curr-appearance-background-color;
@tint-color: $CONTROL_ACCENT_COLOR;
@selection-color: mix($SELECTED_CONTENT_BACKGROUND_COLOR, @background-color, @@curr-selection-color-percent);
@invisibles-color: mix(@tint-color, @background-color, 50%);
@link-color: @@curr-appearance-link-color;
@text-dimmed-color: mix(@text-color, @background-color, @@curr-text-dimmed-color-percent);

// Caret

@caret-width: floor(2 * @ui-scale);
@caret-color: @@curr-appearance-caret-color;

// Guide Lines

@guide-line-width: floor(1.5 * @ui-scale);
@guide-line-color: mix(@text-color, @background-color, @@curr-guide-line-color-percent);

// Handles

@handle-size: floor(16 * @ui-scale);
@handle-border-width: floor(5 * @ui-scale);
@handle-color: mix(@text-color, @background-color, @@curr-handle-color-percent);
@handle-secondary-color: mix(@text-color, @background-color, @@curr-handle-secondary-color-percent);
@handle-border-color: mix(@text-color, @background-color, @@curr-handle-border-color-percent);
@handle-border-secondary-color: mix(@text-color, @background-color, @@curr-handle-border-secondary-color-percent);

// Elements

window {
}

sidebar {
}

searchbar {
    appearance: NSAppearanceNameVibrantDark;
    color: rgb(72%, 72%, 72%);
    secondary-text-color: rgb(50%, 50%, 50%);
    error-text-color: rgb(100%, 0%, 0%);
    placeholder-color: rgb(50%, 50%, 50%);
    background-color: rgb(5%, 5%, 5%);
}

editor {
    color: @text-color;
    ui-scale: @ui-scale;
    font-size: @user-font-size;
    font-family: @font-family;
    background-color: @background-color;
    line-height-multiple: @line-height-multiple;
    item-indent: @item-indent;
    caret-width: @caret-width;
    caret-color: @caret-color;
    drop-indicator-color: @tint-color;
    fold-color: @tint-color;
    invisibles-color: @invisibles-color;
    selection-background-color: @selection-color;
    guide-line-color: @guide-line-color;
    guide-line-width: @guide-line-width;
    top-padding-percent: 0%;
    bottom-padding-percent: 25%;
    typewriter-scroll-percent: 0%;
}

item {
    handle-size: @handle-size;
    handle-border-width: @handle-border-width;
}

item[leaf] {
    handle-color: none;
    handle-border-color: none;
}

item[empty] {
    handle-color: none;
    handle-border-color: none;
}

item[expanded] {
    handle-color: @handle-color;
    handle-border-color: @background-color;
}

item[collapsed] {
    handle-color: @handle-color;
    handle-border-color: @handle-border-color;
}

item[filtered] {
    handle-color: @handle-color;
    handle-border-color: @handle-border-color;
}

item[focused] {
    handle-color: @handle-color;
    handle-border-color: @handle-border-color;
}

item[hoisted] {
    line-height-multiple: 2 * @line-height-multiple;
    handle-color: none;
    handle-border-color: none;
}

item[mouseOverHandle] {
    handle-size: @handle-size + floor(2 * @ui-scale);
    handle-border-color: @handle-border-secondary-color;
}

item[mouseOverHandle][leaf] {
    handle-border-color: @handle-secondary-color;
}

item[data-type="project"] {
    font-style: normal;
    font-weight: bold;
    paragraph-spacing-before: 6 * @ui-scale;
    paragraph-spacing-after: 4 * @ui-scale;
}

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

item[data-type="note"] {
    font-style: normal;
    font-weight: normal;
    color: @text-dimmed-color;
}

item[data-done] {
    > run[content] {
        color: @text-dimmed-color;
        text-strikethrough: NSUnderlineStyleSingle;
        text-strikethrough-color: @text-dimmed-color;
    }
    > run[link^="button"] {
      color: @text-dimmed-color;
    }
    > run[tag] {
        color: @text-dimmed-color;
        text-decoration: none;
    }
}

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

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

run[link^="filter"] {
    text-decoration: none;
}

run[tag] {
    font-size: @user-font-size;
    font-style: normal;
    font-weight: normal;
    color: @text-dimmed-color;
    text-decoration: none;
}

run[tag="data-na"] {
    color: rgb(99%, 48%, 17%);
}

run[tag="data-due"] {
    color: rgb(13%, 74%, 92%);
}

sepulchra · December 31, 2017, 7:08pm

@saf-dimity what does the na tag mean in your workflow? Just curious

Jim · December 31, 2017, 7:28pm

I’m guessing that na is short for Next Action.

sepulchra · December 31, 2017, 7:36pm

that makes sense!

saf-dmitry · January 1, 2018, 1:54pm

Yes, “na” means “Next Action”.

hooley · February 2, 2020, 4:00am

@jessegrosjean Are there instructions somewhere on how to add dark styling to a theme for dark mode? This workflowy theme is great, but it’s broken in dark mode and I don’t know how to fix it. I tried looking at the default style sheet, but that somehow has a dark mode without any mention in the style sheet?

saf-dmitry · February 9, 2020, 4:04pm

@hooley I’ve updated the theme for the macOS dark mode. You cal tweak color definitions in the variable section on the top.

hooley · February 10, 2020, 1:24am

Thanks, but I guess I’m wondering how to get a theme that automatically changes to dark mode, like the Default theme. I don’t see any code in there to help me understand how to accomplish that, nor can I find anything in the documentation. I’ve adapted this theme to make a dark theme, and am using the original as a light theme, but isn’t there a way to have both in one file?

saf-dmitry · February 10, 2020, 10:00am

@hooley

The switching uses the environmental variable $APPEARANCE, which can have values light or dark depending on currently active mode. The value will be assigned to the LESS variable @appearance

@appearance: $APPEARANCE; // dark | light

and the latter will be substituted in the color definition variables:

@curr-appearance-text-color: "@{appearance}-text-color";
...

In the updated LESS code both light and dark themes are in one file and the theme will automatically change to dark mode, like the Default theme.

jessegrosjean · February 10, 2020, 1:25pm

@hooley Sorry I didn’t respond sooner, but @saf-dmitry has you on the right track with the $APPEARANCE variable.

hooley · February 10, 2020, 4:20pm

Err…sorry! I just noticed the warmer theme was adapted for dark mode. The original one was the one I was using. That added to my confusion. Thanks for clarifying, and thanks for the great theme!

hooley · February 10, 2020, 4:20pm

Thanks, Jesse!