Works for me in 3.8.10, but combining into a single version that will toggle… not so much:
// dark or light
@appearance: $APPEARANCE;
// Base -----------------------------------
@font-family: Hack, Source Code Pro;
@font-family: -apple-user;
@font-family: Lato;
@base-font-size: 16;
@user-font-size: $USER_FONT_SIZE;
@ui-scale: @user-font-size / @base-font-size;
@line-height-multiple: 1.4;
@handle-size: floor(9 * @ui-scale);
// Light Appearance Colors
@light_bg_color: #F5F5F0;
@light_current-line: darken(@light_bg_color, 4%);
@light_selection: darken(@light_bg_color, 10%);
@light_fg_color: #2d2d2d;
@light_searchbackground-color: #d6d6d6;
@light_1____: darken(#f2777a,20%);
@light_2____: darken(#f99157,20%);
@light_3____: darken(#ffcc66,20%);
@light_4____: darken(#99cc99,25%);
@light_5____: darken(#66cccc,20%);
@light_6____: darken(#6699cc,20%);
@light_7____: darken(#cc99cc,20%);
@light_guide-color: lighten(@fg_color, 26%);
@light_caret-color: lighten(@1____,20%);
@light_text-strikethrough-color: fade(@1____, 35%);
@light_text-strikethrough-color2: fade(@text-color, 35%);
// Dark Appearance Colors
@dark_bg_color: #2d2d2d;
@dark_current-line: lighten(@dark_bg_color, 4%);
@dark_selection: lighten(@dark_bg_color, 10%);
@dark_fg_color: #cccccc;
@dark_searchbackground-color: #3b3b3b;
@dark_1____: #f2777a;
@dark_2____: #f99157;
@dark_3____: #ffcc66;
@dark_4____: #99cc99;
@dark_5____: #66cccc;
@dark_6____: #6699cc;
@dark_7____: #cc99cc;
@dark_guide-color: darken(@fg_color, 26%);
@dark_caret-color: @1____;
@dark_text-strikethrough-color: fade(@1____, 10%);
@dark_text-strikethrough-color2: fade(@text-color, 10%);
// Current Appearance Colors
@fg_color: "@{appearance}_fg_color";
@bg_color: "@{appearance}_bg_color";
@_current-line: "@{appearance}_current-line";
@_selection: "@{appearance}_selection";
@searchbackground-color: "@{appearance}_searchbackground-color";
@neutral: #808080;
@1____: "@{appearance}_1____";
@2____: "@{appearance}_2____";
@3____: "@{appearance}_3____";
@4____: "@{appearance}_4____";
@5____: "@{appearance}_5____";
@6____: "@{appearance}_6____";
@7____: "@{appearance}_7____";
// Base colors -----------------------------------
@project-color: @fg_color;
@text-color: @fg_color;
@bg-color: @bg_color;
@message-color: mix(@text-color, @bg-color, 50%);
@tag-color: fade(@fg_color, 65%);
// UI Colors -----------------------------------
@tint-color: @1____;
@interface-color: @tint-color;
@selection-color: @_selection;
@invisibles-color: fade(@tint-color, 50%);
@guide-color: "@{appearance}_guide-color";
window {
appearance: "NSAppearanceNameVibrant@{appearance}";
}
searchbar {
background-color: @searchbackground-color;
placeholder-color: fade(@text-color, 65%);
color: @text-color;
secondary-text-color: @4____;
error-text-color: @1____;
}
editor {
color: @text-color;
font-size: @user-font-size;
font-family: @font-family;
background-color: @bg-color;
line-height-multiple: @line-height-multiple;
// item-handle-size: 6;
item-indent: 15px * @ui-scale;
caret-width: floor(4 * @ui-scale);
caret-color: "@{appearance}_caret-color";
handle-color: @guide-color;
drop-indicator-color: @tint-color;
invisibles-color: @invisibles-color;
selection-background-color: @selection-color;
guide-line-width: floor(0.5 * @ui-scale);
guide-line-color: mix(@guide-color,@bg-color, 40%);
message-color: @message-color;
// top-padding-percent: 20%; // Pad top of editor with 25% of viewport height
bottom-padding-percent: 40%; // Pad bottom of editor with 25% of viewport height
// editor-wrap-to-column: 80; // Wrap editor text at 80 columns, center if extra space
// item-wrap-to-column: 60; // Wrap item text at 60 columns (smaller value them above means item text doesn't rewrap when item is indented
typewriter-scroll-percent: 50%; // Scroll edit location to 50% location in viewport when possible
}
item[data-type=project] {
font-size: floor(26 * @ui-scale);
}
item[depth=1][data-type=project] {
font-weight: 900;
color: @project-color;
paragraph-spacing-before: 20;
paragraph-spacing-after: 3;
> run[content] {
text-decoration: underline;
}
}
item[depth=2][data-type=project] {
font-weight: 900;
font-size: floor(22 * @ui-scale);
// font-size: 17;
color: fade(@project-color, 100%);
paragraph-spacing-before: 20;
paragraph-spacing-after: 3;
}
item[depth=3][data-type=project] {
font-weight: 900;
font-size: floor(20 * @ui-scale);
color: fade(@project-color, 100%);
paragraph-spacing-before: 20;
paragraph-spacing-after: 3;
}
item[depth=4][data-type=project] {
font-weight: 900;
font-size: floor(18 * @ui-scale);
color: fade(@project-color, 100%);
paragraph-spacing-before: 20;
paragraph-spacing-after: 3;
}
item[depth=5][data-type=project] {
font-weight: 900;
font-size: floor(16 * @ui-scale);
color: fade(@project-color, 100%);
paragraph-spacing-before: 20;
paragraph-spacing-after: 3;
}
item[data-ol][data-type=project],
item[data-ul][data-type=project] {
font-weight: 900;
font-size: floor(16 * @ui-scale);
color: @text-color;
paragraph-spacing-before: 0;
paragraph-spacing-after: 0;
}
item[data-type="task"] {
font-style: normal;
}
item[data-type="note"] {
// font-size: 14;
color: @neutral;
line-height-multiple: 1;
paragraph-spacing-after: 5;
font-style: italic;
}
// Handle styles -----------------------------------
item {
// handle-size: 8;
handle-color: none;
handle-border-color: @guide-color ;
handle-border-width: 0.5;
// handle-border-width: floor(1 * @ui-scale);
}
item[collapsed] {
handle-color: @6____;
handle-border-color: @6____;
}
item[filtered] {
handle-color: @tag-color;
handle-border-color: @tag-color;
}
item[empty] {
handle-color: none;
handle-border-color: none;
}
item[leaf] {
handle-color: none;
handle-border-color: none;
}
item[mouseOverHandle] {
handle-size: @handle-size + (1.5 * @ui-scale);
}
// Tag styles -----------------------------------
item[data-ol][data-context][data-type=project],
item[data-ul][data-context][data-type=project],
item[data-context] {
> run[tag] {
color: fade(@text-color, 65%);
}
> run[tagvalue] {
color: fade(@text-color, 100%);
}
> run[tagvalue="home"] {
color: fade(@4____, 100%);
}
> run[tagvalue="work"] {
color: fade(@6____, 100%);
}
> run[tagvalue="IO"] {
color: fade(@7____, 100%);
}
> run[tagvalue="errands"] {
color: fade(@3____, 100%);
}
}
item[data-ol][data-due][data-type=project],
item[data-ul][data-due][data-type=project],
item[data-due] {
font-size: @user-font-size;
// font-style: normal;
// font-weight: normal;
color: @text-color;
> run[tag] {
// color: fade(@3____, 65%);
}
> run[tagvalue] {
color: @text-color;
}
}
item[data-ol][data-flag][data-type=project],
item[data-ul][data-flag][data-type=project],
item[data-flag] {
font-size: @user-font-size;
// font-style: normal;
// font-weight: normal;
color: @5____;
> run[tag] {
color: fade(@5____, 65%);
}
> run[tagvalue] {
color: @text-color;
}
}
item[data-ol][data-today][data-type=project],
item[data-ul][data-today][data-type=project],
item[data-today],
item[data-ol][data-dueToday][data-type=project],
item[data-ul][data-dueToday][data-type=project],
item[data-dueToday] {
font-size: @user-font-size;
// font-style: normal;
// font-weight: normal;
color: @2____;
> run[tag] {
color: fade(@2____, 65%);
}
> run[tagvalue] {
color: @text-color;
}
}
item[data-ol][data-dueTomorrow][data-type=project],
item[data-ul][data-dueTomorrow][data-type=project],
item[data-dueTomorrow] {
font-size: @user-font-size;
// font-style: normal;
// font-weight: normal;
color: @3____;
> run[tag] {
color: fade(@3____, 65%);
}
> run[tagvalue] {
color: @text-color;
}
}
item[data-ol][data-overdue][data-type=project],
item[data-ul][data-overdue][data-type=project],
item[data-overdue],
item[data-ol][data-pastDue][data-type=project],
item[data-ul][data-pastDue][data-type=project],
item[data-pastDue] {
font-size: @user-font-size;
// font-style: normal;
// font-weight: normal;
color: @1____;
> run[tag] {
color: fade(@1____, 65%);
}
// Just the tag values (between the parentheses).
> run[tagvalue] {
color: fade(@text-color, 100%);
}
> run[tagvalue="home"] {
color: fade(@4____, 100%);
}
> run[tagvalue="work"] {
color: fade(@6____, 100%);
}
> run[tagvalue="IO"] {
color: fade(@7____, 100%);
}
> run[tagvalue="errands"] {
color: fade(@3____, 100%);
}
}
item[data-ol][data-priority][data-type=project],
item[data-ul][data-priority][data-type=project],
item[data-priority] {
font-size: @user-font-size;
// font-style: normal;
// font-weight: normal;
color: @1____;
> run[tag] {
color: fade(@1____, 65%);
}
// Just the tag values (between the parentheses).
> run[tagvalue] {
color: fade(@text-color, 100%);
}
> run[tagvalue="home"] {
color: fade(@4____, 100%);
}
> run[tagvalue="work"] {
color: fade(@6____, 100%);
}
> run[tagvalue="IO"] {
color: fade(@7____, 100%);
}
> run[tagvalue="errands"] {
color: fade(@3____, 100%);
}
> run[tagvalue=high],
> run[tagvalue="1"],
> run[tagvalue="2"],
> run[tagvalue="3"],
> run[tagvalue="4"],
> run[tagvalue="5"] {
color: #f00;
font-weight: bold;
}
}
item[data-ol][data-waitingFor][data-type=project],
item[data-ul][data-waitingFor][data-type=project],
item[data-waitingFor],
item[data-ol][data-f_up][data-type=project],
item[data-ul][data-f_up][data-type=project],
item[data-f_up],
item[data-ol][data-agenda][data-type=project],
item[data-ul][data-agenda][data-type=project],
item[data-agenda] {
font-size: @user-font-size;
// font-style: normal;
// font-weight: normal;
color: fade(@7____, 65%);
> run[tag] {
// color: fade(@7____, 65%);
}
}
item[data-ol][data-defer][data-type=project],
item[data-ul][data-defer][data-type=project],
item[data-defer] {
font-size: @user-font-size;
// font-style: normal;
// font-weight: normal;
color: fade(@7____, 35%);
> run[tag] {
// color: fade(@7____, 35%);
}
}
item[data-ol][data-maybe][data-type=project],
item[data-ul][data-maybe][data-type=project],
item[data-maybe] {
font-size: @user-font-size;
// font-style: normal;
// font-weight: normal;
color: fade(@text-color, 35%);
> run[tag] {
color: fade(@text-color, 35%);
}
}
item[data-ol][data-search][data-type=project],
item[data-ul][data-search][data-type=project],
item[data-search] {
font-size: @user-font-size;
// font-style: normal;
// font-weight: normal;
color: @text-color;
> run[tag] {
color: fade(@text-color, 65%);
}
}
item[data-ol][data-done][data-type=project],
item[data-ul][data-done][data-type=project],
item[data-done] {
> run[content] {
text-strikethrough: NSUnderlineStyleSingle;
text-strikethrough-color: "@{appearance}_text-strikethrough-color2";
color: fade(@text-color, 35%);
}
> run[tag] {
text-strikethrough: NSUnderlineStyleSingle;
text-strikethrough-color: "@{appearance}_text-strikethrough-color2";
color: fade(@text-color, 35%);
}
}
run[link] {
cursor: pointer;
color: #1EAEDB;
text-underline: NSUnderlineStyleSingle;
}
run[lead] {
color: fade(@text-color, 50%);
text-underline: NSUnderlineStyleNone;
}
// run[link^="button"] {
// color: @text-color;
// text-underline: NSUnderlineStyleNone;
// font-weight: 100;
// }
run[link^="filter"] {
color: @text-color;
text-underline: NSUnderlineStyleNone;
}
run[tag] {
font-size: @user-font-size;
font-style: normal;
font-weight: normal;
color: fade(@text-color, 65%);
text-underline: NSUnderlineStyleNone;
}
run[tagvalue] {
color: fade(@text-color, 100%);
}
// Project Styles
item[data-section][data-type=project] {
> run[tag] {
color: @bg_color;
text-decoration: none;
}
}
item[data-metadata][data-type=project] {
color: @neutral;
font-size: floor(18 * @ui-scale);
> run[tag] {
color: @bg_color;
}
}
item[data-status="open"][data-type=project],
item[data-status="active"][data-type=project],
item[data-status="ongoing"][data-type=project] {
color: @4____;
}
item[data-status="hold"][data-type=project] {
color: @7____;
}
item[data-defer][data-type=project] {
color: fade(@7____, 35%);
}
item[data-dueToday][data-type=project] {
color: @2____;
}
item[data-dueTomorrow][data-type=project] {
color: @3____;
}
item[data-pastDue][data-type=project] {
color: @1____;
}
item[data-status="cancelled"][data-type=project] {
color: fade(@1____, 35%);
> run[content] {
text-strikethrough: NSUnderlineStyleSingle;
text-strikethrough-color: "@{appearance}_text-strikethrough-color";
color: fade(@1____, 35%);
}
> run[tag] {
text-strikethrough: NSUnderlineStyleSingle;
text-strikethrough-color: "@{appearance}_text-strikethrough-color";
color: fade(@1____, 35%);
}
}
item[data-status="closed"][data-type=project],
item[data-status="delivered"][data-type=project],
item[data-status="completed"][data-type=project] {
color: fade(@text-color, 35%);
> run[content] {
text-strikethrough: NSUnderlineStyleSingle;
text-strikethrough-color: "@{appearance}_text-strikethrough-color2";
color: fade(@text-color, 35%);
}
> run[tag] {
text-strikethrough: NSUnderlineStyleSingle;
text-strikethrough-color: "@{appearance}_text-strikethrough-color2";
color: fade(@text-color, 35%);
}
}
item[data-stats] {
font-size: @user-font-size;
font-family: hack;
color: @text-color;
font-style: normal;
> run[content] {
text-strikethrough: none;
color: @text-color;
}
> run[tag] {
text-strikethrough: none;
color: fade(@text-color, 65%);
}
> run[tagvalue] {
color: @text-color;
}
}