Customizable template


#1

This is a template that I use to customize into many different styles. I usually like to keep certain things the same, but I want to have some changes into my styles. This way, I just change the colors and maybe the font and it looks like something completely different. This one also has a lot of code there just to help me remember what is possible to do with stylesheets.

One dark

//////
//
//  0.2
//  - Addeed a different style for http links and emailto links.
//  - Added the code to enable typewriter mode.
//
//  I created this theme while attempting to put together a tutorial. My main purpose was to create something
//  that could easily be modified changing a couple of lines of code.
//////

//////
//  UI Scale - Used by the program to have a proportinal scale of the cared width, item hande, and guide line.
//////
@scale-ratio:    16;                // A number used to calculate the UI Scale.
@user-font-size: $USER_FONT_SIZE;   // Used for all the font sizes in the program and in the scale formula.
@ui-scale:       @user-font-size / @scale-ratio; //UI Scale.

//////
//  Elements styles - This changes the style atributes of the default theme.
//////
@line-height-multiple:          1.1;       // This is the spacing in between all the elements.
@project-line-height-multiple:  1.2;       // This is the spacing when a project appears.
// @font-family:                   Source Sans Pro; // This is the font used by Taskpaper.
@font-family:                   SFNS-Text; // This is the font used by Taskpaper.
@note-font-style:               italic;    // The font style of the notes.
@task-font-style:               normal;    // The font style of the tasks.
@project-font-style:            bold;      // The font style of the projects.
@sidebar-search-prefix:         "🔍 ";     // You can add your own prefix here if you desire.
//  I am going to have different sizes in projects.
@project-font-size:             @user-font-size*1.2;   // This is the project default size.
@project-depth-one-font-size:   @user-font-size*1.3;   // This is the font size for the first level.
@project-depth-two-font-size:   @user-font-size*1.26;  // This is the font size for the second level.
@project-depth-three-font-size: @user-font-size*1.23;  // This is the font size for the third level.
//  This is for your additional personalized styles
@note-depth-six-font-size:      @user-font-size*.90;   // This is used for a particular file "Services"

/////
//  Colors - One Dark v 0.1
/////
//  BASIC COLORS - These are the ones you want to change.
@base-color:              rgb(33, 118, 199);  // This is the first basic color.
                                              // This is a list of all the variables that used this base color
                                              // Caret color, collapsed handle color, expanded handler,
                                              // drop indicator, guide line, invisibles, selection, message,
                                              // and link. Tags @context, @pastor(ja), @pastor(dudley), @search, @priority
@base-color-two:          rgb(171, 178, 193); // his is the color of the text everywhere.
@base-color-three:        rgb(209, 154, 102); // Used for the color of the projects
                                              // mixed to get the color of the notes. Default @tags
@base-color-four:         rgb(99, 129, 73);   // Used for the tags @person, @pastor, @missionary
@base-color-five:         rgb(97, 174, 238);  // This is the default tag color
@background-color:        rgb(40, 44, 52);    // This is the background color.
@muted-color:             rgb(75, 82, 99);    // Muted color used for @done, @priority(low) and @hold
@highlight-color:         rgb(224, 108, 117); // Used for @due and @recurring
@highlight-color-two:     rgb(255, 74, 88);   // Used for @high, @today and @flag
@highlight-color-three:   rgb(99, 129, 73);   // Used to highlight certain notes and @topic

/////
//  USER INTERFACE COLORS- These are the colors found in the Interface
/////
@caret-color:             @base-color;
@collapsed-handle-color:  @base-color;
@drop-indicator-color:    @base-color; // When you want to move something, the handle changes color.
@expanded-handle-color:   mix(@collapsed-handle-color, @background-color, 20%);
@guide-line-color:        mix(@base-color, @background-color, 15%);
@handle-color:            mix(@collapsed-handle-color, @background-color, 20%);
@handle-secondary-color:  mix(@collapsed-handle-color, @background-color, 20%);
@invisibles-color:        mix(@base-color, @background-color, 70%);
@selection-color:         mix(@base-color, @background-color, 30%);
@message-color:           mix(@text-color, @background-color, 50%);


/////
//  TEXT COLORS - These are the colors for the three text elements in Taskpaper//
/////
@project-color:           @base-color-three;
@note-color:              mix(@base-color-two, @base-color-three);
@note-depth-five-color:   @highlight-color-three;
@text-color:              @base-color-two;
@task-color:              @text-color;
@link-color:              @base-color;
// @search-color:            rgb(6, 97, 21);


