The shortkit SDK provides comprehensive theming options to match your brand’s visual identity. All visual properties are configurable through the theme configuration object.
Theme configuration Accent color for interactive elements (scrubber fill, active toggles, buttons). Accepts hex (#FF6600) or rgba (rgba(255, 102, 0, 1)).
Feed background color. Visible during transitions or if content doesn’t fill the viewport.
Tint color for all control icons (play/pause, share, captions, etc.).
theme.controlsBackgroundOpacity
Opacity of the gradient/background behind controls (0.0-1.0). Ensures visibility over video.
Font for all text rendered by the SDK (captions, speed selector, labels). Falls back to system font if not specified.
Basic example const config = { theme : { primaryColor : '#FF6600' , backgroundColor : '#000000' , controlsTint : '#FFFFFF' , controlsBackgroundOpacity : 0.5 , fontFamily : 'Inter, system-ui, sans-serif' } };
Caption styling Customize the appearance of captions and subtitles:
theme.captionStyle.fontSize
Caption text size in points.
theme.captionStyle.fontWeight
Font weight: normal, medium, semibold, or bold.
theme.captionStyle.textColor
Caption text color.
theme.captionStyle.backgroundColor
string
default: "rgba(0, 0, 0, 0.75)"
Background color behind caption text.
theme.captionStyle.backgroundOpacity
Background opacity (0.0-1.0). Alternative to rgba in backgroundColor.
theme.captionStyle.position
Caption position: top or bottom.
theme.captionStyle.edgeStyle
Text edge style for readability: none, dropShadow, raised, depressed, or outline.
const config = { theme : { captionStyle : { fontSize : 18 , fontWeight : 'semibold' , textColor : '#FFFFFF' , backgroundColor : 'rgba(0, 0, 0, 0.8)' , position : 'bottom' , edgeStyle : 'dropShadow' } } };
Scrubber styling Customize the progress bar/scrubber appearance:
theme.scrubberStyle.height
Height of the scrubber bar in points.
theme.scrubberStyle.knobSize
Diameter of the scrubber knob in points.
theme.scrubberStyle.playedColor
Color of the played portion. Defaults to primaryColor.
theme.scrubberStyle.bufferedColor
string
default: "rgba(255, 255, 255, 0.5)"
Color of the buffered portion.
theme.scrubberStyle.unplayedColor
string
default: "rgba(255, 255, 255, 0.3)"
Color of the unplayed portion.
theme.scrubberStyle.knobColor
Color of the scrubber knob. Defaults to primaryColor.
const config = { theme : { primaryColor : '#FF6600' , scrubberStyle : { height : 3 , knobSize : 14 , playedColor : '#FF6600' , bufferedColor : 'rgba(255, 255, 255, 0.4)' , unplayedColor : 'rgba(255, 255, 255, 0.2)' , knobColor : '#FFFFFF' } } };
Customize the appearance of “Sponsored” or “Ad” labels on native ad units:
Label text. Common alternatives: “Ad”, “Advertisement”, “Promoted”.
Label font size in points.
Label position: topLeft, topRight, bottomLeft, or bottomRight.
const config = { theme : { sponsoredLabel : { text : 'Ad' , textColor : '#FFFFFF' , backgroundColor : 'rgba(0, 0, 0, 0.7)' , fontSize : 11 , position : 'topRight' } } };
Control icons Customize individual control button appearances:
Default icon size in points.
theme.controlIcons.playPauseSize
Size of the center play/pause button.
Icon style: filled or outlined.
const config = { theme : { controlIcons : { size : 28 , playPauseSize : 56 , style : 'outlined' } } };
Gradients Configure the gradient overlays that ensure control visibility:
Gradient at the top of the video (behind top controls). Whether to show the gradient.
Gradient height in points.
Gradient color stops. Default: ['rgba(0,0,0,0.6)', 'transparent']
Gradient at the bottom of the video (behind scrubber and bottom controls).
const config = { theme : { gradients : { top : { enabled : true , height : 120 , colors : [ 'rgba(0, 0, 0, 0.7)' , 'transparent' ] }, bottom : { enabled : true , height : 150 , colors : [ 'transparent' , 'rgba(0, 0, 0, 0.8)' ] } } } };
The iOS SDK supports additional theming options: let theme = ThemeConfig ( primaryColor : "#FF6600" , controlsTint : "#FFFFFF" , // iOS-specific: Use SF Symbols for icons iconSymbolWeight : . medium , // iOS-specific: Vibrancy effect for controls useVibrancy : true )
The Android SDK integrates with Material Design: val theme = ThemeConfig ( primaryColor = "#FF6600" , controlsTint = "#FFFFFF" , // Android-specific: Use Material icons useMaterialIcons = true , // Android-specific: Ripple effect on buttons useRippleEffect = true )
The Web SDK supports CSS custom properties for additional customization: :root { --shortkit-primary : #FF6600 ; --shortkit-background : #000000 ; --shortkit-controls-tint : #FFFFFF ; --shortkit-font-family : 'Inter' , system-ui , sans-serif ; }
Dark/Light mode The SDK automatically adapts to the system’s dark/light mode preference. You can also explicitly set the mode:
const config = { theme : { colorScheme : 'dark' , // 'dark', 'light', or 'system' // Different colors per mode dark : { primaryColor : '#FF6600' , backgroundColor : '#000000' , controlsTint : '#FFFFFF' }, light : { primaryColor : '#E55500' , backgroundColor : '#FFFFFF' , controlsTint : '#000000' } } };
Complete theme example import { shortkit } from '@shortkit/web' ; shortkit . initialize ({ apiKey : 'pk_live_your_publishable_key' , config : { theme : { // Base colors primaryColor : '#FF6600' , backgroundColor : '#0A0A0A' , controlsTint : '#FFFFFF' , controlsBackgroundOpacity : 0.5 , fontFamily : 'Inter, system-ui, sans-serif' , // Captions captionStyle : { fontSize : 16 , fontWeight : 'medium' , textColor : '#FFFFFF' , backgroundColor : 'rgba(0, 0, 0, 0.75)' , position : 'bottom' , edgeStyle : 'dropShadow' }, // Scrubber scrubberStyle : { height : 3 , knobSize : 12 , playedColor : '#FF6600' , bufferedColor : 'rgba(255, 255, 255, 0.4)' , unplayedColor : 'rgba(255, 255, 255, 0.2)' }, // Ad labels sponsoredLabel : { text : 'Ad' , fontSize : 11 , position : 'topRight' }, // Control icons controlIcons : { size : 24 , playPauseSize : 48 , style : 'filled' }, // Gradients gradients : { top : { enabled : true , height : 100 }, bottom : { enabled : true , height : 120 } } } } });
Next steps 