Theme not working

[Razgort]

Hello guys Following your guidelines, i run the command npm run build-themes with material.blue.light in metadata.json but nothing is generated. I attached my package json tsconfig and

[Razgort]

Ho sry cant attach those file .... Here is my metadata { "items": [], "baseTheme": "material.blue.light", "assetsBasePath": "../../../node_modules/devextreme/dist/css/", "outputColorScheme": "base", "base": true }

and angular json

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "KmCore": { "root": "", "sourceRoot": "src", "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss", "skipTests": true }, "@schematics/angular:class": { "skipTests": true }, "@schematics/angular:directive": { "skipTests": true }, "@schematics/angular:guard": { "skipTests": true }, "@schematics/angular:module": { "skipTests": true }, "@schematics/angular:pipe": { "skipTests": true }, "@schematics/angular:service": { "skipTests": true } }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", "progress": true, "polyfills": "src/polyfills.ts", "assets": [ "src/assets" ], "styles": [ "node_modules/devextreme/dist/css/dx.common.css", "src/themes/generated/theme.base.css", "src/themes/generated/theme.additional.css", "src/dx-styles.scss", "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss", "node_modules/angular-bootstrap-md/scss/mdb-free.scss" ], "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/hammerjs/hammer.min.js" ] }, "configurations": { "production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "KmCore:build" }, "configurations": { "production": { "browserTarget": "KmCore:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "KmCore:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "karmaConfig": "./karma.conf.js", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/hammerjs/hammer.min.js" ], "styles": [ "node_modules/devextreme/dist/css/dx.common.css", "src/themes/generated/theme.base.css", "src/themes/generated/theme.additional.css", "src/dx-styles.scss", "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss", "node_modules/angular-bootstrap-md/scss/mdb-free.scss" ], "assets": [ "src/assets" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "/node_modules/" ] } } } }, "KmCore-e2e": { "root": "e2e", "sourceRoot": "e2e", "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "./protractor.conf.js", "devServerTarget": "KmCore:serve" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "e2e/tsconfig.e2e.json" ], "exclude": [ "/node_modules/" ] } } } } }, "defaultProject": "KmCore", "schematics": { "@schematics/angular:component": { "prefix": "app", "styleext": "css" }, "@schematics/angular:directive": { "prefix": "app" } } }

[Razgort]

And for the tsconfig.json { "compileOnSave": false, "compilerOptions": { "paths": { "jszip": [
"../node_modules/jszip/dist/jszip.min.js"
],
"globalize": [ "../node_modules/globalize/dist/globalize" ], "globalize/": [ "../node_modules/globalize/dist/globalize/" ], "cldr": [ "../node_modules/cldrjs/dist/cldr" ], "cldr/": [ "../node_modules/cldrjs/dist/cldr/" ],

},
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
  "node_modules/@types",
  "jquery"
],
"lib": [
  "es2017",
  "dom"
],
"module": "es2015",
"baseUrl": "./"

},

}

and the tsconfig.app.json

{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "module": "es2015", "types": [] }, "exclude": [ "test.ts", "*/.spec.ts" ] }

[NickMitrokhin]

Hi,

The "npm run build-themes" command rebuilds themes based on the metadata.base.json and metadata.additional.json files in the src\themes folder. See Change Theme.

If you wish to build a custom theme based on your JSON file, use the following command:

devextreme build-theme --input-file="<yourFolder>/mymetadata.json"

See also: Theme Builder - Global package usage Theme Builder - One-off usage