Skip to content

Custom Frontend Color Scheme

This article describes how to configure service settings to apply different color schemes to the frontend.

Configure ConfigMap

Save the following content as a theme.css file:

/* The following variables override the default configuration */
:root {
  /* Button primary color */
  --gc-primary-color: #1770e6;
  --gc-primary-color-hover: #4d7ee6;

  /* Tag (e.g., in host details) */
  --gc-subprimary-color: #76b1ea;
  --gc-subprimary-color-hover: #549adf;

  /* Warning color, e.g., active menu item */
  --gc-warning-color: #1770e6;
  --gc-warning-color-hover: #1770e6;

  /* Error button and important operations */
  --gc-error-color: #e64545;
  --gc-error-color-hover: #f46359;
  --gc-success-color: #4ac473;

  /* Explorer, status field colors */
  --gc-status-ok-color: #508371;
  --gc-status-error-color: #ff9500;
  --gc-status-critical-color: #e64545;
  --gc-status-info-color: #1770e6;
  --gc-status-warning-color: #ffd500;
  --gc-status-fail-color: #aaacb2;
  --gc-status-debug-color: #9666b9;
  --gc-status-alert-color: #ff9500;

  /* Hexbin map, topology status colors */
  --gc-level-0-color: #6ed08f;
  --gc-level-1-color: #508371;
  --gc-level-2-color: #ffd500;
  --gc-level-3-color: #ff9500;
  --gc-level-4-color: #e64545;

  /* Link (A tag) status colors */
  --gc-link-color: #1770e6;
  --gc-link-hover-color: #3873ef;
  --gc-link-active-color: #1770e6;
  --gc-link-normal-color: #777;
}
/* Default (light) theme color configuration */
html.light {
  --gc-color-background: #fff;
  --gc-disabled-color: #c0c4cc;
  --gc-color-text: rgba(28, 43, 52, 0.98);
  /* Left navigation background color */
  --gc-leftmenu-background: #2c2f39;
  /* Left navigation font color */
  --gc-leftmenu-color: rgba(255, 255, 255, 0.6);
  /* Left navigation hover/selected background color */
  --gc-leftmenu-active-background: #21262d;
  /* Menu item active background */
  --gc-list-item-active-background: #e9effe;
}
/* Dark theme color configuration */
html.dark {
  --gc-color-background: #101319;
  --gc-disabled-color: #52515c;
  --gc-color-text: hsla(0, 0%, 100%, 0.76);
  /* Left navigation background color */
  --gc-leftmenu-background: #161b22;
  /* Left navigation font color */
  --gc-leftmenu-color: hsla(0, 0%, 100%, 0.5);
  /* Left navigation hover/selected background color */
  --gc-leftmenu-active-background: #21262d;
  /* Menu item active background */
  --gc-list-item-active-background: #0e1935;
}

Run the following command to create the ConfigMap:

kubectl -n forethought-webclient create cm front-customize-color-config --from-file=theme.css

Use ConfigMap

Use the following command to edit the deployment:

kubectl -n forethought-webclient edit deploy front-webclient

Add the following content as prompted:

        ...
        volumeMounts:
        - mountPath: /etc/nginx/conf.d
          name: front-nginx-config
        - mountPath: /config/cloudcare-forethought-webclient/deployConfig.js
          name: front-web-config
          subPath: config.js
        # Add the following
        - mountPath: /config/cloudcare-forethought-webclient/theme/theme.css
          name: front-customize-color-config
          subPath: theme.css
        ...
        ...
      volumes:
      - configMap:
          defaultMode: 420
          name: front-web-config
          optional: false
        name: front-web-config
      - configMap:
          defaultMode: 420
          name: front-nginx-config
          optional: false
        name: front-nginx-config
      # Add the following
      - configMap:
          defaultMode: 420
          name: front-customize-color-config
          optional: false
        name: front-customize-color-config

Restart the Application

Restart the application to apply the configuration:

kubectl -n forethought-webclient rollout restart deploy front-webclient

Feedback

Is this page helpful?