Skip to main content

Prop and Name Color

tip

Check here to see how to set a default theme

  • If a color is not provided, a prop's color will be set:
    • A dark color if a white theme is the default theme
    • A light color if a dark theme is the default theme
  • If the user chooses to change the theme, the prop's color will stay the same

Light Theme​

Dark Theme​

Setting prop color​

You can set a prop's color:

new GlobalConfigGenerator()
    .addProp((generator) => {
            generator.type('TABLE')
                .color('#F8B195')
                .addPosition((positionGenerator) => {
                positionGenerator.x(0).y(0)
            })
    })
    .addProp((generator) => {
        generator.type('TABLE')
            .color('#C06C84')
            .addPosition((positionGenerator) => {
                positionGenerator.x(150).y(0)
            })
    })
    .addProp((generator) => {
        generator.type('TABLE')
            .color('#6C5B7B')
            .addPosition((positionGenerator) => {
                positionGenerator.x(0).y(150)
            })
    })
    .addProp((generator) => {
        generator.type('TABLE')
            .color('#F67280')
            .addPosition((positionGenerator) => {
                positionGenerator.x(150).y(150)
            })
    })
    .addProp((generator) => {
        generator.type('TABLE')
            .color('#355C7D')
            .addPosition((positionGenerator) => {
                positionGenerator.x(75).y(75)
            })
    })

Setting name color​

  • By default, if name color is not provided, the prop's name color will be the same as the prop's color.

You can set the prop's name color:

new GlobalConfigGenerator()
    .addProp((generator) => {
            generator.type('TABLE')
                .color('#F8B195')
                .nameColor('#525B88')
                .addPosition((positionGenerator) => {
                    positionGenerator.x(0).y(0)
                })
    })
    .addProp((generator) => {
        generator.type('TABLE')
            .color('#C06C84')
            .nameColor('#B6B049')
            .addPosition((positionGenerator) => {
                positionGenerator.x(150).y(0)
            })
    })
    .addProp((generator) => {
        generator.type('TABLE')
            .color('#6C5B7B')
            .nameColor('#B8293D')
            .addPosition((positionGenerator) => {
                positionGenerator.x(0).y(150)
            })
    })
    .addProp((generator) => {
        generator.type('TABLE')
            .color('#F67280')
            .nameColor('#035956')
            .addPosition((positionGenerator) => {
                positionGenerator.x(150).y(150)
            })
    })
    .addProp((generator) => {
        generator.type('TABLE')
            .color('#355C7D')
            .nameColor('#BFA8BB')
            .addPosition((positionGenerator) => {
                positionGenerator.x(75).y(75)
            })
    })