コンテンツにスキップ

フロントエンドのカスタム配色¶

本記事では、サービス設定を変更してフロントエンドに異なる配色を適用する方法を説明します。

ConfigMap の設定¶

以下の内容を theme.css ファイルとして保存します。

/* 以下はデフォルト設定を上書きする変数です */
:root {
  /* ボタン メインカラー */
  --gc-primary-color: #1770e6;
  --gc-primary-color-hover: #4d7ee6;

  /* タグ（ホスト詳細など） */
  --gc-subprimary-color: #76b1ea;
  --gc-subprimary-color-hover: #549adf;

  /* 警告 メインカラー（メニューのアクティブ状態など） */
  --gc-warning-color: #1770e6;
  --gc-warning-color-hover: #1770e6;

  /* error ボタン、および重要な操作のメインカラー */
  --gc-error-color: #e64545;
  --gc-error-color-hover: #f46359;
  --gc-success-color: #4ac473;

  /* エクスプローラー、ステータスフィールドのメインカラー */
  --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;

  /* ヒートマップ、トポロジービュー ステータスフィールドのメインカラー */
  --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;

  /* リンク、Aタグ ステータスフィールドのメインカラー */
  --gc-link-color: #1770e6;
  --gc-link-hover-color: #3873ef;
  --gc-link-active-color: #1770e6;
  --gc-link-normal-color: #777;
}
/* デフォルトテーマの色設定 */
html.light {
  --gc-color-background: #fff;
  --gc-disabled-color: #c0c4cc;
  --gc-color-text: rgba(28, 43, 52, 0.98);
  /* 左側ナビゲーションの背景色 */
  --gc-leftmenu-background: #2c2f39;
  /* 左側ナビゲーションのフォント色 */
  --gc-leftmenu-color: rgba(255, 255, 255, 0.6);
  /* 左側ナビゲーションのホバー時、または選択時の背景色 */
  --gc-leftmenu-active-background: #21262d;
  /* メニュー選択時の効果背景 */
  --gc-list-item-active-background: #e9effe;
}
/* ダークテーマの色設定 */
html.dark {
  --gc-color-background: #101319;
  --gc-disabled-color: #52515c;
  --gc-color-text: hsla(0, 0%, 100%, 0.76);
  /* 左側ナビゲーションの背景色 */
  --gc-leftmenu-background: #161b22;
  /* 左側ナビゲーションのフォント色 */
  --gc-leftmenu-color: hsla(0, 0%, 100%, 0.5);
  /* 左側ナビゲーションのホバー時、または選択時の背景色 */
  --gc-leftmenu-active-background: #21262d;
  /* メニュー選択時の効果背景 */
  --gc-list-item-active-background: #0e1935;
}

次のコマンドを実行して ConfigMap を作成します。

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

ConfigMap の使用¶

以下のコマンドで ConfigMap を使用します。

kubectl -n forethought-webclient edit deploy front-webclient

指示に従って内容を追加します。

        ...
        volumeMounts:
        - mountPath: /etc/nginx/conf.d
          name: front-nginx-config
        - mountPath: /config/cloudcare-forethought-webclient/deployConfig.js
          name: front-web-config
          subPath: config.js
        # 以下を追加
        - 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
      # 以下を追加
      - configMap:
          defaultMode: 420
          name: front-customize-color-config
          optional: false
        name: front-customize-color-config

アプリケーションの再起動¶

アプリケーションを再起動して設定を反映させます。

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