/////
//  TAG COLORS - These are the colors for the Default Tags and their text included in TaskPaper
/////
@context-color:         @base-color;
@done-color:            @muted-color;
@done-text-color:       @done-color;
@dudley-color:          @base-color;
@dudley-text-color:     @dudley-color;
@due-color:             @highlight-color;
@due-text-color:        @text-color;
@flag-color:            @highlight-color-two;
@flag-text-color:       @flag-color;
@high-color:            @highlight-color-two;
@high-text-color:       @high-color;
@hold-color:            @muted-color;
@hold-text-color:       @hold-color;
@home-color:            @base-color;
@home-text-color:       @home-color;
@low-color:             @muted-color;
@low-text-color:        @low-color;
@missionary-color:      @base-color;
@missionary-text-color: @missionary-color;
@priority-color:        @base-color;
@priority-text-color:   @priority-color;
@search-color:          @base-color;
@search-text-color:     @text-color;
@pastor-color:          @base-color;
@pastor-text-color:     @pastor-color;
@person-color:          @base-color-four;
@person-text-color:     @person-color;
@victor-color:          @base-color;
@victor-text-color:     @base-color;
@tags-color:            @base-color-five;
@tags-text-color:       @tags-color;
@today-color:           @highlight-color-two;
@today-text-color:      @today-color;
@topic-color:           @highlight-color-three;
@topic-text-color:      @today-color;
@victor-color:          @highlight-color;
@victor-text-color:     @victor-color;
@work-color:            @base-color;
@work-text-color:       @base-color;


/////
// Window
/////
window {
  appearance: NSAppearanceNameVibrantDark;
}


/////
// Editor
/////
editor {
  /////
  // This is to enable "Typewriter mode". In this mode, the line the user is
  // writing on is always centered vertically. There is also code here to pad the
  // content to give the alussion of keeping things centered horizontally too.
  /////
  // typewriter-scroll-percent: 50%; //This keeps the line the user is writing centered vertically
  // bottom-padding-percent: 50%;  //This helps to keep the input centered vertically too
  // editor-wrap-to-column: 80; // This helps to center the content horizonyally.
  // item-wrap-to-column: 66; // This helps to center the content horizonyally.
  /////
  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:                20 * @ui-scale;
  caret-width:                floor(2 * @ui-scale);
  caret-color:                @caret-color;
  drop-indicator-color:       @drop-indicator-color;
  invisibles-color:           @invisibles-color;
  folded-items-label:         "¶—¶";
  filtered-items-label:       "¶—¶";
  item-handle-size:           floor(6 * @ui-scale);
  selection-background-color: @selection-color;
  guide-line-color:           @guide-line-color;
  guide-line-width:           floor(1 * @ui-scale);
  message-color:              @message-color
  // typewriter-scroll-percent: 50%; //This keeps the line the user is writing centered vertically
  // bottom-padding-percent: 50%;  //This helps to keep the input centered vertically too
  // editor-wrap-to-column: 80; // This helps to center the content horizonyally.
  // item-wrap-to-column: 66; // This helps to center the content horizonyally.
}


/////
//  TaskPaper Styles
/////

//  Searchbar
/////
searchbar {
  appearance: NSAppearanceNameVibrantDark;
  color: mix(@background-color, @text-color, 80%);
  secondary-text-color: mix(@background-color, @text-color, 50%);
  error-text-color: @base-color;
  placeholder-color: mix(@background-color, @text-color, 30%);
  background-color: @text-color;
}

//  Sidebar
/////
sidebar {
    // search-item-prefix: @sidebar-search-prefix; // This is not currently working.
}


/////
//  Items
/////
item {
    handle-size: @handle-size;
    handle-border-width: floor(1 * @ui-scale);
    handle-color: @expanded-handle-color;
    handle-border-color: white;
}

//  Outline handle colors when expanded
/////
item[expanded] {
    handle-color: blue;
    handle-border-color: @handle-secondary-color;
}

// Outline handle colors when collapse
/////
item[collapsed] {
    handle-color: @collapsed-handle-color;
    handle-border-color: none;
}

//  Outline handle colors when filtered
/////
item[filtered] {
    handle-color: mix(@base-color, @background-color, 40%);
    handle-border-color: none;
}

//  Change style over handle when mouse is over
/////
item[mouseOverHandle] {
    handle-size: @handle-size + (5 * @ui-scale);
}

//  Change style over handle when it is a leaf and the mouse is over it
/////
// item[mouseOverHandle][leaf] {
//     handle-border-color: red;
// }

//  No children underneath
/////
item[leaf] {
    handle-color: @handle-color;
    handle-border-color: none;
}

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


