Atom Rainbow Indent

README.adoc

A cool rainbow without plugin

A very simple adaptation from this gist: https://gist.github.com/dendrochronology/c3df295805cc5d43a0f2

I just added a backgroundColor ;)

Thank to @dendrochronology

style.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
 */


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

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  .indent-guide {
    // default indent level color
    color: @defaultColor;

    // Start generating colors!
    // @num should be larger than and divisible by @steps.
    .generate-indents(@num:12; @steps: 6;);
  }
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
  // border-color: red;
}

// Default and base colors for indent guides
@indentColor: hsla(345, 80%, 20%, .3); // Manipulate this to make pretty
@defaultColor: hsla(1, 0%, 80%, 0.30); // Color for undefined indents

// Recursively generate alternating color bars for indent guides
//     @num: total number of colored rows (others will get @defaultColor)
//     @steps: how many steps of color. Repeat until @num is reached.
//     @i: index for recursive calls.
.generate-indents(@num: 1; @steps: 1; @i: 0) when (@i < @num) {
    @this_num: @i + 1; // @i counter is zero indexed, so kick it up
    @this_step: mod(@i, @steps) + 1; // @steps drives subdivison frequency
    @this_step_multiplier: mod(@i, @steps) / @steps; // for percentages
    @step_percent: percentage( 1 / (@num/@steps) );
    @this_step_percent: @this_step_multiplier * @step_percent;
    @num_groups: @num / @steps; // How many 'groups' will repeat
    @this_group: ceil( @this_num / @num * @steps ); // current group
    @this_group_multiplier: @this_group / @steps; //
    @this_group_percent: percentage(0.01);

    &:nth-child(@{this_num}) {
        @currentColor: fadein(
            spin( @indentColor, round(@this_step_multiplier * 360) ),
            @this_group_percent
        );
        color: @currentColor;
        background-color: @currentColor;
}
.generate-indents(@num:@num; @steps: @steps; @i:(@i + 1));
}