/
Customizing the Client Theme

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

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