/////
//  Default Taskpaper Elements and their styles
/////

//  Notes
/////
item[data-type="note"] {
    font-style: @note-font-style;
    color: @note-color;
}
item[depth="5"][data-type="note"] {
    color: @note-depth-five-color;
}
item[depth="6"][data-type="note"] {
    font-size: @note-depth-six-font-size;
}

//  Tasks
/////
item[data-type="task"] {
    font-style: @task-font-style;
    color: @task-color;
}

//  Projects
/////
item[data-type="project"] {
    font-weight: @project-font-style;
    line-height-multiple: @project-line-height-multiple;
    // paragraph-spacing-after: 1.5;
    font-size: @project-font-size;
    color: @project-color;
}

//
/////
item[depth="1"][data-type="project"] {
    font-size: @project-depth-one-font-size;
}
item[depth="2"][data-type="project"] {
    font-size: @project-depth-two-font-size;
}
item[depth="3"][data-type="project"] {
    font-size: @project-depth-three-font-size;
}

// Colors project items that are expanded and have mouseOver.
/////
// item[data-type=project][mouseOver][expanded] {
//   color: red;
// }


/////
//  These will be the Styles that the text will gain by having a specific @
//  Notice that it is possible to also style the tag text itself here, but it is not recommended since you
//  might want to have keep the hierarchy from affecting some elements.
/////
// The characteristics the text inherits when a @done tag is added.
/////
item[data-done] {
    > run[display] {
        text-strikethrough: NSUnderlineStyleSingle;
        text-strikethrough-color: @done-color;
        color: @done-color;
    }
    //This is for the @done tag itself
    > run[tag] {
        text-strikethrough: NSUnderlineStyleSingle;
        text-strikethrough-color: @done-text-color;
        color: @done-text-color;
    }
}

// The characteristics the text inherits when a @today tag is added.
// You get the idea!
item[data-today] {
    > run[display] {
        text-underline: NSUnderlineStyleDouble;
        text-underline-color: @today-color;
        // font-size: @user-font-size + 1;
        // background-color: @today-color;
        font-style: normal;
        // font-weight: 600;
        // color: @today-text-color;
    }
    > run[tag] {
        // font-weight: 600;
        font-style: italic;
        color: @today-color;
    }
}

/////
//  These are here since they are usually used in the GTD method. Modified at will
/////
// I am only modifying this @priority tag when it has these values.
item[data-priority=high], item[data-priority=1] {
    // If we did it this way, all the tag text inside would be modified.
    // >run[tag]{
    //     color: @high-color;
    // }
    // This is ONLY changing the actual tagvalue
    > run[tagvalue=high], > run[tagvalue=1] {
        color: @high-color;
    }
    > run[display] {
        // color: @high-color;
        text-underline-color: @high-text-color;
        text-underline: NSUnderlineStyleDouble;
    }
}
// I am only modifying this @priority tag when it has these values.
item[data-priority=low], item[data-priority=5] {
    // If we did it this way, all the tag text inside would be modified.
    // >run[tag]{
    //     color: @low-color;
    // }
    // This is ONLY changing the actual tagvalue
    > run[tagvalue=low], > run[tagvalue=5] {
        color: @low-color;
    }
    // This changes the text when this particular tag and the value is here.
    > run[display] {
        color: @low-text-color;
        // text-underline-color: @low-color;
        // text-underline: NSUnderlineStyleDouble;
    }
}

item[data-context] {
    // > run[tag]{
    //     color: @context-color;
    // }
    > run[tagvalue="work"], > run[tagvalue="Work"] {
        color: @work-color;
    }
    > run[tagvalue="home"], > run[tagvalue="Home"] {
        color: @home-color;
    }
}

item[data-person] {
    > run[display] {
      // color: @speaker-text-color;
      font-weight: 600;
    }
    // > run[tag]{
    //   color: @person-color;
    // }
    > run[tagvalue=Victor], > run[tagvalue=victor] {
        color: @victor-color;
    }
}

item[data-missionary] {
    > run[display] {
        // color: @missionary-text-color;
        // font-weight: 600;
    }
}

item[data-flag] {
    > run[display] {
        // color: @flag-text-color;
        text-underline-color: @flag-text-color;
        text-underline: NSUnderlineStyleDouble;
    }
}

item[data-hold] {
    > run[display] {
        color: @hold-text-color;
    }
    > run[tag]{
    }
}

/////
// These are the Styles for the Tags themselves.
/////
//These are for Weblink and other standard things.
run[link] {
    cursor: pointer;
    color: @link-color;
}

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

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

