--- title: "Set up themes" slug: "set-up-themes" updated: 2025-09-09T14:26:32Z published: 2025-09-09T14:26:32Z canonical: "documentation.deltatre.com/set-up-themes" --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.deltatre.com/llms.txt > Use this file to discover all available pages before exploring further. # Set up themes Learn how to create themes associated to your assets. This article covers how to customize the background, foreground, and other themes for assets within Presentation Manager, alongside carrying out accessibility checks. This can be used, as an example, in the context of setting up a branded row - for more information on branded rows, visit our [how to use branded rows](/v1/docs/how-to-use-branded-rows) article. Themes can be added to Pages, Rows, and Menus, in addition to the following Assets: Items, Channels, and Links. > [!NOTE] > **Note:** The theme feature can but turned on/off and restricted to specific user groups by the superadmins with in the configuration settings. ## Choose your asset For this example, select *Assets* > *Items,*and then select the item you want to change. ![Navigate.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009849380.png) Below you can see the background theme, however you can configure foreground and other themes in the same way. ![Themes_overview.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009585239.png) ### Choose your theme 1. Select the ![Add_theme.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009583279.png) icon to display theme options. 2. Select the one of the below three icons to select the color input method: | ![Theme_colours.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009583319.png) | Select the ![theme_palette.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009583359.png)icon to select a color or enter color Hex code. | | --- | --- | | ![theme_colour_picker_options.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009575560.png) | Select the![theme_colour_picker.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009583259.png)icon to use the color picker and specify transparency or enter color Hex code. | | ![theme_from_image.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009575540.png) | Select the![theme_gallery.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009583299.png)icon to view a color swatch taken from the images saved to the asset or enter color Hex code. | | ![theme_from_image_dropdown.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009575840.png) | If recorded, other image type swatches are available and display as options. | With a color selected, this forms your Primary color. You may now add Secondary and Tertiary colors in the same way. You can also drag and drop the colors to change the order: ![Drag and Drop reorder.gif](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/14779239879068.gif) Below is an example of a burgundy-colored branded row on the front end: ![Branded row burgundy.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/14779339275420.png)![Color picker burgundy.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/14779339280540.png) ### Accessibility check Carry out an accessibility check on two selected theme colors within the same category (Background, Foreground, or Other) in order to establish whether there is enough contrast. This is a very important stage when choosing colors, to comply with accessibility standards. 1. Hover over the two colors you wish to compare and select the ![Accessibility_check_hover.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009572440.png)icon on each. A tick icon indicates the two colors undergoing the accessibility check. ![themes_accessibility_check.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009577300.png) 2. To the right of the screen, view the Accessibility check results. | ![Accessibility_check.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009587239.png) | An example of a suitable color contrast. | | --- | --- | | ![Accessibility_check_fail.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009577180.png) | An example of unsuitable color contrast. | ### Delete a color Hover over the color you wish to delete and click the ![Accessibility_check_remove_colour.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360009572460.png) icon. This removes the color from your theme. ### Accessibility check levels The following are the conformance levels given in Presentation Manager as per the Web Content Accessibility Guidelines (WCAG) 2.0 guidelines: - Level A: This is the minimum level of conformance. It includes the most basic web accessibility features. - Level AA: This level includes all Level A and AA requirements. Many organizations strive to meet Level AA as it is considered the mid-range conformance level. - Level AAA: This is the highest level of conformance and includes all Level A, AA, and AAA requirements. - Fail: Does not meet the minimum requirements.