/
Customizing the Client Theme
Customizing the Client Theme
"dashboardBackgroundImage": "./assets/_default/theme/bgr-dashboard.jpg", "sideBarHeaderImage": "./assets/_default/theme/bgr_sidebar.jpg", "navBarLogo":"./assets/_default/theme/logo.svg",
"dashboardBackgroundImage": "./assets/mydesktop.jpg", "sideBarHeaderImage": "./assets/mysidebar.jpg", "navBarLogo":"./assets/_default/theme/logo.svg",
styles.scss
/* You can add global styles to this file, and also import other style files */ @import '~@eo-sdk/client/styles.css'; :root { /* main application background color */ --main-background: #e5e5e5; /* lighter version of main application background color */ --main-background-light: #eeeeee; /* MAIN APPLICATION COLORS*/ /* primary color in different variations (e.g., used for panel headers and the application bar) */ --color-primary: #484f54; --color-primary-2: #6d7276; --color-primary-3: #919598; --color-primary-4: #b6b9bb; /* RGB version of primary color used for rendering with different alpha values */ --color-primary-rgb: 72, 79, 84; /* accent color for adding highlights (e.g., used for primary buttons and badges) */ --color-accent: #bb3f5a; --color-accent-rgb: 187, 63, 90; /* color used for error messages (used for background or text color) */ --color-error: #ed5564; /* color used for success messages (used for background or text color) */ --color-success: #9abd1e; /* color used for warning messages (used for background or text color) */ --color-warning: #f39200; /* color of the enabled favorite icon */ --color-favorite: #FFC107; /* TEXT COLORS */ /* primary text color */ --text-color-body: rgba(0, 0, 0, 0.87); /* text color for descriptive text elements like captions */ --text-color-caption: rgba(0, 0, 0, 0.54); /* lightest text color for text elements like hints */ --text-color-hint: rgba(0, 0, 0, 0.26); /* color for highlighted text */ --text-color-accent: var(--color-accent); /* labels background color of dirty form fields */ --color-dirty-background: #ebf7d2; /* labels text color for dirty form fields */ --color-dirty-font: #8fad1c; /* PANEL COLORS */ /* background color of panels (lists, details etc.) */ --panel-background: #fff; /* grey panel background */ --panel-background-grey: #f4f4f4; /* lighter version grey panel background */ --panel-background-lightgrey: #fafafa; /* border color dividing panels header section from its contents */ --panel-header-border-bottom-color: rgba(0, 0, 0, 0.12); /* background color when hovering a list item */ --list-item-hover-background: #eee; /* background color for a selected list item */ --list-item-selected-background: #f5f5f5; /* border color dividing two list items */ --list-item-border-color: rgba(0, 0, 0, 0.12); /* FONT SIZES */ --font-hint: 11px; --font-caption: 12px; --font-body: 13px; --font-subhead: 15px; --font-title: 20px; --font-headline: 24px; --font-display: 34px; /* FONT WEIGHTS */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* COMPONENT SIZING */ /* base application padding, most of components positioning is calculated from this base value */ --app-pane-padding: 16px; /* height of the application bar */ --app-bar-height: 64px; /* height of a pane header */ --app-pane-header-height: 140px; /* size of the split pane divider */ --app-split-pane-divider-size: --app-pane-padding; /* default duration of transitions inside the application */ --app-app-default-transition-duration: 2000ms; }
, multiple selections available,
Related content
Customizing the Client
Customizing the Client
More like this
Developing your Individual Client
Developing your Individual Client
More like this
Customizing the Client Preview
Customizing the Client Preview
Read with this
Extending the client with dashboard widgets
Extending the client with dashboard widgets
More like this
Using Object-based Dynamic Lists Instead of Catalogs
Using Object-based Dynamic Lists Instead of Catalogs
Read with this
Extending the Client with Plug-ins
Extending the Client with Plug-ins
More like this