Edit the colors used by Atom Linter?


Where are these defined? Can I add my own color/opacity, or (better) re-define them in my Theme or Stylesheet?

Error highlighting difficult to see

Hi, I took a look at package code and if you take a look at its stylesheets, you can see that you can overrite some of styles in your stylesheet. For example for warnings:

.highlight {
  &.linter-warning .region {
    background-color: blue;



We should probably start expecting all package authors to document their relevant stylesheet information in the README of their packages. I’ve started doing so for my packages. For example in my soft-wrap-indicator package:


The soft wrap indicator can be styled using the following classes:

  • .soft-wrap-indicator - For styling all instances of the indicator
  • .soft-wrap-indicator.lit - For styling the indicator when lit


thanks. the existing Less code references variables I can’t find. I even searched the main Atom repo:

  .highlight {
  &.linter-warning .region {
    background: linear-gradient(
      to bottom,
      @background-color-warning 0%,
      fadeout(@background-color-warning, 70%) 20%,
      fadeout(@background-color-warning, 70%) 80%,
      @background-color-warning 100%);
      border-left: 2px solid @background-color-warning;
      border-right: 2px solid @background-color-warning;
    &.linter-error .region {
      background: linear-gradient(
        to bottom,
        @background-color-error 0%,
        fadeout(@background-color-error, 70%) 20%,
        fadeout(@background-color-error, 70%) 80%,
        @background-color-error 100%);
        border-left: 1px solid @background-color-error;
        border-right: 1px solid @background-color-error;

Where are they defined? They don’t throw errors.


In the ui-variables.less of the UI theme:



I couldn’t find that less file on github. only the one that says it’s incomplete and has only like 4 variables.

It would be nicer if the docs specified the hex colors used for these variables.

I have also yet to see a theme import this, fwiw.


This is just one example, because each theme is supposed to implement their own:


The colors are different depending on which UI theme you use, how is the documentation supposed to specify them?

I import the ui-variables.less in a few of my packages to ensure that any UI I provide in those packages matches the theme the user has chosen. This is what the ui-variables.less is for. For example:



Atom’s Solarized Dark syntax theme recently added custom coloring for the Linter package:

.editor, :host {
  .gutter {
    .line-number.linter-warning .icon-right:before {
      color: @syntax-color-modified;
    .line-number.linter-error .icon-right:before {
      color: @syntax-color-removed;

.editor, :host {
  .highlights {
    .linter-warning .region {
      border: 1px solid @syntax-color-modified;
      background-image: none;
      background-color: fade(saturate(@syntax-color-modified, 50%), 20%);
    .linter-error .region {
      border: 1px solid @syntax-color-removed;
      background-image: none;
      background-color: fade(saturate(@syntax-color-removed, 50%), 20%);

Solarized keeps its @syntax-*-color variables in syntax-variables.less, but it’s the same concept as the ui-variables.less that @leedohm mentions.


Thanks. I’ve made a couple of themes, by converting tmThemes, copying other Atom themes, and using the ‘create theme’ command.

I was just commenting that none of those methods ever had an import of ui-variables, should they have?

Anyway, i have now been able to tone down the opacity of the linter highlighting, which was my goal. Thanks for the help.


can you give me a relevantly easy why of doing it myself? the thing is very annoying.


This thread is filled with instructions about the easy way to do it. What specifically do you need help with?