사용자 정의 프론트엔드 색상 구성¶

/* 다음 구성은 기본 변수를 덮어씁니다 */
:root {
  /* 버튼 주 색상 */
  --gc-primary-color: #1770e6;
  --gc-primary-color-hover: #4d7ee6;

  /* 태그(예: 호스트 상세 내) */
  --gc-subprimary-color: #76b1ea;
  --gc-subprimary-color-hover: #549adf;

  /* 알림 주 색상(예: 메뉴 active) */
  --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);
  /* 왼쪽 탐색 메뉴 hover 또는 선택 시 배경색 */
  --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);
  /* 왼쪽 탐색 메뉴 hover 또는 선택 시 배경색 */
  --gc-leftmenu-active-background: #21262d;
  /* 메뉴 선택 효과 배경 */
  --gc-list-item-active-background: #0e1935;
}

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

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