7dae3a3c02
Depend the theme, you can have different Docs icons in the header. A customization was already possible from the theme customization file, but now it is as well possible to override the icon from the theme itself, making it easier to manage different themes with different icons. We change the theme customization variable name to "icon" instead of "logo", "logo" was already used for the main logo of the application inside the theme configuration.
88 lines
2.6 KiB
Markdown
88 lines
2.6 KiB
Markdown
# Runtime Theming 🎨
|
|
|
|
### How to Use
|
|
|
|
To use this feature, simply set the `FRONTEND_CSS_URL` environment variable to the URL of your custom CSS file. For example:
|
|
|
|
```javascript
|
|
FRONTEND_CSS_URL=http://anything/custom-style.css
|
|
```
|
|
|
|
Once you've set this variable, our application will load your custom CSS file and apply the styles to our frontend application.
|
|
|
|
### Benefits
|
|
|
|
This feature provides several benefits, including:
|
|
|
|
* **Easy customization** 🔄: With this feature, you can easily customize the look and feel of our application without requiring any code changes.
|
|
* **Flexibility** 🌈: You can use any CSS styles you like to create a custom theme that meets your needs.
|
|
* **Runtime theming** ⏱️: This feature allows you to change the theme of our application at runtime, without requiring a restart or recompilation.
|
|
|
|
### Example Use Case
|
|
|
|
Let's say you want to change the background color of our application to a custom color. You can create a custom CSS file with the following contents:
|
|
|
|
```css
|
|
body {
|
|
background-color: #3498db;
|
|
}
|
|
```
|
|
|
|
Then, set the `FRONTEND_CSS_URL` environment variable to the URL of your custom CSS file. Once you've done this, our application will load your custom CSS file and apply the styles, changing the background color to the custom color you specified.
|
|
|
|
----
|
|
|
|
# **Your Docs icon** 📝
|
|
|
|
You can add your own Docs icon in the header from the theme customization file.
|
|
|
|
### Settings 🔧
|
|
|
|
```shellscript
|
|
THEME_CUSTOMIZATION_FILE_PATH=<path>
|
|
```
|
|
|
|
### Example of JSON
|
|
|
|
You can activate it with the `header.icon` configuration: https://github.com/suitenumerique/docs/blob/main/src/helm/env.d/dev/configuration/theme/demo.json
|
|
|
|
This configuration is optional. If not set, the default icon will be used.
|
|
|
|
----
|
|
|
|
# **Footer Configuration** 📝
|
|
|
|
The footer is configurable from the theme customization file.
|
|
|
|
### Settings 🔧
|
|
|
|
```shellscript
|
|
THEME_CUSTOMIZATION_FILE_PATH=<path>
|
|
```
|
|
|
|
### Example of JSON
|
|
|
|
The json must follow some rules: https://github.com/suitenumerique/docs/blob/main/src/helm/env.d/dev/configuration/theme/demo.json
|
|
|
|
`footer.default` is the fallback if the language is not supported.
|
|
|
|
---
|
|
Below is a visual example of a configured footer ⬇️:
|
|
|
|
|
|
|
|
----
|
|
|
|
# **Custom Translations** 📝
|
|
|
|
The translations can be partially overridden from the theme customization file.
|
|
|
|
### Settings 🔧
|
|
|
|
```shellscript
|
|
THEME_CUSTOMIZATION_FILE_PATH=<path>
|
|
```
|
|
|
|
### Example of JSON
|
|
|
|
The json must follow some rules: https://github.com/suitenumerique/docs/blob/main/src/helm/env.d/dev/configuration/theme/demo.json |