<!--
{
  "documentType" : "article",
  "framework" : "TVML",
  "identifier" : "/documentation/TVML/tv-theme",
  "metadataVersion" : "0.1.0",
  "role" : "article",
  "title" : "tv-theme"
}
-->

# tv-theme

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

## 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.

```xml
<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

- `dark`: The theme being tested for is dark.
- `light`: The theme being tested for is light.

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)