v3.4.0

nights_stay

New Dark Mode

Now you can toggle between the regular (Light) and the new Dark Mode.

Got it

NEW Check out the text colors.

Installation

1. Install emerald-ui.

npm i emerald-ui

2. Import the appropriate styles in your App.js or main js file.

• Import the base styles (mandatory):
  import 'emerald-ui/lib/styles.css';

  import 'emerald-ui/lib/styles.css';

• For the CE Broker styles:
  import 'emerald-ui/lib/styles-ceb.css';

  import 'emerald-ui/lib/styles-ceb.css';

• For the EverCheck styles:
  import 'emerald-ui/lib/styles-ec.css';

  import 'emerald-ui/lib/styles-ec.css';

• For the Table Mesa styles:
  import 'emerald-ui/lib/styles-tm.css';

  import 'emerald-ui/lib/styles-tm.css';

Note that if you want to apply the CE Broker, EverCheck or Table Mesa styles, you need to also import the Emerald-UI base styles. First, import the base styles, then import the product specific styles.

Dark Theme

In order to activate the Dark Theme you only need to do the following two steps

• Import the default Dark Theme styles:
  import 'emerald-ui/lib/dark-theme.css'

  import 'emerald-ui/lib/dark-theme.css'

• Or the CE Broker Dark Theme styles:
  import 'emerald-ui/lib/dark-theme-ceb.css'

  import 'emerald-ui/lib/dark-theme-ceb.css'

• Or the EverCheck Dark Theme styles:
  import 'emerald-ui/lib/dark-theme-ec.css'

  import 'emerald-ui/lib/dark-theme-ec.css'

• Add the class eui-dark-theme to the body or outermost container.

There might be instances in which you need to apply the dark theme to a component or a group of components even if the global theme is the regular, light one. In order to achieve this, wrap the component(s) in a div with a className of eui-dark-theme no-bg. This will add the dark theme styles to the inner components, except for the contextual components like the Popover, DropdownMenu and Calendar, which will keep the light theme styles.

Text color classes

There are a series of classes that must be used when coloring text. This is important because when the colors change, you won't have to do anything in the code. Note that the color codes are displayed here only for reference and should not be used directly. Use the classes instead. These are the classes:

Other color classes

You can use the following classes to change css properties depending on the brand you're using: