search

atom-material / atom-material-ui

A dynamic UI theme for Atom that follows Google's Material Design Guidelines
MIT License
817 stars 204 forks source link

styles/custom.less is overwritten #272

Closed monkpit closed 8 years ago

monkpit commented 8 years ago

I wanted to tone down the yellow color for .status-modified in the treeview, so I override the coloring in my custom.less file.

li.status-modified {
    color: purple; //whatever color, purple just so it's obvious
}

When I do a reload of Atom, I notice a few things:

Oh, well clearly I have made a mistake with my CSS selector - it needs to be more specific than just li.status-modified so that it will be applying to files instead of the parent folder. Fair enough, I am not paying that much attention.

Open up ~/.atom/packages/atom-material-ui/styles/custom.less and... What's this? My customizations are gone!

Am I editing the wrong file?

I have noticed that if I inspect the generated <style> element for atom-material-ui via the developer console, my changes do show up the first time.

HOWEVER, the order of the rules is mangled so that the custom.less rules do not get applied at the end, which means they do not take priority over the default values unless they are marked !important.

I can create a separate issue for that part, if needed.

Am I just doing this all completely wrong? (I kinda hope so!)

silvestreh commented 8 years ago

@monkpit yep, you're doing it wrong :smile:. The custom.less is an internal stylesheet where I override the theme's color variables based on your settings. This file is generated every single time you start or reload Atom, that's why your changes won't persist.

The place for your own custom styles is in the user stylesheet located in ~/.atom/styles.less.

~ means your home directory and varies depending on your OS: