Style to make Atom’s tab character a wide line like Sublime Text and to only show invisibles on document highlight and on the current line.

atom-invisibles-override.less

@import "syntax-variables";

atom-text-editor::shadow {
	// Make invisible characters the same color as the background, and
	// explicitly set the box-shadow color for indent guides (otherwise they
	// will be invisible too).
	.invisible-character {
		color: @syntax-background-color;

		&.indent-guide {
			box-shadow: inset 1px 0 @syntax-invisible-character-color;
		}
	}

	// Draw hard tabs as a full-width line like in Sublime Text.
	// Make sure to change the "Invisibles Tab" setting to " ", otherwise both
	// will be visible.
	.hard-tab {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			height: 1px;
			left: 1px;
			right: 2px;
			top: 50%;
		}
	}

	// Show invisibles on the line with the cursor and on all lines when there
	// is a selection. Unfortunately, due to the way Atom handles selections,
	// there is no way to show invisibles only within the selected text.
	.cursor-line,
	.has-selection {
		.invisible-character {
			color: @syntax-invisible-character-color;
		}

		.hard-tab::after {
			background: @syntax-invisible-character-color;
		}
	}
}