authentik/website/docs/customize/interfaces/_global/customcss.mdx

58 lines
1.2 KiB
Plaintext

### Custom CSS
To further modify the look of authentik, a custom CSS file can be created. Creating such a file is outside the scope of this document.
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
<Tabs
defaultValue="docker-compose"
values={[
{label: 'docker-compose', value: 'docker-compose'},
{label: 'Kubernetes', value: 'kubernetes'},
]}>
<TabItem value="docker-compose">
Create a `docker-compose.override.yml` file and add this block to mount the custom CSS file:
```yaml
services:
server:
volumes:
- ./my-css-file.css:/web/dist/custom.css
```
Afterwards, run the upgrade commands from the latest release notes.
</TabItem>
<TabItem value="kubernetes">
Create a ConfigMap with your css file:
```yaml
apiVersion: v1
kind: ConfigMap
metadata:
name: authentik-custom-css
namespace: authentik
data:
custom.css: |
...
```
Then, in the helm chart add this to your `values.yaml` file:
```yaml
volumes:
- name: custom-css
configMap:
name: authentik-custom-css
volumeMounts:
- name: custom-css
mountPath: /web/dist/custom.css
subPath: custom.css
```
Afterwards, run the upgrade commands from the latest release notes.
</TabItem>
</Tabs>