Navigation
Lead / Send Request Scenario
General
Design
APIs
Sidebar
advanced:colorscheme
Adapt Appereance with custom Color Scheme
If you want pCon.ui to adapt to your website visually, you can manipulate the colors by providing new values for material ui colors. You can also adapt some components by providing a CSS file.
Your custom colors should be gathered in a JSON file on your server. Send a publicly available URL to this file to EasternGraphics. We will then connect this URL with your pCon.ui instance.
NOTE: The URL of the color scheme has to be sent to us so it can be set as parameter in the corresponding GatekeeperID configuration on the server.
CORS Header (Cross-Origin)
Since pCon.ui will get information from a different origin than its own, the same origin policy is violated. Therefore, CORS header needs to be set to allow loading of those information in pCon.ui as follows:
Access-Control-Allow-Headers: Content-Type Access-Control-Allow-Method: POST Access-Control-Allow-Origin: https://ui.pcon-solutions.com
We have comprehensively adapted our software to the requirements of the German Accessibility Improvement Act (BFSG).
You can find more information here: https://www.barrierefreiheit-dienstekonsolidierung.bund.de/
Please note that your choosen highlight color for hoovered text and buttons in your instance or customization via color scheme and custom CSS can have a negative impact on the accessibility of our application.
Content of the json File
The JSON file can contain the following fields:
| Part | Kind | Description |
|---|---|---|
primary | main | Highlight color for hover effect and filled buttons |
text | primary | Text color for title, property values, property group names |
text | secondary | Text color for subtitle, description, property names |
background | default | Background color of iframe-region and 3D view if background is set to transparent |
background | paper | Background color of page (only for usage without iframe) |
background | webgl1 | Background color first value für radial gradient (only in combination with background set to radiantgrey) |
webgl2 | Background color second value für radial gradient (only in combination with background set to radiantgrey) | |
action | active | Color of icons in 3D view |
divider | Color of lines above and below property list |
Example json
{
"primary": {
"main": "#868686"
},
"text": {
"primary": "#000000",
"secondary": "#000000"
},
"background": {
"default": "#ffffff"
},
"divider": "#000000"
}
Example json with radial gradient
{
"primary": {
"main": "#868686"
},
"text": {
"primary": "#000000",
"secondary": "#000000"
},
"background": {
"webgl1": "rgba(255,255,255,0.2)",
"webgl2": "rgba(0,0,128,0.2)"
},
"divider": "#000000"
}
Parts you do not mention will be left to default.
advanced/colorscheme.txt · Last modified: by Karolin Merten