run[link^="http"], run[link^="mailto"] {
  color: blue;
}

/////
// Tag Styles
/////
// These are all the different tags necessary here.
run[tag] {
    font-size: @user-font-size - 1;
    font-style: italic;
    // font-weight: lighter;
    color: @tags-color;
}

// If you notice the following, these deternine the formating of the tags themselves.
// The following is formating the tag @search.
run[tag=data-search] {
    color: @search-color;
}

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

run[tag=data-flag] {
    font-style: italic;
    color: @flag-color;
}

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

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

run[tag=data-context] {
  color: orange;
}

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

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

#2

Wonderfully documented - thanks!


#3

Here are some extra color schemes that you might want to try out with this template. Just copy the text below and substitute that section in the template above.

Atom Dark

/////
//  Colors - Atom Dark v 0.1
/////
//  BASIC COLORS - These are the ones you want to change.
@base-color:              rgb(33, 118, 199);  // This is the first basic color.
                                              // This is a list of all the variables that used this base color
                                              // Caret color, collapsed handle color, expanded handler,
                                              // drop indicator, guide line, invisibles, selection, message,
                                              // and link. Tags @context, @pastor(ja), @pastor(dudley), @search, @priority
@base-color-two:          rgb(197, 200, 198); // This is the color of the text everywhere.
@base-color-three:        rgb(198, 197, 254); // Used for the color of the projects
                                              // mixed to get the color of the notes.
@base-color-four:         rgb(153, 204, 153); // Used for the tags @person, @pastor, @missionary
@base-color-five:         rgb(252, 95, 240);  // Used for tags-color
@background-color:        rgb(29, 31, 33);    // This is the background color.
@muted-color:             rgb(68, 68, 68);    // Muted color used for @done, @priority(low) and @hold
@highlight-color:         rgb(249, 238, 152); // Used for @due and @recurring
@highlight-color-two:     rgb(255, 74, 88);   // Used for @high, @today and @flag
@highlight-color-three:   rgb(73, 129, 77);   // Used to highlight certain notes

My brown experiment

/////
//  Colors - Brown v 0.1
/////
//  BASIC COLORS - These are the ones you want to change.
@base-color:              rgb(99, 99, 184);   // This is the first basic color.
                                              // This is a list of all the variables that used this base color
                                              // Caret color, collapsed handle color, expanded handler,
                                              // drop indicator, guide line, invisibles, selection, message,
                                              // and link. Tags @context, @pastor(ja), @pastor(dudley), @search, @priority
@base-color-two:          rgb(243, 230, 207); // This is the color of the text everywhere.
@base-color-three:        rgb(209, 176, 122); // Used for the color of the projects
                                              // mixed to get the color of the notes.
@base-color-four:         rgb(99, 129, 73);   // Used for the tags @person, @pastor, @missionary
@base-color-five:         rgb(252, 95, 240);  // Used for tags-color
@background-color:        rgb(39, 35, 28);    // This is the background color.
@muted-color:             rgb(75, 82, 99);    // Muted color used for @done, @priority(low) and @hold
@highlight-color:         orange;             // Used for @due and @recurring
@highlight-color-two:     rgb(255, 74, 88);   // Used for @high, @today and @flag
@highlight-color-three:   rgb(81, 164, 82);   // Used to highlight certain notes

Light

/////
//  Colors - Mine Light
// v. 0.11 Changed the items
/////
//  BASIC COLORS - These are the ones you want to change.
@base-color:              rgb(100, 199, 229); // This is the first basic color.
                                              // This is a list of all the variables that used this base color
                                              // Caret color, collapsed handle color, expanded handler,
                                              // drop indicator, guide line, invisibles, selection, message,
                                              // and link. Tags @context, @pastor(ja), @pastor(dudley), @search, @priority
@base-color-two:          rgb(40, 47, 48);    // This is the color of the text everywhere.
@base-color-three:        rgb(80, 161, 186);  // Used for the color of the projects
                                              // mixed to get the color of the notes.
@base-color-four:         rgb(99, 129, 73);   // Used for the tags @person, @pastor, @missionary
@base-color-five:         rgb(252, 95, 240);  // Used for tags-color
@background-color:        rgb(248, 249, 251); // This is the background color.
@muted-color:             rgb(75, 82, 99);    // Muted color used for @done, @priority(low) and @hold
@highlight-color:         rgb(237, 178, 62);  // Used for @due and @recurring
@highlight-color-two:     rgb(236, 85, 63);   // Used for @high, @today and @flag
@highlight-color-three:   rgb(85, 150, 119);  // Used to highlight certain notes