Atom stylesheet

styles.less

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */

// Used with .lcov-covered
@import "packages/atom-lcov/styles/atom-lcov";

/*
Adapted for JS from https://atom.io/packages/file-icons
 @import "packages/file-icons/styles/colors"; // to use the colours
 @import "packages/file-icons/styles/icons";  // to use the defined icons
 @import "packages/file-icons/styles/items";
 @{pane-tab-selector}, .icon-file-text {
   &[data-name$=".js"]          { background-color: blue;             } // Colours icon and filename
   &[data-name$=".js"]:before   { .js-icon; .medium-red; } // Colours icon only
 }

Folders:
 @import "packages/file-icons/styles/items";
@{pane-tab-selector}, .icon-file-directory {
  &[data-name=".git"]:before { .git-icon; }
}

Icons are located at ./stylesheets/icons.less.
Create a custom CSS class and express its code through content: "\fxxx";. Octicons is the default icon's class.
See https://octicons.github.com/

.ruby-icon { content: "\f047"; }
 */
@import "packages/file-type-icons/styles/file-type-icons";
[data-name^='.']:before {
   .configuration-icon;
}

.theme-one-dark-ui,
.theme-one-light-ui {
  .tab-bar {
    /*
    font-size: 10px; // smaller font size
    */
    /* Currently selected tab */
    // Can use `[data-type$="Editor"]` to target regular tabs and not e.g., the Settings tab
    .tab {
        height: 30px; // Keep height stable given that we increase font-size for active tabs
        margin-right: 5px; // Spacing between tabs
    }
    .tab.active > .close-icon {
        top: 3px; // Icon gets vertically misaligned for active tabs
    }

    .tab.active:not(.pinned-tab):not([data-type="TreeView"]):not([data-type="Object"]):not([data-type="PanelDock"]) { // Avoid styling the "Project", "Github" "tabs", and Linter panel respectively
        opacity: 0.88;
        max-width: 200px;
        font-weight: 900;
        line-height: 23pt;
        -webkit-text-stroke: 1.42px black;
        font-size: 12.3pt;
        color: white !important;
        border-radius: 10px;
        /*
        text-shadow: 2px 2px #ff0000;
        */
        background-image: linear-gradient(to bottom right, red, yellow);
    }
    /* Currently selected pinned tab */
    .tab.pinned-tab.active {
        background-image: none;
        background-color: white;
        border-radius: 10px;
    }
    .tab.pinned-tab:not(.active) {
        background-color: white;


        border-radius: 10px;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        border-right: 1px outset white;
        border-left: 1px outset white;
        opacity: 0.7;
    }
    /*
    // Added background on this at https://github.com/averrin/color-tabs-regex/issues/18
    - `.js-icon` groups across file extension (e.g., `.es6` and `.js` both
        get treated as `.js-icon`) but works only in conjunction with
        `file-icons` package; see https://github.com/file-icons/atom/blob/master/lib/icons/.icondb.js
        for other `file-icons` extension-to-type mappings
    - Can also do:
    .tab > div[data-path$="js"] { // matches against full file path
        color: aqua;
    }
    */
    // Works
    .tab:not(.active) > div[data-name$="js"] {
        color: aqua;
    }
    .tab:not(.active) {
        color: white;
        border-radius: 10px;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        border-right: 1px outset white;
        border-left: 1px outset white;
        opacity: 0.7;
        /*
      color: aqua;
      min-width: 10em; // larger minimum width
      max-width: 16em; // smaller max width
      */
    }
  }
}

/*
Important tips
1. Use editor:log-cursor-scope (ctrl-shift-alt-p) to find the current scope
2. Open in dev mode (View->Developer->Open in Dev Mode) to inspect elements (e.g., current color)
3. Use Styleguide:Show (ctrl-shift-G) to see built-in classes
4. By using @import 'ui-variables'; one can also add @brown; etc.
5. Look at file-type-icons and file-icons source
*/


// For ES6 template literals
// syntax--punctuation syntax--section syntax--embedded syntax--js
/*
atom-text-editor.editor, :host {
  .syntax--source.syntax--js {
    .syntax--string.syntax--quoted.syntax--template.syntax--js {
      color: red;
      .syntax--source.syntax--js.syntax--embedded.syntax--source {
        color: blue;
        &.syntax--punctuation.syntax--section.syntax--embedded.syntax--js {
          color: #a3685a;
        }
      }
    }
  }
}
*/

/* Make `language-javascript-plus` ES6 colored templates highlighting
    distinct from surrounding JavaScript highlighting  */
/*
:root {
  --editor-color: 34, 37, 42;
  --editor-hue: 222;
  --editor-saturation: 11%;
  --editor-lightness: 15%;
  --editor-hue-saturation-lightness: 222, 11%, 15%;
}
*/
/*
Default of Atom per https://github.com/atom/one-dark-syntax/issues/19#issuecomment-86924764
(adjusted slightly as seems different now)
.theme-one-dark-ui atom-text-editor {
  background-color: ~"hsl(var(--editor-hue-saturation), 15%)";
}
*/
.syntax--key,syntax--json {
    // Just the key
}
.syntax--json > .syntax--string:not(.syntax--key):not(.syntax--punctuation) {
    color: aqua;
}
.syntax--template {
  /*
  // escaping with tilde for LESS
  padding: 3px 0px;
  // background-color: ~"hsl(var(--editor-hue-saturation), 30%)";
  // background-color: ~"hsla(var(--editor-hue-saturation-lightness), 1)";
  // background-color: ~"rgba(var(--editor-color), 0.5)";
  background-color: ~"hsla(250, 51%, 15%, 1)"; // Opacity arg doesn't work
  // background-color: ~"hsl(250, 51%, 15%)";
  // opacity: 0.77; // What we want, but can't be overridden
  font-style: italic;
  */
  font-family: monospace;
}
/**
.syntax--embedded {
  // escaping with tilde for LESS
  // background-color: ~"hsl(var(--editor-hue), var(--editor-saturation), 0%)";
  padding: 3px 0px;
  background-color: ~"hsla(var(--editor-hue-saturation-lightness), 1)"; // Opacity only works on our parent background, not grand-parent
  // background-color: ~"rgba(var(--editor-color), 0.8)";
  // background-color: ~"hsla(var(--editor-hue), var(--editor-saturation), var(--editor-lightness), 1)";
  font-style: normal;
}
/**/
// For regex parenthetical groupings (need to find for regex replacements too!)

