Styling ORGENIC UI Components
Tags: orgenicui, webcomponents, ux, design
Published: 2019-05-27 12:04:01

---
title: Styling ORGENIC UI Components
published: true
description: ORGENIC UI is a growing set of web components with focus on UX and design.
tags: ORGENIC UI, Web Components, UX, Design
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gz0auh41gwm4ien2mbc2.png
series: ORGENIC UI Tutorials

---

# Styling ORGENIC UI Components

ORGENIC UI is a growing set of web components with focus on UX and design. Though ORGENIC UI comes with an integrated theming system it is often useful to modify the current theme quick and effective for individual purposes instead of creating a complete theme from scratch. This tutorial shows how to change the given styles of the ORGENIC UI tab component.

# Insert the Component

Just add this code to use a tab control within an ORGENIC UI project:

```html
<og-tab-container>
	<og-tab label="Tab Title">
		<!--CONTENT OF THE TAB -->
	</og-tab>
</og-tab-container>
```

Listing 1: adding the tab control to the template

{% codepen https://codepen.io/orgenic-team/pen/rgMzMB %}

# Style the Component

Since all ORGENIC UI components are native *WebComponents* with *ShadowDOM*, it is not possible to overwrite them with basic CSS features. For example, it is impossible to set the background-color of the current selected tab like this:

```css
.og-tabs__list-item--selected {
	background: red;
}
```

Listing 2: This won’t work

## Custom properties to the rescue

Themability is one of the underlying features of ORGENIC UI. To provide the capability of modifying styles within the ShadowDOM by an external stylesheet, ORGENIC UI uses CSS **Custom Properties** aka CSS variables. Therefor every component has its own set of CSS variables the user can use to create an individual design.

All UI components and their Custom Properties are documented at [http://docs.orgenic.org](http://docs.orgenic.org)

## Modify the Design

This example will show how to apply a new background color for the tabs. The documentation provides the CSS variables needed:

```css
--og-tabs__tab-Background
--og-tabs__tab-Background--hover
--og-tabs__tab-Background--active
```

 Just create a new CSS file (custom-theme.css) where the new values are applied to the CSS variables and include it as last stylesheet into the HTML:

```css
og-tab-container {
	--og-tabs__tab-Background:                 #39b6e4;
	--og-tabs__tab-Background--active:         #1ca2d2;
	--og-tabs__tab-Background--hover:          #1ca2d2;
	color:                                     #FFFFFF;              
}

og-tab {
	color:      #333333;
}
```

Listing 3: Overwriting the default theme

The text color of the tabs title and the content are set to `inherit`. That means - despite of the ShadowDOM - it is enough to set the parents CSS property `color` to change it without any special Custom Property.

{% codepen https://codepen.io/jfuhrmann/pen/QROGjN %}

# TL;DR

With the power of pre-defined CSS variables, it is very easy to modify the design of ORGENIC UI components without creating a complete theme. The encapsulation that comes with the ShadowDOM makes the components immune against side effects from foreign CSS, but also open to its own specific Custom Properties.

# Please visit us at:

- [https://orgenic.org](https://orgenic.org/?utm_source=devto&utm_medium=article&utm_campaign=stylingcomponents)
- https://github.com/orgenic/orgenic-ui
- https://twitter.com/orgenicUI