Version
Google Translate
Contributors Edit (4/13/2025)
Avatar

Angular UI: Theme Configurations

Theme packages no longer import styles as CSS modules as of VCP version 6.0. The following style settings need to be included to the angular.json file in order for theme packages to load styles.

Fermion X Lite

{
    "input": "node_modules/@verto/ngx-fermion-x.lite/assets/css/bootstrap-dim.css",
    "inject": false,
    "bundleName": "bootstrap-dim"
},
{
    "input": "node_modules/@verto/ngx-fermion-x.lite/assets/css/ng-bundle.css",
    "inject": false,
    "bundleName": "ng-bundle"
},
{
    "input": "node_modules/@verto/ngx-fermion-x.lite/assets/css/side-menu/layout-bundle.css",
    "inject": false,
    "bundleName": "layout-bundle"
},
{
    "input": "node_modules/@vcp/ng.theme.fermion-x/assets/css/vcp-bundle.css",
    "inject": false,
    "bundleName": "vcp-bundle"
},
{
    "input": "node_modules/@verto/ngx-fermion-x.lite/assets/css/bootstrap-dim.rtl.css",
    "inject": false,
    "bundleName": "bootstrap-dim.rtl"
},
{
    "input": "node_modules/@verto/ngx-fermion-x.lite/assets/css/ng-bundle.rtl.css",
    "inject": false,
    "bundleName": "ng-bundle.rtl"
},
{
    "input": "node_modules/@verto/ngx-fermion-x.lite/assets/css/side-menu/layout-bundle.rtl.css",
    "inject": false,
    "bundleName": "layout-bundle.rtl"
},
{
    "input": "node_modules/@vcp/ng.theme.fermion-x/assets/css/vcp-bundle.rtl.css",
    "inject": false,
    "bundleName": "vcp-bundle.rtl"
},
{
    "input":"node_modules/@verto/ngx-fermion-x.lite/assets/css/font-bundle.rtl.css",
    "inject":false,
    "bundleName":"font-bundle.rtl"
}
,{
    "input":"node_modules/@verto/ngx-fermion-x.lite/assets/css/font-bundle.css",
    "inject":false,
    "bundleName":"font-bundle"
},

Theme Basic

{
    "input": "node_modules/bootstrap/dist/css/bootstrap.rtl.min.css",
    "inject": false,
    "bundleName": "bootstrap-rtl.min"
},
{
    "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "inject": true,
    "bundleName": "bootstrap-ltr.min"
},

Fermion X commercial

If you want to use top-menu, You need to switch the following 2 side-menu imports to top-menu.

{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/dark.css",
    "inject": false,
    "bundleName": "dark"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/light.css",
    "inject": false,
    "bundleName": "light"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/dim.css",
    "inject": false,
    "bundleName": "dim"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/bootstrap-dim.css",
    "inject": false,
    "bundleName": "bootstrap-dim"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/bootstrap-dark.css",
    "inject": false,
    "bundleName": "bootstrap-dark"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/bootstrap-light.css",
    "inject": false,
    "bundleName": "bootstrap-light"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/ng-bundle.css",
    "inject": false,
    "bundleName": "ng-bundle"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/side-menu/layout-bundle.css",
    "inject": false,
    "bundleName": "layout-bundle"
},
{
    "input": "node_modules/@vertosoft/vcp.ng.theme.fermion-x/assets/css/vcp-bundle.css",
    "inject": false,
    "bundleName": "vcp-bundle"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/dark.rtl.css",
    "inject": false,
    "bundleName": "dark.rtl"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/light.rtl.css",
    "inject": false,
    "bundleName": "light.rtl"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/dim.rtl.css",
    "inject": false,
    "bundleName": "dim.rtl"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/bootstrap-dim.rtl.css",
    "inject": false,
    "bundleName": "bootstrap-dim.rtl"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/bootstrap-dark.rtl.css",
    "inject": false,
    "bundleName": "bootstrap-dark.rtl"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/bootstrap-light.rtl.css",
    "inject": false,
    "bundleName": "bootstrap-light.rtl"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/ng-bundle.rtl.css",
    "inject": false,
    "bundleName": "ng-bundle.rtl"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/side-menu/layout-bundle.rtl.css",
    "inject": false,
    "bundleName": "layout-bundle.rtl"
},
{
    "input": "node_modules/@vertosoft/vcp.ng.theme.fermion-x/assets/css/vcp-bundle.rtl.css",
    "inject": false,
    "bundleName": "vcp-bundle.rtl"
},        
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/font-bundle.css",
    "inject": false,
    "bundleName": "font-bundle"
},
{
    "input": "node_modules/@vertosoft/ngx-fermion-x/assets/css/font-bundle.rtl.css",
    "inject": false,
    "bundleName": "font-bundle.rtl"
},

Theme Fermion commercial

{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion1.min.css",
    "inject": false,
    "bundleName": "fermion1"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion2.min.css",
    "inject": false,
    "bundleName": "fermion2"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion3.min.css",
    "inject": false,
    "bundleName": "fermion3"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion4.min.css",
    "inject": false,
    "bundleName": "fermion4"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion5.min.css",
    "inject": false,
    "bundleName": "fermion5"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion6.min.css",
    "inject": false,
    "bundleName": "fermion6"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion1.rtl.min.css",
    "inject": false,
    "bundleName": "fermion1.rtl"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion2.rtl.min.css",
    "inject": false,
    "bundleName": "fermion2.rtl"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion3.rtl.min.css",
    "inject": false,
    "bundleName": "fermion3.rtl"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion4.rtl.min.css",
    "inject": false,
    "bundleName": "fermion4.rtl"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion5.rtl.min.css",
    "inject": false,
    "bundleName": "fermion5.rtl"
},
{
    "input": "node_modules/@verto/vcp.ng.theme.fermion/dist/global/styles/fermion6.rtl.min.css",
    "inject": false,
    "bundleName": "fermion6.rtl"
},
In this document