cssdevextremedevextreme-angular

How to use a self defined color palette for DevExtreme-Components?


I'm in a project which uses DevExtreme for Angular. We use a metadata json light.json which creates the css-file light.css for the whole project's styling (this is done via the command npx devextreme build). Inside of light.json we define the value base-accent to have a certain value.

What I would like to do now is set base-accent to the value of a certain alias - e. g. $cobalt-p293: rgb(0 70 173) - defined in another css-file variables.colors.scss.

Is this doable? If so, how can I archive this? Or is there a better approach to use an alias defined color palette for the project wide styling (so maybe without using metadata json light.json or using it only at the very beginning of the project and then editing the generated files manually)?

Additional information: In future I might want to set the color more detailed, e. g. all DevExtreme-Buttons to a certain color and maybe even the button's states to manually defined colors (so e.g. I want to set the color for the key button-default-selected-bg to the alias primatry-color-600). But that's optional.

light.json:

{
"items": [
    {
        "key": "$base-accent",
        "value": "rgba(218, 0, 208, 1)"
    },
    ...
    ...
    ...
],
"baseTheme": "material.blue.light",
"base": false,
"makeSwatch": false,
"removeExternalResources": true,
"widgets": [],
"outputColorScheme": "light",
"version": "23.2.7"
}

devextreme.json:

{
"applicationEngine": "angular",
"build": {
    "commands": [
        {
            "command": "build-theme",
            "options": {
                "inputFile": "src/themes/metadata/light.json",
                "outputFile": "src/themes/css/light.css"
            }
        },

Solution

  • According to this answer from DevExtreme support, it is not possible to import a color palette defined in CSS directly. Instead, you need to follow the DevExtreme approach and use JSON as a starting point.