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