atom-text-editor {
  .syntax--regexp {
    .syntax--meta.syntax--group {
      color: aqua;
      .syntax--punctuation.syntax--definition.syntax--group {
        color: red;
      }
    }
  }

  // Adding first for specificity
  .syntax--punctuation.syntax--definition.syntax--comment,
  .syntax--comment {
    color: #909090;
  }

  // Dark enough gray
  .gutter .line-number {
    color: #9c9c9c;
  }
  .gutter .line-number.cursor-line {
    color: lightgray;
  }
}

/*
 * Examples
 * (To see them, uncomment and save)
 */

/* For an old man's vision! */
.tree-view .project-root.project-root > .project-root-header:before,
.tree-view .project-root.project-root > .header .name {
  line-height: 1.9em !important;
  font-size: 12pt;
}
.list-group li:not(.list-nested-item), .list-tree li:not(.list-nested-item), .list-group li.list-nested-item > .list-item, .list-tree li.list-nested-item > .list-item,
.tree-view .project-root.project-root > .project-root-header,
.tree-view .project-root.project-root .entries > .file,
.tree-view .project-root.project-root .entries > .directory {
  line-height: 1.5em !important;
  font-size: 12pt;
}

/*
Unfortunately no support for CSS4 `:has()` (with :not()) to avoid
Reporting when there is only a modified submodule
// style the background color of the tree view
.tree-view {
    .status-added .icon-file-submodule {
        // Avoid showing changed submodules
        // color: #9da5b4;
        // Avoid showing submodules very differently
        color: gray;
    }
  // background-color: whitesmoke;
}
.project-root.status-modified .icon-repo {
    color: gray;
}
*/


// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

atom-text-editor.editor .syntax--cursor {
  // border-color: red;
}



/**
PACKAGE: symbols-tree-view
**/
.symbols-tree-view{
  // Hide all icons
  .icon::before{
    content: '';
  }

  li.list-item{
    cursor: pointer;
    overflow: hidden;
    transition: background-color .15s, padding-left .15s;
    font-size: 1.1rem;
    letter-spacing: .04em;

    // Add styles to the types of symbols

    .icon-variable{
      color: lightblue;
    }

    .icon-unknown{
      color: magenta;
    }

    .icon-null{
      color: white;
    }

    .icon-undefined{
      color: gray;
    }

    .icon-boolean{
      color: red;
    }

    .icon-number{
      color: purple;
    }

    .icon-string{
      color: green;
    }

    .icon-array{
      color: yellow;
    }

    .icon-object{
      color: orange;
    }

    .icon-property{
      color: pink;
    }

    .icon-function-expression {
      color: blue;
    }
    .icon-prototype-method {
      color: green;
    }
    .icon-object-method {
      color: aqua;
    }

    .icon-function-declaration {
      color: beige;
    }

    // Your prefered colors
    // Learn about CSS color data type from: https://developer.mozilla.org/en/docs/Web/CSS/color_value
    // Personally, I like HSL.
    // Note: I am using UI theme "One Dark". My scheme as follows may look bad in your theme.
    .icon-field{
      color: hsl(40, 80%, 45%);
    }
    .icon-method{
      color: hsl(207, 82%, 66%);
    }
    .icon-function{
      color: tan; // hsl(220, 14%, 66%);
    }
    // More than colors
    .icon-field{
      font-family: Cambria, times;
      font-size: 1.1em;
    }
    .icon-method{
      font-family: Verdana;
      font-style: italic;
    }
    .icon-function{
      // font-family: Consolas;
    }
  }

  // Class symbol is above li.list-item
  .icon-class{
    color: hsl(140, 80%, 45%);
    font-weight: bold;
    font-family: Cambria, times;
    font-size: 1.2em;
    font-style: italic;
  }


  // FIX: No need to have this margin.
  .list-tree.has-collapsable-children li.list-item{
    margin-left: 0;
  }


  // Highlight hovered and selected elements
  li.list-item.selected::before{
    display: none;
  }
  li.list-item:hover{
    background-color: hsl(220, 14%, 20%);
  }
  li.list-item.selected{
    background-color: hsl(220, 14%, 25%);
  }

  // A traditional way to highlight a hovered element
  li.list-item:hover>span{
    text-decoration: underline;
  }

  // Another way to highlight a hovered element
  // Uncomment the below if you like.
  // padding-left START
  // li.list-item{
  //   padding-left: .2em;
  // }
  // li.list-item:hover, li.list-item.selected{
  //   padding-left: 0;
  // }
  // .list-tree.has-collapsable-children .list-nested-item > .list-tree > li{
  //   padding-left: 1.2em;
  // }
  // .list-tree.has-collapsable-children .list-nested-item > .list-tree > li.list-item:hover, .list-tree.has-collapsable-children .list-nested-item > .list-tree > li.list-item.selected{
  //   padding-left: 1em;
  // }
  // padding-left END

}


html /deep/ .lcov-covered {
  .lcov-gutter(none);
}

.linter-highlight {
//  background-color: yellow;
}

cool thanks for the rticle its been very helpful!. I appreciate it!