Skip to main content

🎨 extjs-theme-material

Theme containing the material theme for conjoon.

Use this theme, if you...​

  • are looking for a modern material theme with exposed css variables and light- / dark-mode options.

Installation​

info

This theme is automatically installed with conjoon.

$ npm i @conjoon/extjs-theme-material

If you want to develop with this package, run the build:dev-script:

$ npm run build:dev

Testing environment will then be available via

$ npm test

Configuring Sencha Ext JS​

Make sure your ExtJS workspace.json is properly configured to look up local repositories in the node_modules-directory.

workspace.json
{
  "packages": {
    "dir": "${workspace.dir}/node_modules/@l8js,${workspace.dir}/node_modules/@conjoon,...",
    "extract": "${workspace.dir}/packages/remote"
  }
}

Configure app.json to make sure the theme is used:

{
    "builds": {
        "desktop": {
            "toolkit": "classic",
            "theme": "extjs-theme-material",
            "sass": ...
        }
    }
}
Auto-registering as a Theme

This theme automatically registers itself by setting the following global properties:

Ext.theme.is["coon-js-theme"] = true;
Ext.theme.name = "extjs-theme-material";

This is to identify itself later on for proper inclusion in the used environment.

There is a override in the init.js-file defined that makes sure that the class is made available to applications.

Configuration​

extjs-theme-material is a coon.js package and is tagged as such in the package.json:

{
  "coon-js": {
    "package": {
      "config" : "${package.resourcePath}/extjs-theme-material.conf.json"
    }
  }
}

By default, this package's configuration can be found in this package's resources folder in a file named extjs-theme-material.conf.json.

What goes into an extjs-theme-material configuration?​

conjoon.conf.json

The following can be applied directly to conjoon.conf.json. Refer to the configuration guide!

The following options can be configured to change the appearance of conjoon:

{
    "modes": {
        "dark": {
            "name": "Dark Mode",
            "default": true,
            "config": {
                "dark-mode": "true",
                "accent-color": "#35baf6",
                "disabled-color": "rgba(105, 105, 105, 0.38)",
                "accent-foreground-color": "#6b6b6b",
                "base-color": "#35baf6",
                "overlay-color": "rgba(0, 0 , 0, .6)",
                "color": "#d6d6d6",
                "selected-background-color": "#3e4953",
                "base-dark-color": "#3e4953"
            }
        },
        "light": {
            "name": "Light Mode",
            "default": false,
            "config": {
                "dark-mode": "false",
                "accent-color": "#35baf6",
                "accent-foreground-color": "#333333",
                "base-color": "#35baf6",
                "overlay-color": "rgba(0, 0 , 0, .5)",
                "color": "#484848"
            }
        }
    }
}
note

The following uses dot-notation for the field-names!

modes.dark.name​

  • Type: String

The display name of the dark theme mode.

modes.dark.default​

  • Type: Bool

If the dark mode should be used as default.

modes.dark.config​

  • Type: Object CSS Variables configuration.
caution

Variables edited here need to be existing in the theme's SASS-files.

modes.light.name​

  • Type: String

The display name of the light theme mode.

modes.light.default​

  • Type: Bool

If the light mode should be used as default.

modes.light.config​

  • Type: Object

CSS Variables configuration.

caution

Variables edited here need to be existing in the theme's SASS-files.

Plugins​

extjs-theme-material provides theme-internal-modeswitch.