github.com/argoproj/argo-cd@v1.8.7/docs/operator-manual/custom-styles.md (about)

     1  # Custom Styles
     2  
     3  Argo CD has imports the majority of its UI stylesheets from the [argo-ui](https://github.com/argoproj/argo-ui) project.
     4  Sometimes, it may be desired to customize certain components of the UI for branding purposes or to
     5  help distinguish between multiple instances of Argo CD running in different environments.
     6  
     7  Such custom styling can be applied either by supplying a URL to a remotely hosted CSS file, or by 
     8  loading a CSS file directly onto the argocd-server container.  Both mechanisms are driven by modifying
     9  the argocd-cm configMap.
    10  
    11  ## Adding Styles Via Remote URL
    12  
    13  The first method simply requires the addition of the remote URL to the argocd-cm configMap:
    14  
    15  ### argocd-cm
    16  ```yaml
    17  ---
    18  apiVersion: v1
    19  kind: ConfigMap
    20  metadata:
    21    ...
    22    name: argocd-cm
    23  data:
    24    ui.cssurl: "https://www.myhost.com/my-styles.css"
    25  ```
    26  
    27  ## Adding Styles Via Volume Mounts
    28  
    29  The second method requires mounting the CSS file directly onto the argocd-server container and then
    30  providing the argocd-cm with the properly configured path to that file.  In the following example,
    31  the CSS file is actually defined inside of a separate configMap (the same effect could be achieved
    32  by generating or downloading a CSS file in an initContainer):
    33  
    34  ### argocd-cm
    35  ```yaml
    36  ---
    37  apiVersion: v1
    38  kind: ConfigMap
    39  metadata:
    40    ...
    41    name: argocd-cm
    42  data:
    43    ui.cssurl: "./custom/my-styles.css"
    44  ```
    45  
    46  Note that the `cssurl` should be specified relative to the "/shared/app" directory; 
    47  not as an absolute path.
    48  
    49  ### argocd-styles-cm
    50  ```yaml
    51  ---
    52  apiVersion: v1
    53  kind: ConfigMap
    54  metadata:
    55    ...
    56    name: argocd-styles-cm
    57  data:
    58    my-styles.css: |
    59      .nav-bar {
    60        background: linear-gradient(to bottom, #999, #777, #333, #222, #111);
    61      }
    62  ```
    63  
    64  ### argocd-server
    65  ```yaml
    66  ---
    67  apiVersion: apps/v1
    68  kind: Deployment
    69  metadata:
    70    name: argocd-server
    71    ...
    72  spec:
    73    template:
    74      ...
    75      spec:
    76        containers:
    77        - command:
    78          ...
    79          volumeMounts:
    80          ...
    81          - mountPath: /shared/app/custom
    82            name: styles
    83        ...
    84        volumes:
    85        ...
    86        - configMap:
    87            name: argocd-styles-cm
    88          name: styles
    89  ```
    90  
    91  Note that the CSS file should be mounted within a subdirectory of the existing "/shared/app" directory
    92  (e.g. "/shared/app/custom").  Otherwise, the file will likely fail to be imported by the browser with an
    93  "incorrect MIME type" error.
    94  
    95  ## Developing Style Overlays
    96  The styles specified in the injected CSS file should be specific to components and classes defined in [argo-ui](https://github.com/argoproj/argo-ui).
    97  It is recommended to test out the styles you wish to apply first by making use of your browser's built-in developer tools.  For a more full-featured
    98  experience, you may wish to build a separate project using the [Argo CD UI dev server](https://webpack.js.org/configuration/dev-server/).