In this post we will showcase the three Kor UI 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.
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
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.
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
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.
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 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:
Top comments (0)