Customizing colors and appearance

It is highly recommended that you familiarize yourself with CSS selectors and the CSS variable syntax to get the most out of customizing your Owncast instance. Soon you'll be able to make your Owncast page look how you'd like. Using the Owncast CSS helper below is a great way to get started.

CSS Selectors

Selector	Description
header	The page header element
footer	The page footer element
#global-header-text	The text in the header
#offline-banner	The banner that appears when the stream is offline
#custom-page-content	The custom content of the page
#notify-button	Button to display the notify modal
#follow-button	Button to display the follow modal
#followers-collection	The collection of followers
#modal-container	The container for the modals
#chat-container	The container for the chat
.chat-message_user	A user-sent chat message
.chat-message_system	A system-sent chat message
.chat-message_social	A social message from the Fediverse
.followers-follower	A single Follower in the followers collection

CSS Variables

You can override the values assigned to CSS variables manually by setting them in the CSS editor in the admin. You can find a list of variable names you can override.

For example, if you'd like to make all action items (links, buttons) red, button borders green, and change the body font to a serif font, you can set the following CSS variables as follows:

:root {
  --theme-color-action: red;
  --theme-color-components-primary-button-border: green;
  --theme-text-body-font-family: serif;
}

Additional selectors and variables

While, using CSS, you can target any element on the page, if there are specific elements you find yourself having difficulty customizing, please open an issue on the Owncast GitHub repository so we can consider adding additional selectors or CSS variables to make customization easier. We will also likely add more customization options directly within Owncast's appearance page over time for common use cases. If you find yourself wanting to customize something specific, contributions are welcome!

Owncast CSS helper

To assist in customizing your Owncast colors via CSS variables and customizing specific elements, use the CSS helper below. This is meant to give you a head start in writing your own CSS, not a complete solution. Select colors using the color pickers, edit the CSS directly as needed, then copy and paste the result into your Owncast admin under General Settings → Appearance.

Owncat suggests

You can copy and paste your custom CSS and share it with other Owncast users as themes!

Owncast Components

Select colors to customize your Owncast instance. The CSS will be generated automatically.

Action Color--theme-color-action

Links, buttons, and interactive elements

Action Hover--theme-color-action-hover

Hover state for interactive elements

Main Background--theme-color-background-main

Primary page background

Header Background--theme-color-background-header

Header section background color

Button Background--theme-color-components-primary-button-background

Primary button background color

Button Text--theme-color-components-primary-button-text

Primary button text color

Button Border--theme-color-components-primary-button-border

Primary button border color

Chat Background--theme-color-components-chat-background

Chat container background

Chat Text--theme-color-components-chat-text

Chat message text color

Chat Input Background--theme-color-components-chat-input-background

Chat input field background

Primary Text--theme-color-palette-0

Main text color

Secondary Text--theme-color-palette-1

Secondary/muted text

Tertiary Text--theme-color-palette-2

Tertiary/disabled text

Headerheader

The main header element

Background

Text

Footerfooter

The main footer element

Background

Text

Header Text#global-header-text

The text in the header

Offline Banner#offline-banner

The banner that appears when the stream is offline

Background

Text

Custom Content#custom-page-content

The custom content of the page

Background

Text

Notify Button#notify-button

Button to display the notify modal

Background

Text

Follow Button#follow-button

Button to display the follow modal

Background

Text

Followers Collection#followers-collection

The collection of followers

Modal Container#modal-container

The container for the modals

Background

Text

Chat Container#chat-container

The container for the chat

User Chat Message.chat-message_user

A user-sent chat message

Background

Text

System Chat Message.chat-message_system

A system-sent chat message

Background

Text

Social Chat Message.chat-message_social

A social message from the Fediverse

Background

Text

Follower Item.followers-follower

A single Follower in the followers collection

Background

Text

Generated CSS