Kor UI themes #1: Twitch, Github, Spotify
Tags: ux, design, webdev, css
Published: 2020-10-03 12:30:23

In this post we will showcase the three **[Kor UI](https://kor-ui.com/)** themes inspired in well-known websites or web apps. We have chosen **Twitch**, **GitHub** and **Spotify** as references because of their harmonious base colors, rich use of accent colors and typography.

We will cover mainly two aspects of theming: customizing **global variables** (such as shadows, fonts and colors) and local **component styles** (such as border radius or tabs size).

---

## Theme 1: Twitch

The user interface of Twitch is easily recognisable mainly for its moderate use of purple as an accent color and mostly grayscale base colors with a blue tint. A few component styles had to be set to match those used currently in the app.

[Link to Stackblitz project](https://stackblitz.com/edit/kor-ui-theme-twitch)

![](https://dev-to-uploads.s3.amazonaws.com/i/vvh61vt7yby7qxiap6i1.png)

Key elements of the theme:
- **Base colors** were set to blue-ish dark gray tint
- **Accent color** was set to a bright purple
- **Shadows** were removed (except for app and nav bars)
- **Fonts** were set to the default sans-serif
- **Tab items** were set to have accent font color when active or hovered and paddings got removed
- **Inputs** got their bottom border removed and border radius increased

```css
html, *[theme="dark"] {
  --accent-1: 169, 112, 255;
  --accent-1b: 179, 122, 255;
  --accent-1c: 159, 102, 255;
  --base-0: 24, 24, 27;
  --base-1: 14, 14, 16;
  --base-2: 31, 31, 35;
  --base-3: 44, 44, 46;
  /* outlines */
  --shadow-1: none;
}
html, body {
  /* fonts */
  --body-1: normal 14px/24px sans-serif;
  --body-2: normal 12px/16px sans-serif;
  --header-1: bold 16px/24px sans-serif;
  --header-2: bold 14px/24px sans-serif;
}
/* component styles */
kor-button {
  --accent-1: 145, 71, 255;
  --accent-1b: 155, 81, 255;
  --accent-1c: 135, 61, 245;
}
kor-nav-bar,
kor-app-bar {
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
}
kor-tab-item {
  padding: unset;
  min-width: unset;
  margin: 0 8px;
}
kor-tab-item:hover,
kor-tab-item[active] {
  --text-1: rgb(var(--accent-1));
}
kor-input {
  border: none;
  border-radius: 4px;
}
```

---

## Theme 2: Github

In the last year, GitHub got a refresh in its UI and the new theme relies heavily on rounded corners and outlined shapes. Accent colors vary from case to case and another unique detail is the fact that the app bar has a mostly dark theme while the rest of the UI is based on a light color scheme.

[Link to Stackblitz project](https://stackblitz.com/edit/kor-ui-theme-github)

![](https://dev-to-uploads.s3.amazonaws.com/i/si1g3w3scynvcw78v0ke.png)

Key elements of the theme:
- **Base color** of side panels was set to white and page base colors to a lighter shade of gray
- **Accent color** was set to a dark shade of green
- **Shadows** were replaced with thin outlines
- **Fonts** were set to the default sans-serif
- **App bar** theme was set to dark and base color changed to a dark shade of blue
- **Tab items** had their active state indicator switched to orange

```css
html, *[theme="light"] {
  --accent-1: 46, 164, 79;
  --accent-1b: 56, 174, 89;
  --accent-1c: 36, 154, 69;
  --base-1: 246, 248, 250;
  --base-2: 255, 255, 255;
  /* outlines */
  --shadow-1: 1px 1px 0px rgba(0, 0, 0, .1), -1px -1px 0px rgba(0, 0, 0, .1);
}
*[theme="dark"] {
  /* access bar */
  --base-0: 36, 41, 46;
}
html, body {
  /* fonts */
  --body-1: normal 14px/24px sans-serif;
  --body-2: normal 12px/16px sans-serif;
  --header-1: bold 16px/24px sans-serif;
  --header-2: bold 14px/24px sans-serif;
}
/* component styles */
kor-tab-item {
  --accent-1: 249, 130, 108;
}
```

---

## Theme 3: Spotify

Spotify’s UI are mostly recognised by the pill-shaped buttons and monochromatic color scheme except for the use of green as the main accent color. The brand typography is also quite unique and recognisable through its circular capitals and wide characters.

[Link to Stackblitz project](https://stackblitz.com/edit/kor-ui-theme-spotify)

![](https://dev-to-uploads.s3.amazonaws.com/i/nsbwx29dyh9x10gr2945.png)

Key elements of the theme:
- **Base colors** were slightly adjusted
- **Accent color** was set to a dark shade of green
- **Shadows** were removed
- **Fonts** were set to ‘Raleway’ (closest open source match to - Spotify’s own ‘Circular’ font)
- **Buttons** had their min-width and border-radius increased, while fonts got capitalised

---

## Conclusion

In this post we have covered the basics of how themes can be created using **[Kor UI](https://kor-ui.com/)** and we have chosen three popular websites or web apps as examples to showcase how it can be done.
These themes are public and can be used or modified by anybody. If you would like to know more about creating or modifying themes, we recommend checking the following post: