PDA

View Full Version : Referencing theme variables in a custom theme



danjb
6 Jun 2014, 2:26 PM
I'm an ExtJS newbie, and trying to create a custom theme for an app. I was just experimenting with changing things in a custom theme when I hit an issue. I tried to set the toolbar text color to the base color of my theme, which currently is inherited from the Neptune theme using this line in my-custom-theme/sass/var/toolbar/Toolbar.scss:


$toolbar-text-color: $base-color !default;

I had assumed the $base-color variable used here would cause the base color of the parent theme to be used. Instead running app build caused this error:


error ThemeDemoApp-all.scss (Line 1 of ../../../../../packages/my-custom-theme/sass/var/toolbar/Toolbar.scss: Undefined variable: "$base-color".)

I can see that $base-color is given a value in the Neptune theme Component.scss file, and the package.json for my custom theme says "extend": "ext-theme-neptune" ... shouldn't I be able to use the $base-color variable? Or am I doing this theming incorrectly? I attached a debug log of my build, with the error above on line 27411

Phil Guerrant
10 Jun 2014, 7:54 AM
This is one of the shortcomings of SASS, due to the order in which the files are included. You'll have to redefine $base-color in your theme's Component.scss if you want to derive other variables from it.