Eva Design System Theme

In Eva Design System a theme is a set of semantic variables and connections between them, that represents the application's look & feel to achieves the following goals:

• create new visual themes easily;
• flexibly change look & feel of the application by managing variables, without changing components' styles;
• switch between visual themes in app runtime without page reload;
• support of CSS properties.

A Theme

In Nebular terms - theme is a sass map, structured in a particular way. Here's a gist of how it looks like:

$theme: (
  // ...
  color-danger-100: #fff2f2,
  color-danger-200: #ffd6d9,
  color-danger-300: #ffa8b4,
  color-danger-400: #ff708d,
  // ...
  color-danger-900: #700940,

  /* Basic colors - for backgrounds and borders and texts */

  color-basic-100: white,
  color-basic-200: #f7f8fa,
  color-basic-300: #edf0f4,
  color-basic-400: #dde1eb,
  // ...
  color-basic-1100: #131729,

  /* Status colors states - focus, hover, default, active, disabled  */

  color-primary-focus: color-primary-700,
  color-primary-hover: color-primary-400,
  color-primary-default: color-primary-500,
  color-primary-active: color-primary-600,
  color-primary-disabled: color-primary-300,
  // ...
);

Each theme is divided into the following semantic groups:

• Colors
• Backgrounds & Borders
• Text Colors
• Fonts & Text Styles
• General Theme Variables

Colors

All available color within the theme. 5 semantic colors (primary, success, info, warning, danger), 6 transparency levels for every default semantic color (8%, 16%, 24%, 32%, 40%, 48%) and basic color (backgrounds and texts). Each color has a pallet of 9 shades, except for basic, which has 11 shades. These colors mostly used by status variants of the components.

Primary color shades:

color-primary-100: #f2f6ff,
color-primary-200: #d9e4ff,
color-primary-300: #a6c1ff,
color-primary-400: #598bff,
color-primary-500: #3366ff,
color-primary-600: #284de0,
color-primary-700: #2541cc,
color-primary-800: #192f9e,
color-primary-900: #14236e,

color-primary-transparent-100: rgba(51, 102, 255, 0.08),
color-primary-transparent-200: rgba(51, 102, 255, 0.16),
color-primary-transparent-300: rgba(51, 102, 255, 0.24),
color-primary-transparent-400: rgba(51, 102, 255, 0.32),
color-primary-transparent-500: rgba(51, 102, 255, 0.40),
color-primary-transparent-600: rgba(51, 102, 255, 0.48),

You can also tune colors used for element states:

color-primary-focus: color-primary-700,
color-primary-hover: color-primary-400,
color-primary-default: color-primary-500,
color-primary-active: color-primary-600,
color-primary-disabled: color-primary-300,

You can adjust these settings for each of the colors, to make states use lighter or darker colors.

Backgrounds & Borders

A theme has 3 backgrounds (basic, alternative, primary) each of 4 shades and also 3 borders, each of 5 shades (background shades count + 1). basic and alternative backgrounds and borders utilize basic color shades as a source. primary backgrounds and borders use primary color. Basic backgrounds and borders heavily used by components (cards, accordions, menu, etc), when alternative (tooltips) and primary only for particular use cases, to distinguish some of the components.

Basic backgrounds and borders:

background-basic-color-1: color-basic-100,
background-basic-color-2: color-basic-200,
background-basic-color-3: color-basic-300,
background-basic-color-4: color-basic-400,

border-basic-color-1: color-basic-100,
border-basic-color-2: color-basic-200,
border-basic-color-3: color-basic-300,
border-basic-color-4: color-basic-400,
border-basic-color-5: color-basic-500,

the most used of these are:

• background-basic-color-1 - the lightest one, usually used for top sitting elements - cards, headers, etc.
• background-basic-color-2 - for background of the layout and input controls (inputs, checkboxes, etc)

And vice-versa for dark themes:

background-basic-color-1: color-basic-800, // <- notice how we start
background-basic-color-2: color-basic-900, // with the end part
background-basic-color-3: color-basic-1000,// of the basic shades
background-basic-color-4: color-basic-1100,

border-basic-color-1: color-basic-800,
border-basic-color-2: color-basic-900,
border-basic-color-3: color-basic-1000,
border-basic-color-4: color-basic-1100,
border-basic-color-5: color-basic-1100,

Text Colors

There are 5 colors within the theme: basic - main text color, used on top of basic backgrounds alternate - alternative color used on top of alternate backgrounds, control - used on top of status colors (primary, success, etc), disabled color - to indicate text/component disabled state and hint - for secondary texts (for example placeholders and captions).

Text colors use basic shades as a source:

text-basic-color: color-basic-1000,
text-alternate-color: color-basic-100,
text-control-color: color-basic-100,
text-disabled-color: color-basic-500,
text-hint-color: color-basic-700,

Fonts & Text Styles

Each theme has two available fonts: default and secondary. secondary font used for headers, while the default for the rest of the elements.

There are 14 text styles:

• 6 heading styles, used by h1-h6 elements
• 2 subtitle styles, used as a text of most of controls (inputs, menus, etc)
• 2 paragraph styles, regular text
• 2 caption styles, used by smaller texts, like tooltip or input caption
• label style, used by label element
• button text style, used by button element

Each styles describes text font-family, font-size, font-width and line-height, for instance, caption text style:

text-caption-font-family: font-family-primary,
text-caption-font-size: 0.75rem,
text-caption-font-weight: 400,
text-caption-line-height: 1rem,

Adjust these styles to change text style of specific groups of elements.

General Theme Variables

This section contains other supporting theme variables, such as border-radius, outline-width & outline-color, shadow, etc.

Related Articles

• Enable Theme Customization
• Create Custom Theme
• Default Theme Variables
• Dark Theme Variables