Table of Contents

Introduction to Themes

General information

Playnite's user interface is implemented using Windows Presentation Framework (WPF) and UI definition is done using XAML files. Custom themes in Playnite are implemented using standard template and styling support that WPF provides, therefore any tutorial that applies to styling in WPF also applies to Playnite.

Fullscreen and Desktop modes

Playnite offers two separate modes of operation. Standard Desktop mode designed for keyboard and mouse and Fullscreen mode designed to be controlled with gamepad. These two modes are implemented completely separately and therefore themes are also completely separate.

Learning resources

Since Playnite themes are essentially just set of template and style files, general editing rules and tutorials that apply to WPF also apply to Playnite.

Recommended WPF resources:

Note

There's currently very active community around theme/extension development on our Discord server. We highly recommend joining if you plan to develop add-ons for Playnite!

Creating Playnite themes

Warning

Do not edit built-in default themes. Always create new copy of theme files (ideally using Toolbox utility) are edit those. Broken edits to default theme files could lead to Playnite not being able to start anymore.

Warning

Please read the documentation carefully, especially section about distribution and theme updates. Not updating your theme regularly could cause issues to theme users, for example they might not be able to use newly added features. Or they might not be able to load the theme at all in newer version of Playnite, in the worst case scenario.

There are generally two approaches to theme creation in Playnite.

  1. Manually editing XAML files using any text editor.

  2. Using Blend/Visual Studio designer.

Option #1 doesn't require installation of any additional applications and themes can be generally created even using Notepad. However this approach has major disadvantages:

  • You don't get live preview of changes your are making.
  • You have to restart Playnite every time a change is made to theme files.
  • There's not autocompletion or error checking for XAML syntax.

Option #2 requires installation of Visual Studio IDE, Community edition is free to download and includes Blend editor. This approach takes some time to set up, but offers all advantages that manual editing lacks, like live preview, autocompletion of XAML properties, visual editor etc.

Warning

The latest Visual Studio 2022 is currently not supported (live previews will not work)! Use 2019 or 2017 version instead.

Using Blend editor is recommended option.

Warning

Theme installation and update always replaces the entire theme directory completely. Meaning that any files that are not part of the installation package will be lost during installation process! If your theme includes some custom functionality that requires user to replace/add files to theme's directory, make sure they know that they will loose those changes after an update!

Integrating with plugins

Plugins can provide custom UI elements that can be integration into a theme. See extension integration page for more details.

Theme files and directories

This section explains contents and purpose of specific theme files.

Directory/File Description
DefaultControls Styles for standard (built-in WPF) controls like button, checkbox etc.
DerivedStyles Styles for standard (built-in WPF) controls like button, checkbox etc., that are used in specific cases. For example Play button, list item for Grid view etc.
CustomControls Styles for custom Playnite controls.
Views Styles for library views and panels.
Common.xaml Base styles that are inherited by other styles from the theme.
Constants.xaml Colors, brushes, sizes and other constants used by styles form the theme.
Media.xaml Various icons, texts and image specifications used by styles form the theme.
Edit this page