Modifying icons to appear against a light background

You can change the color of icons in the sample extensions to ensure that they contrast sufficiently against the background color of your theme.

About this task

Many of the Cognos Analytics sample extensions contain icons that are designed to work with the default theme, IBM Carbon X, which has a dark background. However, if you apply a theme without a dark background, these icons become indiscernible.

Example

The extension SampleExtensionOpenDashboard_11_2.zip includes the icon dashboard.svg. It has a light color, hexadecimal color code #f4f4f4, as shown next to the Line dashboard option in the following diagram:

If you apply a theme in which the background is a light color, you can no longer see the icon:

To fix this issue, follow these steps:

Procedure

  1. Download the extension.
  2. Unzip the contents of the extension.
  3. Modify the color of the image(s) in the images folder and save the changes.
    For example, after you unzip the extension SampleExtensionOpenDashboard_11_2.zip, change the color of the icon from a light color (#F4F4F4) to a dark color (#161616):
    1. In the images folder, open the file dashboard.svg in a text editor.
    2. Replace this text:
      <style type="text/css"> .st0{fill:#F4F4F4;} .st1{fill:none;} </style>

      with this text:

      <style type="text/css"> .st0{fill:#161616;} .st1{fill:none;} </style>
    3. Save the file.
  4. Create a .zip file that contains all the files and folders.
  5. Upload the revised extension.

Results

The black icon is visible against the light background.

For more information, see these topics: