I'm having some difficulty understanding the inheritance/override model I think. I'm creating a theme that's overriding the Luma theme which overrides the Base theme. For an example, I want to change the Header Background Color which is found in web/css/source/_module.less as @header__background-color. By default this is set to "false" in both Base and Luma so I copied the entire file into my theme directory and changed the variable to a custom color variable that was added to "_colors.less" (which I know is working based on some other changes using this color which are working) so now my file has a line
@header__background-color: @color-blue-dark;
(I have client-side compile turned on during testing) When I refresh the page, the header doesn't have a background color. I ended up having to add that line to my "_theme.less" for it to work.
Another example, I want to change the border color for ".page-header .panel.wrapper", inside "_module.less" is
...
.panel.wrapper {
border-bottom: 1px solid @secondary__color;
}
...Which I changed to
...
.panel.wrapper {
border-bottom: 1px solid @header-panel__background-color;
}
...Which is already defined at the top of the default file, so I just changed the variable value to one of my custom colors. It doesn't work. Again, I had to define that variable in the "_theme.less" for it to work.
Now I'm trying to change the background color of the navigation container which is inside "web/css/source/module/_collapsible_navigation.less", but like before if I change the value in that file nothing happens. This time however, adding a line to the "_theme.less" doesn't do anything either.
I don't understand.. I should mention all changes I'm making are to files in my custom theme directory by first copying the contents of the default theme file then customizing->uploading. I've placed all the custom files in "web/css/source" (_variables.less, _theme.less, _module.less, lib/_colors.less, module/_collapsible_navigation.less).
