Customizing a Theme


#1

Hey, this is my first post here so pardon me if I’ve posted this in the wrong place.
I am using the One Dark Syntax Theme and I would like to slightly customize it.

Example of what I want to do:

CSS style-sheet:

body {
    background-color: grey;
}

I would like “background-color”, or any other CSS property, to appear orange while keeping the same (One Dark) theme. How should I go about doing this?


#2

When I use editor:log-cursor-scope from the Command Palette (ctrl-shift-p), this is what I see:

To change the color, all you have to do is add this to your styles.less:

.syntax--property-name.syntax--css {
  color: orange;
}

#3

Hey @DamnedScholar, thank you for the input.
I tried your solution and added that bit of code at the end of my styles.less sheet. Unfortunately, I’ve restarted atom but it doesn’t seem to change anything.
Is there something else I’m meant to be doing?


#4

Try this:

.syntax--support.syntax--type.syntax--property-name.syntax--css{
  color: orange;
}

#5

It worked!
The former selector worked for other properties (like background-color, font-size etc.); just not the ‘color’ property but this code block did the trick. Thanks a lot!


#6

:+1:
… it was following @DamnedScholar’s directions that made it work.
Please consider :heart: his reply.


#7

Oh yeah, forgot liking was a thing here :sweat_smile:
Thanks a lot to both of you!


#8

Perhaps the theme you’re using has a higher-specificity rule than the one I posted, but lower than @danPadric’s suggestion.