Atom Minimalist Dark Theme (UI + Syntax)

atom-minimalist-dark-theme.less

// Replaces the file at ~/.atom/styles.less

//
// Generic Variables
//
@background: #1F1F1F;
@foreground: #252526;
@ui-text-color: #CCC;
@dark-gray: #373434; // Current Line & Selection
@gray: #939999;
@light-gray: #999;
@very-light-gray: #f8f8f2; // Foreground
@blue: #69BFFB;

@cyan: #9DDCFC;
@soft-cyan: #66d9ef;
@green: #608B4E;
@light-green: #B4CFA2;
@orange: #DD9F73;
@pink: #ff79c6;
@purple: #bd93f9;
@red: #ff5555;
@yellow: #f1fa8c;
@dark-yellow: #E6DB74;
@sandstone: #cfcfc2;

@lace: #F8F8F0;
@white: #FFF;
@alpha-white: rgba(255, 255, 255, 0.10);
@black: #000;

//
// UI Customization
//
atom-workspace {
    color: @ui-text-color !important;
}

.tree-view {
    background-color: @foreground;
    &::before {
        background: @light-green !important;
    }
}

.status-bar {
    background-color: @background !important;
    a {
        color: @ui-text-color !important;
    }
    .text-error {
        color: @red !important;
    }
}

atom-workspace,
atom-pane,
atom-pane-container,
atom-panel,
.panel,
.panels,
.tool-panel,
.item-views,
.pane-item,
.config-menu {
    color: @ui-text-color !important;
    background-color: @foreground !important;
}

.nav > li.active > a,
.nav > li > a:hover {
    background-color: lighten(@foreground, 6%) !important;
}

atom-text-editor[mini] {
    background-color: @background;
    &.is-focused {
        border-color: @blue;
        box-shadow: 0 0 0 1px darken(@blue, 33%);
        background-color: lighten(@background, 1%);
    }
    .placeholder-text {
        color: @light-gray;
    }
}

.tab {
    background-color: @background !important;
}
.texteditor.tab.active::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: @white;
    content: "";
}
.close-icon {
    color: @light-green !important;
    &:hover {
        background: @alpha-white !important;
        cursor: pointer !important;
    }
}

.btn, .btn.btn-default {
    color: @ui-text-color;
    background: lighten(@foreground, 6%) !important;
}

select,
.package-card {
    color: @ui-text-color !important;
    background-color: lighten(@foreground, 6%) !important;
}

.list-item {
    color: @ui-text-color !important;
}

.selected::before {
    background-color: @alpha-white !important;
}

.status-modified,
.status-modified > .list-item {
    color: @light-green !important;
}

.status-ignored,
.status-ignored > .list-item {
    color: darken(@ui-text-color, 30%) !important;
}

::-webkit-scrollbar- {
    &scrollbar {
        width: 10px;
        height: 10px;
    }
    &thumb {
        background: @alpha-white !important;
        border-color: transparent !important;
    }
    &track,
    &corner {
        background: transparent !important;
    }
}


.popover-list {
    color: @ui-text-color !important;
    background-color: @foreground !important;

    ol.list-group li {
        background-color: @foreground !important;
        &.selected {
            background-color: lighten(@foreground, 6%) !important;
        }
    }

    .suggestion-description {
        background: lighten(@foreground, 3%) !important;
        .suggestion-description-more-link {
            color: @blue !important;
        }
    }
}

.tooltip-inner {
    background: rgba(66,66,66,0.95) !important;
    color: @ui-text-color !important;
}

.link {
    color: @blue !important;
}

//
// Syntax theme built from Dracula
//

// General colors
@syntax-text-color: @very-light-gray;
@syntax-cursor-color: @white;
@syntax-selection-color: lighten(@dark-gray, 10%);
@syntax-selection-flash-color: @very-light-gray;
@syntax-background-color: @background;

// Guide colors
@syntax-wrap-guide-color: @dark-gray;
@syntax-indent-guide-color: @gray;
@syntax-invisible-character-color: @gray;

// For find and replace markers
@syntax-result-marker-color: @light-gray;
@syntax-result-marker-color-selected: @white;

// Gutter colors
@syntax-gutter-text-color: @very-light-gray;
@syntax-gutter-text-color-selected: @syntax-gutter-text-color;
@syntax-gutter-background-color: @dark-gray;
@syntax-gutter-background-color-selected: @gray;

// For git diff info. i.e. in the gutter
@syntax-color-renamed: @blue;
@syntax-color-added: @green;
@syntax-color-modified: @orange;
@syntax-color-removed: @red;

atom-text-editor, atom-text-editor .gutter {
  background-color: @background;
  color: @very-light-gray;
}

