Skins and icon stylesBeta
Change the look of the whole app with a skin, make your own in Skin Factory, restyle app icons and share skins with friends.
Beta
This feature is in beta and may change.
A skin is the look of the whole app: colors, rounded corners, borders, shadows, glass and the way the selected item lights up. You choose it in Settings → App Settings → Appearance, under Skin.
The skins that come with the app#
| Skin | The look |
|---|---|
| Classic | The original look. The lightest on the TV |
| Glass | Translucent panels that blur what is behind them. Uses more of the TV's resources. It has extra options: Glass blur, Glass highlights and Glass lens effect |
| Cyberpunk | A dark neon look: cyan and magenta on near-black, thin glowing borders and tighter corners |
Your own and imported skins appear in the same list, after these three. A skin sets the look of Home, Settings, dialogs, notifications and the player's panels.
Slow TV
Choose Classic and turn on Reduced effects: animated glows, pulses and shimmer stop, and the remaining glows use fewer layers.
Skin Factory#
Skin Factory is the editor for your own skins. Open it from Appearance → Skin.
- A window asks Start from: Classic, Glass, Cyberpunk or one of your saved skins (Edit: name). A saved skin has a trash icon; Hegemon asks before deleting it.
- The editor shows the sections, the settings of the section you are on and a live preview of the skin. A bar at the top switches the preview between Home, Settings and Notifications, and the preview moves by itself to the screen where the element you are editing is visible. The skin's name is at the top; select it to rename the skin.
- Change a value. Press OK on a number to edit it, then Left and Right change it in small steps and Up and Down in big steps. OK or Back ends the edit. Each setting has its own Reset button, which returns it to its starting value.
- A color opens a picker with Hue, Saturation, Brightness and, where it applies, Opacity, then Preset colors and Your colors (colors you picked before). Choose Done to keep it, or Reset.
- Save stores the skin. Close asks Save changes? with Save, Discard and Keep editing.
What you can change#
| Section | What it covers |
|---|---|
| Colors | A color and a transparency for each part of the app |
| Surface and glass | Blur and transparency of panels. Any blur above 0 turns the glass effect on |
| Shapes, borders and shadows | Corner roundness, border thickness and shadow depth. The first row of each list scales all the others |
| Focus | How the selected item is highlighted when you move with the remote |
| Effects | Glow and animated borders for the focused item, for panels or for items |
| Elements | Settings for one kind of element only: Buttons, Panels, Cards, Text fields, Dialogs, Notifications, Chips and tabs, Spotlight buttons, Progress |
| Advanced | Exact corner sizes and Exact colors, one by one |
Anything you do not touch stays as it is in the skin you started from.
Icon style#
Icon style restyles the app icons and banners in the Apps screen and in the dock without changing the apps themselves. The original image is always one choice away.
- In Appearance → Skin, choose Show apps as: Banners (Android TV) or Icons (Google TV). This works even when icon style is off.
- Turn Icon style on.
- Style for this theme chooses the style for the current skin. The choices are Follow skin, Original, and the styles listed below. Each skin remembers its own choice.
- To change a single app, open its menu in the Apps screen and choose Icon style.
| Style | The result |
|---|---|
| Original | The app's own image, untouched |
| Black & white | Grayscale |
| Neon outline | A glowing outline around the logo |
| Dark background | The logo on a dark background |
| Glass | Frosted glass behind the logo |
| Cyberpunk | Neon edge and glow |
| Vintage | An aged look, with grain and a vignette |
| Rust | A corroded, stained metal look |
Icon styles editor#
Icon styles opens an editor to make your own style. A style is a list of steps applied in order. You can Add step, move a step up or down, delete it, start a New style, make a copy of an existing one or Add steps from a style.
The kinds of steps include Filter (single color, grayscale, two tones, tint), Background (solid color, gradient, blurred, logo, frosted glass), Crop, Logo, Outline, Shape (rounded, squircle), Border, Shadow, Neon edge, Satin glass, Grain, Vignette, Stains, Corrosion, Stack mark and text, Legibility halo and Show app title. Every step has its own sliders, such as Amount, Blur, Margin, Size, Width or Corner radius.
Import and share skins#
Import & share skins opens one window with these choices:
| Choice | What it does |
|---|---|
| Import from a file | Reads a skin file (.json) from the folder shown in the window. Copy the file there from a computer or a USB drive, or use Browse other locations… |
| Import from a link | Downloads a skin from a https link. Other links are refused |
| Received from friends | Skins your Echo friends sent you, each with Add to my skins or Decline |
| Export a skin | Saves one of your skins as a file |
| Send to a friend | Sends a skin to a friend. It arrives even if they are offline, and they get a notification. There is a daily limit on sends, and a skin that is too large cannot be sent |
After an import, choose the new skin in the Skin list. A skin made for a newer version of the app says This skin needs a newer version of the app.