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

Can't customize using Atom's styles.less #325

Closed octoxan closed 7 years ago

octoxan commented 8 years ago

Can't customize using Atom's styles.less

Atom version: 1.11.0-beta4 OS and version: Windows 10

silvestreh commented 8 years ago

sounds like an issue with Atom

octoxan commented 8 years ago

That's what I was thinking at first as well, but in most other UI and Syntax themes I can go to File > Stylesheet and make for example the treeview background purple and it'll do it. None of the changes do anything in either of the Material themes though. Not sure why..

octoxan commented 8 years ago

Yep I just downloaded Aesthetic UI (oh wow its ridiculous, makes everything like Win 95), and any modifications to the built in Stylesheet are reflected immediately

silvestreh commented 8 years ago

I don't know exactly what you're trying to customize, but maybe I'm using some overly-specific CSS selectors. Have you tried !important flags?

octoxan commented 8 years ago

Hm, sorry !important flags do seem to fix it for Material UI. But if I try that for the Material syntax it doesn't work.

You have:

.punctuation.section.embedded,
.variable.interpolation {
    color: #F77669;
}

color might be different, I already changed mine in the package.

But if I put..

.punctuation.section.embedded,
.variable.interpolation {
    text-shadow: 0 0 3px #009dff !important;
    color: #fff600 !important;
}

It has no effect, and doesn't show up at all in dev tools... but for some reason it does for any other syntax theme... Hmmm

silvestreh commented 7 years ago

Hmmm… It's been a while and now that I take a second look it seems that you're trying to override the syntax theme's colors.

First off, this might be the wrong repository, but that's not important. If you want to override the syntax theme you should wrap all your selectors inside an atom-text-editor selector. Something like:

atom-text-editor {
    .syntax--entity.syntax--other.syntax--attribute-name {
        color: red;
    }
}