atom-text-editor.is-focused .cursor {
  border-color: @lace;
}

atom-text-editor.is-focused .selection .region {
  background-color: @dark-gray;
}

atom-text-editor.is-focused .line-number.cursor-line-no-selection, atom-text-editor.is-focused .line.cursor-line {
  background-color: darken(@dark-gray, 4%);
}

atom-text-editor .invisible-character {
  color: @gray;
}

atom-text-editor .indent-guide {
  box-shadow: inset 1px 0 darken(@gray, 13%);
}

atom-text-editor .gutter .line-number.git-line-modified,
atom-text-editor .gutter .line-number.git-line-removed,
atom-text-editor .gutter .line-number.git-line-added {
  border-left-width: 5px;
  padding-left: calc(0.5em - 5px);
}

.markdown-preview > atom-text-editor {
  background: @background;
  border: 1px solid @background;
}

.markdown-preview atom-text-editor {
  color: @black;
}

.wrap-guide {
  background-color: @blue;
}

// Comments
.syntax--comment {
  color: @gray;
  &.syntax--block {
      color: @green;
      .syntax--punctuation {
          color: @green;
      }
  }
}

// JSDoc
.syntax--jsdoc {
    // Types
    &.syntax--type.syntax--instance {
        color: @blue;
    }
}

// Strings
.syntax--string {
  color: @orange;
}

// Numbers
.syntax--constant.syntax--numeric {
  color: @light-green;
}

.syntax--constant.syntax--language {
  color: @blue;
}

.syntax--constant.syntax--character, .syntax--constant.syntax--other {
  color: @blue;
}

.syntax--variable {
  color: @white;
}

.syntax--variable.syntax--other.syntax--readwrite.syntax--instance {
  color: @orange;
}

.syntax--constant.syntax--character.syntax--escaped, .syntax--constant.syntax--character.syntax--escape, .syntax--string .syntax--source, .syntax--string .syntax--source.syntax--ruby {
  color: @pink;
}

// import/return/=/... in typescript / !important/rem in CSS
.syntax--keyword {
  color: @blue;
}

// Import source
.syntax--import .syntax--string {
    text-decoration: none !important;
}

// Decorators
.syntax--decorator {
    .syntax--name,
    &.syntax--punctuation {
        color: @blue !important;
    }
}

// public/protected/private in typescript
.syntax--storage {
  color: @blue;
}

// class/const/let/=> in typescript
.syntax--storage.syntax--type {
  font-style: normal;
  color: @blue;
}

// this / super
.syntax--this,
.syntax--super {
    color: @blue;
}

// Class names
.syntax--entity.syntax--name.syntax--class {
  text-decoration: none;
  color: @white;
}

// Superclass names
.syntax--entity.syntax--other.syntax--inherited-class {
  font-style: normal;
  text-decoration: none;
  color: @white;
}

// Function declarations
.syntax--function.syntax--definition {
    color: @white;
}

// Function calls
.syntax--entity.syntax--name.syntax--function {
  color: @white;
}

// Function parameters
.syntax--variable.syntax--parameter {
  font-style: normal;
  color: @white;
}

// CSS directives
.syntax--entity.syntax--name.syntax--tag {
  color: @blue;
}

// CSS classes
.syntax--entity.syntax--other.syntax--attribute-name {
  color: @cyan;
}

// CSS attributes
.syntax--entity.syntax--other.syntax--attribute-selector {
  color: @cyan;
}

// CSS pseudo-classes
.syntax--pseudo-class {
    font-style: italic;
}

// CSS constants
.syntax--css.syntax--constant.syntax--property-value {
    color: @blue;
}

// CSS variables
.syntax--css .syntax--variable {
    color: @orange;
}

// Sass functions
.syntax--sass, .syntax-less {
    &.syntax--support.syntax--function.syntax--name {
        & ~ .syntax--property-value {
            color: @white;
            font-style: italic;
        }
    }
}

// Colors
.syntax--color {
    color: @orange !important;
}

// Units
.syntax--numeric + .syntax--unit {
    color: @light-green;
}

// !important keyword
.syntax--keyword.syntax--important {
    color: @gray;
    font-style: italic;
}

// Operators
.syntax--operator {
    color: @white;
}

// External function calls (on super class, for example)
.syntax--support.syntax--function {
  color: @white;
}

.syntax--support.syntax--constant {
  color: darken(@cyan, 6%);
}

// string/boolean/any in Typescript, properties in CSS
.syntax--support.syntax--type, .syntax--support.syntax--class {
  font-style: normal;
  color: @white;
}

.syntax--support.syntax--other.syntax--variable {
}

