Theme: Dark Theme based on Atom One Dark Syntax


#1

Started work on a dark theme based on Atom One Dark Syntax. Still not complete but I would love some feedback thus far.

Features:

  • Green for items tagged @today or @active
    Especially useful when used in conjunction with this great script Script: displaying the active task in the OS X menu bar

  • Cyan for items tagged @next

  • Red for items tagged @flag or @high or @prio

  • Faded blue for items tagged @waiting

  • Selection is a subtle tint color which allows for easy reading of all text

Other features:

  • Done tasks are dimmed so as not to distract from what needs to be done
  • Done tasks also mutes all other colours that may have been applied from previous tags
  • Notes are also dimmed in relation to tasks.
  • Tags are always dimmed in relation to task text.
  • Saved searches are a more subdued tone as not to distract from main list

Preview

Code
Paste into your user.less file (File > Open Application Folder)

        // Base -----------------------------------
@base-font-size: 16;
@user-font-size: $USER_FONT_SIZE;
@ui-scale: @user-font-size / @base-font-size;
@font-family: Source Sans Pro;
@line-height-multiple: 1.1;
@syntax-hue: 220;

// Monochrome -----------------------------------
@mono-1: hsl(@syntax-hue, 14%, 71%); // default text
@mono-2: hsl(@syntax-hue, 10%, 40%);

// Colors -----------------------------------
@color1: hsl(187, 47%, 55%);
@color2: hsl(207, 82%, 66%);
@color3: hsl(286, 60%, 67%);
@color4: hsl( 95, 38%, 62%);
@color5: hsl(355, 65%, 65%);
@color6: hsl( 5, 48%, 51%);
@color7: hsl( 29, 54%, 61%);
@color8: hsl( 39, 67%, 69%);

// Base colors -----------------------------------
@text-color: @mono-1;
@bg-color: hsl(@syntax-hue, 13%, 18%);

// UI Colors -----------------------------------
@tint-color: @color8;
@interface-color: @tint-color;
@selection-color: mix(@tint-color, @bg-color, 10%);
@invisibles-color: fade(@tint-color, 30%);
@guide-color: fade(@tint-color, 10%);
@message-color: mix(@text-color, @bg-color, 50%);
editor {
    color: @text-color;
    font-size: @user-font-size;
    font-family: @font-family;
    background-color: @bg-color;
    line-height-multiple: @line-height-multiple;
    item-indent: 20px * @ui-scale;
    caret-width: 2px;
    caret-color: @color2;
    handle-color: @tint-color;
    drop-indicator-color: @tint-color;
    invisibles-color: @invisibles-color;
    selection-background-color: @selection-color;
    guide-line-color: @guide-color;
    message-color: @message-color;
}
item[data-type="project"] {
    font-weight: semi-bold;
    color: @color7;
}
item[data-type="task"] {
    font-style: normal;
}
item[data-type="note"] {
    font-style: italic;
    color: @mono-2;
}

// Tag styles -----------------------------------
item[data-today] {
    font-size: @user-font-size;
    font-style: normal;
    font-weight: normal;
    color: @color4;
    > run[tag] {
        color: fade(@color4, 60%);
    }
}
item[data-flag],
item[data-high],
item[data-prio] {
    font-size: @user-font-size;
    font-style: normal;
    font-weight: normal;
    color: @color5;
    > run[tag] {
        color: fade(@color5, 60%);
    }
}
item[data-next] {
    font-size: @user-font-size;
    font-style: normal;
    font-weight: normal;
    color: @color1;
    > run[tag] {
        color: fade(@color1, 60%);
    }
}
item[data-waiting] {
    font-size: @user-font-size;
    font-style: normal;
    font-weight: normal;
    color: fade(@color2, 60%);
    > run[tag] {
        color: fade(@color2, 20%);
    }
}
item[data-search] {
    font-size: @user-font-size;
    font-style: normal;
    font-weight: normal;
    color: fade(@mono-1, 50%);
    > run[tag] {
        color: fade(@mono-1, 20%);
    }
}
item[data-done] {
    > run[display] {
        text-strikethrough: NSUnderlineStyleSingle;
        text-strikethrough-color: fade(@text-color, 20%);
        color: fade(@text-color, 20%);
    }
    > run[tag] {
        text-strikethrough: NSUnderlineStyleSingle;
        text-strikethrough-color: fade(@text-color, 20%);
        color: fade(@text-color, 20%);
    }
}
run[link] {
    cursor: pointer;
    color: @color2;
}
run[lead] {
    color: fade(@color2, 50%);
}
run[link^="filter"] {
    color: @text-color;
}
run[tag] {
    font-size: @user-font-size;
    font-style: normal;
    font-weight: normal;
    color: fade(@color3, 70%);
}

TODO

  • Still some tweaks needed, such as the dash
  • More stuff…
  • Fix bugs too.

Stylesheet: Atom One Dark
TaskPaper Extensions Wiki
#2

Looks great to me. When it is ready, I’d like to look at the code.


#3

Now with the code and an updated preview. Not a less expert so pardon the code.


#4

Thank you! I’ve just bookmarked this. As I explore themes, this will be very helpful.


#5

Not sure if you’ve seen them yet, but there are a few more resources popping up:


#6

Updated the code to reflect new styling options for the lead dash in tasks.

From here on out, please follow along with code updates on GitHub Repo. Suggestions and critiques are still very much welcome here though.


#7

Hi Pedro - Thanks so much for taking on the creation of a theme based on Atom’s One-Dark. I loved that them in Atom so much I use it in Sublime Text lately too!

Just had some style thoughts after recent base changes and the inspired Notes-First theme just released by pascallaliberte.

I’ve made a github Fork that anyone can try out. Feel free to pull whatever you like but I’m sure you’ve already been working on updates since your last release.

Cheers everyone!


#8

What I changed:

  • renamed the deprecated user.less filename to new theme.less
  • updated the handle tints to be in line with TP3 release style of tinting dim when not collapsed. Made even dimmer than original tint to be as distinct as possible from collapsed handles, yet still visible.
  • borrowed the cleaner handle idea from theme-notes-first to make them invisible when there are no sub-tasks or sub-notes.

#9

Hi @jasonshanks, thanks for forking this. Unfortunately I’ve been using Linux more often at work now so until @jessegrosjean makes a version for Atom (hint hint :slight_smile: ) I can’t use TP as often as I’d like and therefore haven’t done much more to extend this theme.

I will however look into yours once I get a chance.

Cheers,
Pedro


#10

Hi @pslobo, I understand and feel your pain in a different way. I’ve been using my iPad Pro 70% of the time lately, which has caused quite a quandary for all my excellent Mac tools like TP!

Fortunately Editorial just hit public beta! No new TP enhancements yet though.


#11

thank you both @pslobo and @jasonshanks :smile:

I was still using, after renaming it and adding a couple of lines to dim “handles”, the original release so was curious to give this a try but… as soon as I place the new theme.less in place TP doesn’t open anymore my files :frowning:

all is fine as soon as I put the old one back

ideas? :-/

thnx

EDIT: sorry guys, I’m an idiot: used Safari’s “download linked file” and actually got an HTML file :blush:

:coat:


#12

Happy you got that sorted out :smiley:


#13

Hi All!

I’ve done some major overhauling, updated for 3.1 and 3.2 theme enhancements, and a bit of a departure in style decisions.

Let’s call this v2, hope you enjoy!


#14

Updated my fork again to account for the new handle styles introduced in 3.3.

A further departure in style from the original but closer to the default theme with the open circles.

TaskPaper-Atom-One-Dark v3.3 – the Handlebar Moustache Edition

Cheers!


#15

Thanks for taking up the mantle of this theme @jasonshanks. Been stuck on Linux longer than I’d care for and haven’t been able to tinker with this. Looks great by the way!


#16

Hey your most welcome @pslobo and thanks! You laid a great foundation and it’s such a beautiful theme. Every once in a while I waste an hour trowling through dozens of themes in Atom, eventually to just come back to One Dark.

You’re welcome to merge any useful bits back into your version of course. I made some wholly subjective style decisions. In fact I’m thinking next of applying a little more LESS methodology and commenting as much as reasonable to make it dead simple for anyone else to quickly swap colours around to their liking.

Linux is cool too! My favourite distro to tinker with is in my Raspberry Pi :slight_smile:

Cheers!


#17

Yeah, I agree, One Dark is such a great color scheme.

Don’t get me wrong, love Linux use it daily and it’s the basis of my job, I just miss the tools I have on OS X. Hoping to convince the boss the spring for a Mac at work too :slight_smile:


#18

@jasonshankshas taken up the mantle of continued development of this theme/stylesheet.

From here on out, I’d advise you to use his… I am anyway :smiley: