Customizing the Client Theme

Changing Background Images

You can override the default background images for the desktop and the sidebar in the client configuration at <my-custom-client-project-path>/src/assets/config/main.json.

Locate the entries for the image files in the configuration:

"dashboardBackgroundImage": "./assets/_default/theme/bgr-dashboard.jpg",
"sideBarHeaderImage": "./assets/_default/theme/bgr_sidebar.jpg",
"navBarLogo":"./assets/_default/theme/logo.svg",

Put your custom images in the asset folder at <my-custom-client-project-path>/src/assets and reference them in the configuration:

"dashboardBackgroundImage": "./assets/mydesktop.jpg",
"sideBarHeaderImage": "./assets/mysidebar.jpg",
"navBarLogo":"./assets/_default/theme/logo.svg",

Adjusting the Theme

You can override the default theme variables in styles.scss or create and import your own theme based on _eo-theme.scss ('~@eo-sdk/client/scss/_eo-theme.scss').

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;
}