.syntax--invalid {
  color: @lace;
  background-color: @pink;
}

.syntax--invalid.syntax--deprecated {
  color: @lace;
  background-color: @yellow;
}

.syntax--meta.syntax--structure.syntax--dictionary.syntax--json .syntax--string.syntax--quoted.syntax--double.syntax--json {
  color: @sandstone;
}

.syntax--meta.syntax--diff, .syntax--meta.syntax--diff.syntax--header {
  color: @blue;
}

.syntax--markup.syntax--deleted {
  color: @red;
}

.syntax--markup.syntax--inserted {
  color: @green;
}

.syntax--markup.syntax--changed {
  color: @light-green;
}

.syntax--constant.syntax--numeric.line-number.syntax--find-in-files:not(.match) {
  color: @light-green;
}

.syntax--entity.syntax--name.syntax--filename {
  color: @blue;
}

.syntax--message.syntax--error {
  color: #F83333;
}

.syntax--punctuation.syntax--definition.syntax--string.syntax--begin.syntax--json:not(.syntax--meta.syntax--structure.syntax--dictionary.syntax--value.syntax--json), .syntax--punctuation.syntax--definition.syntax--string.syntax--end.syntax--json:not(.syntax--meta.syntax--structure.syntax--dictionary.syntax--value.syntax--json) {
  color: darken(@white, 7%);
}

.syntax--string {
    color: @orange;
    .syntax--invalid {
        color: @orange;
        background-color: transparent;
    }
}

.syntax--value.syntax--meta.syntax--structure.syntax--dictionary.syntax--json {
    .syntax--string.syntax--quoted.syntax--double.syntax--json {
      color: @orange;
      .syntax--punctuation {
          color: @orange;
      }
    }
}

.syntax--key.syntax--meta.syntax--structure.syntax--dictionary.syntax--json {
    .syntax--string.syntax--quoted.syntax--double.syntax--json {
      color: @cyan;
      .syntax--punctuation {
          color: @cyan;
      }
    }
}

.syntax--heading.syntax--gfm {
  color: @blue;
}

.syntax--entity.syntax--gfm {
  color: @pink;
}

.syntax--markup.syntax--underline.syntax--link.syntax--gfm {
  color: @cyan;
}

.syntax--variable.syntax--unordered.syntax--list.syntax--gfm {
  color: @cyan;
}

.syntax--variable.syntax--ordered.syntax--list.syntax--gfm {
  color: @cyan;
}

.syntax--variable.syntax--other.syntax--normal.syntax--shell {
  color:@purple;
}

.syntax--markup.syntax--bold.syntax--gfm,
.syntax--markup.syntax--italic.syntax--gfm {
  color: @white;
}

// The way of changing only the heading lines
.syntax--marker ~ .syntax--markup.syntax--gfm {
    color: @blue;
}

.syntax--markup.syntax--strike.syntax--gfm {
  color: @red;
}

.syntax--markup.syntax--raw.syntax--gfm {
  color: @ui-text-color;
  background: @alpha-white;
  padding: 2px 0px;
  border-radius: 2px;
}

.syntax--code.syntax--gfm {
  color: @gray;
}

.syntax--code.syntax--gfm .syntax--link {
    color: @cyan;
}

.syntax--critic.syntax--gfm.syntax--addition {
  color: @green;
}

.syntax--critic.syntax--gfm.syntax--deletion {
  color: @red;
}

.syntax--critic.syntax--gfm.syntax--substitution {
  color:  @orange;
}

.syntax--critic.syntax--gfm.syntax--highlight {
  color: @blue;
}

.syntax--critic.syntax--gfm.syntax--comment {
  color: @gray;
}

[data-zen="true"] atom-pane-container atom-pane .item-views {
  background: @background !important;
}

atom-text-editor .highlight.find-result .region {
  background: lighten(@dark-gray, 3%);
  z-index: -1000;
}

atom-text-editor .highlight.current-result .region,
atom-text-editor .highlight.current-result ~ .highlight.selection .region {
  background: lighten(@dark-gray, 20%); // to distinguish from the other results
  z-index: -1000;
}

atom-text-editor .bracket-matcher .region {
  border-bottom: 1px dotted @gray;
  z-index: 100;
}

// Highlights #{} in ruby string interpolation and <?php ?> syntax tag
.syntax--punctuation.syntax--section.syntax--embedded.syntax--begin,
.syntax--punctuation.syntax--section.syntax--embedded.syntax--end {
  color: @orange;
}

// Disable syntax errors in Markup files
.syntax--markup .syntax--invalid {
    background-color: transparent;
}

.git-line-modified {
    border-left-color: @light-green !important;
}