diff --git a/docs/docs/documentation/getting-started/installation/backend-config.md b/docs/docs/documentation/getting-started/installation/backend-config.md index 98f01fc3e..233c67510 100644 --- a/docs/docs/documentation/getting-started/installation/backend-config.md +++ b/docs/docs/documentation/getting-started/installation/backend-config.md @@ -145,22 +145,95 @@ Setting the following environmental variables will change the theme of the front If using YAML sequence syntax, don't include any quotes:
`THEME_LIGHT_PRIMARY=#E58325` or `THEME_LIGHT_PRIMARY=E58325` -| Variables | Default | Description | -| --------------------- | :-----: | --------------------------- | -| THEME_LIGHT_PRIMARY | #E58325 | Light Theme Config Variable | -| THEME_LIGHT_ACCENT | #007A99 | Light Theme Config Variable | -| THEME_LIGHT_SECONDARY | #973542 | Light Theme Config Variable | -| THEME_LIGHT_SUCCESS | #43A047 | Light Theme Config Variable | -| THEME_LIGHT_INFO | #1976D2 | Light Theme Config Variable | -| THEME_LIGHT_WARNING | #FF6D00 | Light Theme Config Variable | -| THEME_LIGHT_ERROR | #EF5350 | Light Theme Config Variable | -| THEME_DARK_PRIMARY | #E58325 | Dark Theme Config Variable | -| THEME_DARK_ACCENT | #007A99 | Dark Theme Config Variable | -| THEME_DARK_SECONDARY | #973542 | Dark Theme Config Variable | -| THEME_DARK_SUCCESS | #43A047 | Dark Theme Config Variable | -| THEME_DARK_INFO | #1976D2 | Dark Theme Config Variable | -| THEME_DARK_WARNING | #FF6D00 | Dark Theme Config Variable | -| THEME_DARK_ERROR | #EF5350 | Dark Theme Config Variable | +| Variables | Default | Description | +| --------------------- | :-----: | ---------------------------------- | +| THEME_LIGHT_PRIMARY | #E58325 | Main brand color and headers | +| THEME_LIGHT_ACCENT | #007A99 | Buttons and interactive elements | +| THEME_LIGHT_SECONDARY | #973542 | Navigation and sidebar backgrounds | +| THEME_LIGHT_SUCCESS | #43A047 | Success messages and confirmations | +| THEME_LIGHT_INFO | #1976D2 | Information alerts and tooltips | +| THEME_LIGHT_WARNING | #FF6D00 | Warning notifications | +| THEME_LIGHT_ERROR | #EF5350 | Error messages and alerts | +| THEME_DARK_PRIMARY | #E58325 | Main brand color and headers | +| THEME_DARK_ACCENT | #007A99 | Buttons and interactive elements | +| THEME_DARK_SECONDARY | #973542 | Navigation and sidebar backgrounds | +| THEME_DARK_SUCCESS | #43A047 | Success messages and confirmations | +| THEME_DARK_INFO | #1976D2 | Information alerts and tooltips | +| THEME_DARK_WARNING | #FF6D00 | Warning notifications | +| THEME_DARK_ERROR | #EF5350 | Error messages and alerts | + +#### Theming Examples + +The examples below provide copy-ready Docker Compose environment configurations for three different color palettes. Copy and paste the desired theme into your `docker-compose.yml` file's environment section. + +!!! info + These themes are functional and ready to use, but they are provided primarily as examples. The color palettes can be adjusted or refined to better suit your preferences. + +=== "Blue Theme" + + ```yaml + environment: + # Light mode colors + THEME_LIGHT_PRIMARY: '#5E9BD1' + THEME_LIGHT_ACCENT: '#A3C9E8' + THEME_LIGHT_SECONDARY: '#4F89BA' + THEME_LIGHT_SUCCESS: '#4CAF50' + THEME_LIGHT_INFO: '#4A9ED8' + THEME_LIGHT_WARNING: '#EAC46B' + THEME_LIGHT_ERROR: '#E57373' + # Dark mode colors + THEME_DARK_PRIMARY: '#5A8FBF' + THEME_DARK_ACCENT: '#90B8D9' + THEME_DARK_SECONDARY: '#406D96' + THEME_DARK_SUCCESS: '#81C784' + THEME_DARK_INFO: '#78B2C0' + THEME_DARK_WARNING: '#EBC86E' + THEME_DARK_ERROR: '#E57373' + ``` + +=== "Green Theme" + + ```yaml + environment: + # Light mode colors + THEME_LIGHT_PRIMARY: '#75A86C' + THEME_LIGHT_ACCENT: '#A8D0A6' + THEME_LIGHT_SECONDARY: '#638E5E' + THEME_LIGHT_SUCCESS: '#4CAF50' + THEME_LIGHT_INFO: '#4A9ED8' + THEME_LIGHT_WARNING: '#EAC46B' + THEME_LIGHT_ERROR: '#E57373' + # Dark mode colors + THEME_DARK_PRIMARY: '#739B7A' + THEME_DARK_ACCENT: '#9FBE9D' + THEME_DARK_SECONDARY: '#56775E' + THEME_DARK_SUCCESS: '#81C784' + THEME_DARK_INFO: '#78B2C0' + THEME_DARK_WARNING: '#EBC86E' + THEME_DARK_ERROR: '#E57373' + ``` + +=== "Pink Theme" + + ```yaml + environment: + # Light mode colors + THEME_LIGHT_PRIMARY: '#D97C96' + THEME_LIGHT_ACCENT: '#E891A7' + THEME_LIGHT_SECONDARY: '#C86C88' + THEME_LIGHT_SUCCESS: '#4CAF50' + THEME_LIGHT_INFO: '#2196F3' + THEME_LIGHT_WARNING: '#FFC107' + THEME_LIGHT_ERROR: '#E57373' + # Dark mode colors + THEME_DARK_PRIMARY: '#C2185B' + THEME_DARK_ACCENT: '#FF80AB' + THEME_DARK_SECONDARY: '#AD1457' + THEME_DARK_SUCCESS: '#81C784' + THEME_DARK_INFO: '#64B5F6' + THEME_DARK_WARNING: '#FFD54F' + THEME_DARK_ERROR: '#E57373' + ``` ### Docker Secrets