Theming

The control chrome is fully themeable through the UI config: a color token set (accent, track colors, surfaces, text tiers…), a dimension set (button sizes, track heights, insets — with automatic fullscreen step-up), replaceable icons for every glyph, and title text styling.

Kotlin

OGUiConfig.Builder()
    .setControlColors(OGControlColors(adAccent = Color(0xFF7BD88F)))
    .setProgressColors(played = Color.White, track = Color.DarkGray, scrubber = Color.White)
    .setPlayIcon(R.drawable.my_play)
    .setSeekForwardIcon(R.drawable.my_ff)
    .setTitleTextStyle(TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold))
    .build()

Swift

var config = OGUIConfig()
config.colors.adAccent = Color(red: 0.48, green: 0.85, blue: 0.56)
config.dimens = OGControlDimens()          // or your own values
config.playIcon = Image("myPlay")
config.seekForwardIcon = Image("myFF")
config.titleFont = .system(size: 20, weight: .bold)

TypeScript

el.config = {
  colors: { adAccent: "#7BD88F", trackPlayed: "#FFFFFF" }, // partial merge
  dimens: { playButtonSize: 64 },
  playIconSvg: mySvg.play,
  seekForwardIconSvg: mySvg.ff,
  titleStyle: "font-size: 20px; font-weight: 700;",
};

React Native

<OGPlayerView
  style={styles.player}
  source={{ url }}
  uiConfig={{
    colors: { adAccent: "#7BD88F", trackPlayed: "#FFFFFF", trackRemaining: "#38FFFFFF" },
    dimens: { playButtonSize: 64, trackHeight: 4 },
    playIconName: "my_play",
    pauseIconName: "my_pause",
    seekForwardIconName: "my_ff",
    seekBackwardIconName: "my_rw",
  }}
/>

colors and dimens take any subset of OGControlColors / OGControlDimens — the native token names, applied on Android and iOS. Colours are hex strings, #RRGGBB or #AARRGGBB (alpha first, like the wrapper’s other colour props); sizes are dp / pt. A value in any other form is skipped and that token keeps its default. Icons are replaced by native resource name (Android res/drawable, iOS asset catalog). Title text styling isn’t available in React Native — text styling covers the error overlay (errorText*, retryButton*) and the Up-next card (upNext*).

Flutter

OGPlayerView(
  source: OGMediaItem(url: url),
  uiConfig: const OGUIConfig(
    colors: OGControlColors(
      adAccent: '#FF7BD88F',
      trackPlayed: '#FFFFFFFF',
      trackRemaining: '#38FFFFFF',
    ),
    dimens: OGControlDimens(playButtonSize: 64, trackHeight: 4),
    playIconName: 'og_my_play',
    pauseIconName: 'og_my_pause',
    seekForwardIconName: 'og_my_ff',
    seekBackwardIconName: 'og_my_rw',
  ),
)

OGControlColors and OGControlDimens carry the native token names as optional fields — unset tokens keep the SDK default. Colours are hex strings, #RRGGBB or #AARRGGBB (alpha first, like the plugin’s other colours); sizes are dp / pt. A value in any other form is skipped. Icons are replaced by native resource name (Android res/drawable — prefix them og_ so release shrinking keeps them; iOS asset catalog). Title text styling isn’t available in Flutter — text styling covers the error overlay (errorText*, retryButton*) and the Up-next card (upNext*).

Token names

The token sets carry the same names on Android, iOS, React Native and Flutter, and on the web with the differences noted below:

Set	Tokens
Colors (16)	foreground, foregroundMuted, foregroundFaint, trackPlayed, trackBuffered, trackRemaining, thumb, thumbHalo, pressed, liveEdge, liveBehind, adAccent, menuSurface, menuSelected, menuBorder, chipSurface
Dimensions (23)	trackHeight, trackHeightActive, thumbSize, thumbSizeActive, thumbHaloSize, scrubTouchHeight, touchTargetMin, iconSize, playButtonSize, playGlyphSize, seekButtonSize, seekGlyphSize, clusterGap, bottomBarHeight, edgeInset, bottomScrimHeight, topScrimHeight, menuMinWidth, menuMaxWidth, menuItemHeight, menuCorner, chipHeight, adCueMarkerSize

adAccent colours the ad progress bar and the ad-cue markers (on iOS, accent remains as another name for the same token). The dimensions are the embedded sizes: in fullscreen the player steps the transport, bottom bar, insets, scrims and chips up to its own fullscreen sizes. The web’s dimens has no touchTargetMin and adds cueMinSize / cueMaxSize, the bounds of the subtitle font size.

What’s replaceable: play/pause/replay, seek forward/back, fullscreen enter/exit, subtitles, audio, speed, quality, volume states, the ad transport glyphs and, on Android TV and Apple TV, the playlist previous/next glyphs (setSkipPreviousIcon / setSkipNextIcon in Kotlin, skipPreviousIcon / skipNextIcon in Swift). What’s deliberately not configurable: content-rating position (fixed top-right by Kijkwijzer convention), the LIVE chip’s presence on live streams, and the trial watermark (a license removes it).

Your own error copy belongs to theming too — see error handling.