Access to seperate css rules to have more precise styles

[benniemosher]

I was trying to update my theme that was just merged in, The One, and found a few css rules that I need access to and to be able to set them differently. I found the rules, but I am not sure how to add them to the project without breaking all the other themes. I have created PR #108 where I tried to override the rules in my theme's styling, but it does not seem to be taking effect. Is there another way to do this?

[micjamking]

Hi @benniemosher

I see what you mean. At this time, I don't think there's a way of exposing individual (but commonly shared) style rules outside of the styles @mixin called in each theme file.

However, each theme file itself is self-contained and therefore can have it's own unique style rule overrides at the bottom of the theme file, just as you have implemented.

The issue with your changes is specificity; the rules being created by the styles @mixin have a high specificity due to nesting AND !important sprinkled throughout, so you have to make sure your override rules have a stronger cascade. I was able to get the changes in your theme working by replicating the same nested structure I have inside app/styles/modules/_common-styles.scss at the bottom of the the-one.scss file.

.elements {
    ::shadow {
        .webkit-html-attribute-name {
            color: $base09 !important;
        }

        .webkit-html-attribute-value { 
            color: $base0B !important; 
        }

        .elements-disclosure li.selected .selection,
        .elements-disclosure ol:focus li.selected .selection {
            background-color: $base03 !important;
        }
    }

    .style-properties .webkit-css-property,
    ::shadow .tree-outline .webkit-css-property { 
        color: $base07 !important; 
    }

    .style-properties .value,
    ::shadow .tree-outline .value { 
        color: $base09 !important; 
    }
} 

Let me know once you've completed making your changes, and then I'll merge it in and push out the update. Thanks again for all your contributions!

[micjamking]

I think this issue can be closed, however I've updated the README.md to include instructions for creating custom adjustments in individual themes, and am referring to this issue.
✌️