Results 1 to 2 of 2

Thread: Referencing theme variables in a custom theme

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    1

    Default Answered: Referencing theme variables in a custom theme

    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:

    Code:
    $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:

    Code:
    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
    Attached Files Attached Files

  2. 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.

  3. #2
    Sencha User Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    352
    Answers
    32

    Default

    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.
    Phil Guerrant
    Ext JS - Development Team

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •