How can I customize the comment styles that come with Atom One Dark theme?

Question

I'm new to Atom and I was wondering if we could customize the comment styles that come with the One Dark Syntax Theme via the style.less (Atom > Stylesheet...) file. I looked up the source code for the theme and in the language.less file I found this:

.comment {
color: @mono-3;
font-style: italic;

.markup.link {
color: @mono-3;
  }
}

Specifically, I would like to change to font-style to normal but I can't seem to find a way, please help. Thanks.

In Notepad++, all I have to do is go to Settings > Style Configurator > Language > COMMENTLINE > Pick a color > Save. — Chloe
– Chloe, Commented Aug 3, 2018 at 18:26

Abdalla Arbab · Accepted Answer · 2017-06-26 13:01:33Z

9

You shouldn't use atom-text-editor::shadow any more

You should now use

atom-text-editor.editor .syntax--comment {
  font-style: normal;
}

edited Jun 26, 2017 at 13:01

answered May 9, 2017 at 15:10

Abdalla Arbab

1,4103 gold badges25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michelle Tilley · Accepted Answer · 2018-07-24 19:55:45Z

3

[Update]

Atom has changed and the accepted answer is now the one you should use!

[Old Answer]

The elements you're trying to target are inside the text editor element's shadow DOM; try

atom-text-editor::shadow .comment {
  font-style: normal;
}

edited Jul 24, 2018 at 19:55

answered May 29, 2016 at 23:34

Michelle Tilley

159k40 gold badges380 silver badges312 bronze badges

3 Comments

JS starter Over a year ago

Would you mind telling me how I can arrive at this answer?

Michelle Tilley Over a year ago

Some of it requires being familiar with the shadow DOM and how to style it. But there's a quick example under "Style Tweaks" in the Atom Flight Manual customization page.

Tabernero Over a year ago

Atom rules has been updated, and this one in particular has been replaced. atom-text-editor::shadow .comment -> atom-text-editor.editor .syntax--comment

Davaakhuu Erdenekhuu · Accepted Answer · 2018-01-02 06:44:40Z

0

Specifically, you would want to change your example to

.editor, atom-text-editor::shadow {
  .comment {
    font-style: normal;
  }
}

answered Jan 2, 2018 at 6:44

Davaakhuu Erdenekhuu

2463 silver badges6 bronze badges

Collectives™ on Stack Overflow

How can I customize the comment styles that come with Atom One Dark theme?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related