# Changing the UI with CSS
Use CSS custom properties and shadow parts to match the player to your site.
## Open Video UI
Tip: open your browser's developer console and use the `player` and `THEOplayer` variables to interact with this demo.
### Primary (accent)
Seek bar fill#ffc50fSeek bar thumb#ffc50fCenter play button icon#ffc50f
### Secondary (foreground)
Text#ffffffControl icons#ffffffMenu text#ffffff
### Tertiary (backgrounds)
Control bar gradient end#000000Menu backdrop#000000
Reset
Generated CSS
```css
theoplayer-default-ui {
--theoplayer-range-bar-color: #ffc50f;
--theoplayer-range-thumb-background: #ffc50f;
--theoplayer-center-play-button-icon-color: #ffc50f;
--theoplayer-text-color: #ffffff;
--theoplayer-icon-color: #ffffff;
--theoplayer-menu-color: #ffffff;
--theoplayer-control-background-gradient-stops: transparent 0%, #000000 100%;
--theoplayer-menu-backdrop-background: #000000;
}
```
Open Video UI exposes its colors through CSS custom properties such as `--theoplayer-icon-color`, `--theoplayer-menu-color`, `--theoplayer-range-bar-color` and `--theoplayer-control-background-gradient-stops`, grouped below into accent, foreground and background colors. See the [Open Video UI styling example](https://optiview.dolby.com/docs/open-video-ui/web/examples/styling/) for more options.
Code
demo.html
```html
Changing the UI with CSS
```
## Default UI
Tip: open your browser's developer console and use the `player` and `THEOplayer` variables to interact with this demo.
### Primary
Primary color#ffc50fPrimary background text#000000Primary background#ffc50f
### Secondary
Secondary color#ffffffSecondary background text#000000Secondary background#ffffff
### Tertiary
Tertiary color#000000Tertiary background text#ffffffTertiary background#000000
Reset
Generated CSS
```css
.theoplayer-skin .theo-primary-color,
.theoplayer-skin .vjs-selected {
color: #ffc50f !important;
}
.theoplayer-skin .theo-primary-background {
color: #000000 !important;
background-color: #ffc50f !important;
}
.theoplayer-skin .theo-secondary-color {
color: #ffffff !important;
}
.theoplayer-skin .theo-secondary-background {
color: #000000 !important;
background-color: #ffffff !important;
}
.theoplayer-skin .theo-tertiary-color {
color: #000000 !important;
}
.theoplayer-skin .theo-tertiary-background {
color: #ffffff !important;
background-color: #000000 !important;
}
```
The [Default UI](https://optiview.dolby.com/docs/theoplayer/ui/web/default-ui.md) groups its themed elements into six color classes: `.theo-primary-color` and `.theo-primary-background`, `.theo-secondary-color` and `.theo-secondary-background`, and `.theo-tertiary-color` and `.theo-tertiary-background`, plus `.vjs-selected` for selected menu items. Override these classes to recolor every element at once; see [UI skinning](https://optiview.dolby.com/docs/theoplayer/ui/web/ui-skinning.md) for what each class affects.
Code
default-ui.html
```html
Changing the Default UI with CSS
```