Hello @JCarlosF!
There's no support to customize colors of the docked summary component through configuration directives.
But using CSS rules you can select its DOM sub-components and restyle only and only the docked summary row.
For instance in the example you pointed, see two custom CSS styles starting with .grid-row-summary? Just duplicate them and prepend .x-docked-summary to the CSS rule. These rules will affect the docked summary but won't hit the individual groups' summary rows inside the grid.
To understand why this works, just load the example and open browser's developer tools and inspect page DOM down to the summary row. You can just right-click anywhere within the summary row and click "inspect" so that developer tools opens with their respective DOM element highlighted. If you compare that row to other summary rows in the DOM, this is the only one "wrapped" by a div assigned to the x-docked-summary CSS class.
For instance if you wanted to style just the locked part/columns of that row, you could also add .x-grid-inner-locked CSS rule to limit even more what gets the custom styles (the other part of the grid is wrapped by .x-grid-inner-normal). This is not really an Ext.NET or Ext JS trait, this is simply pure CSS override given the various CSS classes every components and components-of-components get. You can do similar things even to the same components if you give them specific Cls="myCssClass" specifications.
Hope this helps! Understanding this concept might help you custom-style your pages in the long run, so might be worth the read.
