Skip to content

Instantly share code, notes, and snippets.

@anthonny
Last active December 18, 2022 02:26
Show Gist options
  • Save anthonny/9b2b93a5a90a0a10afd5c108972e4fd2 to your computer and use it in GitHub Desktop.
Save anthonny/9b2b93a5a90a0a10afd5c108972e4fd2 to your computer and use it in GitHub Desktop.
Atom Rainbow Indent
/*
* 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));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment