In order to use the Ext JS frontend framework properly, you will need to use the folder structure, as described by Sencha in the Theming Section of their API documentation. CoreMedia provides a blank package named Blueprint Studio Theme (or more precisely @coremedia-blueprint/studio-client.main.blueprint-studio-theme) which extends the Studio theme and should be used to define own skins and customize existing ones. Skins are written in a particular SASS dialect, compiled by Sencha's Fashion compiler, which offers most SCSS functionalities enriched by certain Sencha specific functions.

Figure 9.5. Theming Inheritance in Ext JS and CoreMedia

The Studio Theme is responsible for the default appearance of CoreMedia Studio. It extends the Triton Theme, provided by the Ext JS framework and offers certain variables and SCSS mixins. You can easily disable style rules, defined in the Studio Theme by setting the include variables for skins or custom components to false.

Note

The Studio Theme introduces many variables that are also used outside the theme in SCSS files for custom styling of particular components. CoreMedia recommends not changing the theming inheritance and extend from another theme than the Studio Theme, because those variables would not be initialized anymore. Also, all skins, introduced by the Studio Theme, would not be available, since the corresponding style rules would not be created anymore. The better way would be to still inherit from the Studio Theme, but disable undesired styles by setting the include variables to false.

In every package, there are different folders for SCSS files:

The Studio Theme slightly differs from this structure by introducing a forth folder:

These additional mixins enhance the Ext JS framework and broaden the possibilities to style certain components. They are introduced in the Studio Theme and work as extensions of the Sencha SCSS mixins, as explained in Section 9.16.2, “Studio Styling with Skins”. You can - and should - use them when creating new skins in the Blueprint Studio Theme. The include order of SCSS files from different folders is described in Organization of Generated Styles in the Sencha Ext JS API documentation.

The directory, in which the build tooling searches for SCSS files in the CoreMedia Workspace slightly differs from the path described in the Sencha API documentation. While the documentation states that the sass folder is in the root of the package our tooling requires using the sencha/sass folder.

Be aware that by default the sass namespace is generated. More precisely: if unset it will be the same as the normal namespace which - if unset - will be generated based on the npm package name. If you want to style components that are not part of your package (including the Ext JS base components), follow the advice at The Sass Namespace by setting the configuration in the package's jangaroo.config.js in the corresponding sencha entry, for example:

{
  ...
  sencha: {
    sass: {
      namespace: "",
    }
  }

If you also want to style the components contained in your own package you should explicitly define a namespace for your package:

{
  ...
  sencha: {
    namespace: "my.namespace",
    sass: {
      namespace: "",
    }
  }

In this example you would then put the styling of your own component MyButton located in src/buttons/MyButton in the subfolder my/namespace/buttons/MyButton.scss while styling, for example, the Ext JS Button components in Ext/button/Button.scss.

While the namespace of any third-party package can be found in the sencha.namespace entry of its package.json file (for example, node_modules/@jangaroo/ext-ts/package.json) for packages which are part of your workspace you need to check the dist/package.json instead. The dist folder is only available after building the package.

After adding or changing files in the Blueprint Studio Theme, you will need to rebuild the package and all apps using the theme. CoreMedia suggests using the start script (see Chapter 7, Developing with the Studio Client Workspace) which will automatically rebuild the CSS of all apps in the dependency hierarchy when triggered. To just watch and rebuild the SCSS for all apps use the following command:

cd global/studio
pnpm run start