Colors

Colors

In some cases, we might need to add a new color and color theme to our application based on our client's requests or company standard colors and themes.

In domino-ui a color is a set of Java classes and CSS assets and writing those manually can be a little bit time consuming and error-prone.

So, in order to make such a task easier domino-ui introduces an annotation processor to generate those classes and CSS assets for you, to generate those files, you will simply create a package-info class and annotate the package with @ColorSet in which you can specify one or more @ColorInfo, in the ColorInfo you specify the color name and the color hex value, the system will generate all color shades variations for you but even that can be overridden for each specific shade using the @ColorShadesannotation nested within the@ColorInfo` annotation.

But before we start you need to add the following dependency to your application

    <dependency>
      <groupId>org.dominokit</groupId>
      <artifactId>theme-processor</artifactId>
      <version>${domino.ui.version}</version>
      <scope>provided</scope>
    </dependency>

Examples

@ColorsSet({
        @ColorInfo(name="custom-red", hex="#c05c5c"),
        @ColorInfo(name="custom-green", hex="#5ec05c"),
})
package org.dominokit.samples;

import org.dominokit.domino.ui.ColorInfo;
import org.dominokit.domino.ui.ColorsSet;

This will result in generating the AppColor interface which will have reference to the 2 generated colors and all the shades, also AppColorScheme interface which contains the ColorSchemes for both colors, also a theme-custom-red.css and theme-cutom-green.css will be generated, also app-color.css will be generated to apply style for all domino-ui components with the new colors.

The generated content will also include an optional HTML page to demo those colors.

For more info about the annotations parameters please the java docs on those annotation to see how you can tweak the generated content.

Once the classes are generated, you can use them in the code, e.g AppColor.CUSTOM_RED and you can link the generated css resources in your HTML page.

Find the complete sample here : Color generation demo