テーマの変更

テーマは、アプリケーション全体のデザインのことを指します。

テーマの設定

app.jsonの↓にあるthemeプロパティで使用するテーマを設定します。

"builds": {
    "classic": {
        "toolkit": "classic",
        
        "theme": "theme-triton",
        
        "sass": {
            "generated": {
                "var": "classic/sass/save.scss",
                "src": "classic/sass/save"
            }
        }
    },

    "modern": {
        "toolkit": "modern",
        
        "theme": "theme-triton",
        
        "sass": {
            "generated": {
                "var": "modern/sass/save.scss",
                "src": "modern/sass/save"
            }
        }
    }
}

予め、ExtJS標準でいくつかのテーマが用意されており、theme-tritonはその一つです。extディレクトリのclassic、modernにあるthemeで始まるディレクトリがテーマ用のパッケージです。

ちなみにmodernのおすすめはtheme-materialです。マテリアルデザインになり、https://material.io/icons/のアイコンが使えるようになります。

ベースカラーの変更

↓は自動生成したアプリケーションの初期画面です。この中の青色部分はベースカラーとして設定されており、sass変数base-colorを自分で定義することで変更できます。

一番簡単に設定するのであれば、アプリケーション直下にあるsassディレクトリのvar/all.scssに設定できます。

$enable-font-awesome: dynamic(true);

$base-color: #E57373;  // <-- 追記

すると↓のように、反映されます。

sass変数で指定できるスタイルはAPIドキュメントで分かるので、いろいろ試してみたら良いと思います。

classicだけとかmodernだけに適用させたいグローバルなsass変数がある場合は、例えばclassic/sass/var/Application.scssを作成して、そこに定義すれば良いです。