Space between color marker and code

[matteioo]

Hi guys, is there a way to change the space between the color marker and the code. Thanks a lot 👍

[DallasO]

I think I understand what you're asking.

You can add custom CSS to your Atom stylesheet (Edit -> Stylesheet...):

// This grabs the # for HEX
atom-text-editor .syntax--punctuation .pigments-native-background {
  padding: 2px 0 2px 2px;
}
// This grabs the HEX
atom-text-editor .pigments-native-background {
  padding: 2px 2px 2px 0;
}

This snippet is for Hex colors, since that's what I use most often (eg, #e3e3e3).

But you can use the Inspect Tool to craft some CSS for rgb, etc. Ctrl+Shift+i to open, use the Select tool on the top left of this new window, click a pigment marker, customize the CSS above to the specific class names. (First, make sure the cursor is on a different line in the editor, or the marker disappears)

Edit: Just opened the Pigments settings and realized there are different Marker Types :man_facepalming:. So you'll have to change the selector .pigments-native-background to which ever marker type you're using.