---
title: tv-theme
framework: TVML
role: article
role_heading: Article
path: tvml/tv-theme
---

# tv-theme

Sets an element’s appearance according to the specified theme.

## Overview

Overview Use the tv-theme query to change the appearance of a template based on the theme specified in UIUserInterfaceStyle in the info.plist or by a theme set by the theme attribute. Here’s an example that sets styles for light and dark themes. <style>    @media tv-template and (tv-theme:light) {       .foo { color:rgb(0, 0, 0); }    }    @media tv-template and (tv-theme:dark) {       .foo { color:rgb(255, 255, 255); }    } </style> Values for tv-theme

## See Also

### Media Queries

- [layout-direction](tvml/layout-direction.md)