In my current project using ExtJS 4.1.1a, I am working on creating a new theme for a "tabbedPane" and a normal Panel with an "Accordion" layout. However, I am facing difficulty in changing the color of the headers for both elements. I wish to customize the tabs and their background, as well as the header background and font color for the accordion panel. The current setup can be viewed at . My goal is to have black backgrounds with white text for the headers of both elements, with the active tab being a deep purple similar to the one used in the breadcrumb section of the navigation bar.
It's important to mention that I am trying to achieve this customization within ExtJS's SASS preprocessor, and any guidance on modifying this instead of dealing with CSS directly would be highly appreciated.