Wrapguide color [Solved]


#1

I am trying to modifying wrap guide color but it dosen’t seems to do anything

    atom-text-editor, :host {
    
      .wrap-guide {
        // color: fade(@syntax-wrap-guide-color,10%);
        // box-shadow: 0px 0px @blur fade(@base0D,10%);
        color : red;
    
      }
}

#2

Try using !important.


#3

You’re not using the right selector nor the right CSS property, the following works in my user stylesheet:

atom-text-editor::shadow {
  .wrap-guide {
    background-color : red;
  }
}

#4

Ah, I didn’t realise the rule was actually wrong. I figured he had tested it in the debug tools first because that’s how I do it. I suppose everyone’s workflow is different. =P


#5

Thanks ,then background-color it is.

I am editing theme file, which set at color not background-color

this works

    atom-text-editor, :host {
    
      .wrap-guide {
        // color: fade(@syntax-wrap-guide-color,10%);
        // box-shadow: 0px 0px @blur fade(@base0D,10%);
        background-color : red;
    
      }
}

#6

i did that , i just can’t hit that wrap guide using inspector . it only selects underlying element.


#7

The wrap guide is actually rendered below the editor content, and as editor’s lines runs all the way to the right edge you can’t select it using the mouse, but it’s quite easy to select it as it lives in the same parent as the editor’s lines, just scroll the elements view to select it from here:

In that case I believe you don’t need the atom-text-editor selector, only the :host one as the syntax theme styles will be injected into the editor shadow root, but maybe I’m forgetting something here as I don’t really work on themes myself.


#8

Thanks , yeah , on the theme file i modifying ( Neon-Syntax) it uses

atom-text-editor, :host { }

as selector and color: property for line color. thats why its not working.

but using selector atom-text-editor, :host { } works file tho.