[IGN-3425] Invert Barcode Color on theme change

Ignition
1

Hello there,

Is it possible to change the color or invert the color of Barcode component when user selects Dark theme?

2

As of right now, no - there is no way to change the barcode color. We use a third-party library to render the barcode data, but that library provided no way to change the color when we implemented it. I’ve opened an internal ticket to see if the library has updated to allow for specifying a color.

3

Hi @Gaurav.Shitole,

Depending on how badly you need this, I figured out how to do this. It requires custom CSS, though.

Steps:

  1. Add a Barcode component to a view (assuming you already have one).

  2. Set backgroundColor: black; (or whatever you want the background to be).

    image
    image1149×389 24.1 KB

  3. Add a style class to the Barcode component (you can see in the snip above that I called it invertBarcodeTheme; what you call it is important, as we’ll use it in the next step).

  4. Navigate to the Ignition themes directory (if you’re on Windows, it will likely be C:/Program Files/Inductive Automation/Ignition/data/modules/com.inductiveautomation.perspective/themes).

  5. Create a folder called custom inside /themes and add a file called style.css. You’ll likely be prompted for administrative permissions to save in this location.

  6. Open the file of the theme you want to style. For instance, if you’re on the light theme and you want to invert the colors of the barcode when you’re on the dark theme, open dark.css in /themes. Add this line to the end of the file:

    @import "./dark/index.css";        /* only line here by default */
@import "./custom/style.css";      /* importing our custom CSS file here */

  7. Open /themes/custom/style.css and add this CSS code in there:

    .psc-invertBarcodeTheme canvas {
    filter: invert(1);
}

    The selector above finds any canvas components nested within an element with a style class of invertBarcodeTheme (in the designer - the psc- gets prepended on its own). If you want to reuse this for other barcodes, just add the same style class to those Barcode components as you did for this one.

    NOTE: If you want to style just one Barcode, add a domId on the Barcode component (click on Barcode → Meta → Add Meta Property → Properties → domId). Then add this CSS code in place of the above code:

    #<your_dom_id> canvas {     /* <your_dom_id>  is `domId` in the designer*/
    filter: invert(1);
}

    This will apply a similar style, but with an ID selector (even more specific than the class selector above). Any canvas element (which is what the Barcode is, essentially) that is a child of an element with the dom ID of <your_dom_id> will be inverted.

  8. To test this out, go to your session properties and change the theme to dark (if that’s the file you were styling).

This is for informational purposes only, so use with caution and at your own risk. With the selector we used, there shouldn’t be any unintended consequences, but try it out on a test system and let me know if something wasn’t clear.

3 Likes
4

Thanks for the update, looking forward for any standard way to do this.

5

You are the genius!!

It worked perfectly and this also cleared up some more custom css modifications to do. Thanks a lot!

1 Like
6

You should really be creating a new theme if you’re going to be adding custom styling instead of modifying the standard theme files.
All you need to do is to add a new css file into the themes folder and @import one of the standard styles within it.

E.g.
/themes/custom.css

@import "./dark.css";
@import "./custom/index.css";

/themes/custom/index.css

@import "./barcode.css";

/themes/custom/barcode.css

psc-invertBarcodeTheme canvas {
    filter: invert(1);
}
1 Like
7

There are many ways to do it, whether by creating a theme or just adding a single file. OP was asking how to do it for the Dark theme. I’m not sure what the best practice is in these situations.