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

hey could you put up a screenshot to give people an idea of what this looks like? the google presence of this link is high

Hi...

I'm not really tweaking the main theme so much as:

1. Adjusting the appearance of the tab bar, esp. IIRC, in conjunction with pinned tabs, e.g., to get rounded tabs there.
2. Tweaking JSON highlighting
3. Ensuring ES6 templates are monospace
4. Tweaking highlighting of JS regex coloring of parentheses or groups
5. Tweaking Symbols Tree View, e.g., distinctive colors for each symbol type
6. Tweaking gutter view for lcov coverage appearance

TBH, I couldn't tell you the extent to which all of these are still necessary, or even whether they still apply (though I at least doubt they should be causing any major problems, as I haven't noticed any).

I can give a screenshot of a particular feature of interest, but a single screenshot of my general One Dark theme shouldn't look much different, esp. since I normally don't use Symbols Tree View.

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