Skip to main content

Styling the default UI

Christmas theme

/* A festive theme for the holidays. Try editing me! */ theoplayer-default-ui { font-family: 'Comic Sans MS', sans-serif; width: 100%; --theoplayer-icon-color: red; --theoplayer-text-color: white; --theoplayer-range-bar-color: red; --theoplayer-range-thumb-background: linear-gradient(to bottom right, red 0% 25%, white 25% 40%, red 40% 60%, white 60% 75%, red 75% 100%); --theoplayer-range-thumb-box-shadow: 1px 1px 5px red; --theoplayer-range-thumb-height: 19px; --theoplayer-range-thumb-width: 19px; --theoplayer-range-track-height: 6px; --theoplayer-time-range-track-pointer-background: rgb(255 0 0 / 25%); --theoplayer-control-background-gradient-stops: transparent 0%, rgb(0 100 0) 100%; --theoplayer-menu-backdrop-background: rgb(0 100 0 / 75%); --theoplayer-mobile-control-backdrop-background: rgb(0 100 0 / 75%); }