When creating or editing a universe, a special 'Theme' tab will enable the universe owner to edit many aspects about the universe interface and graphics both when viewing the universe and when playing a game with this universe enabled. These settings allow for gamemasters to tailor the user interface of their table to make it to their liking, and immersing players even further into the stories unraveling.

Universe themes allow for gamemasters to tailor the game interface to fit the tone of the story being told. Many aspects such as colors, fonts, and graphical assets can be adjusted to best fit the vibes of the table and gives the gamemaster control over how elements are presented to their players.

Some areas of adjustment include the following:

Within a game, a specific universe theme can be assigned as that game's theme by navigating to a game's settings. From there, the gamemaster can alter the Theme setting of the game and choose any theme for the game experience tied to one of the game's connected universes.

Themes can be customized when creating the universe by selecting the 'Theme' tab in the universe system settings. The system settings can be accessed after the universe's creation by taking the following steps:

There are several fields on this page that can customize many areas of the universe and game interface. A thorough explanation of each of these fields can be found below.

Universe theme colors have a broad reach across universe themes. They display throughout the game experience, universes homepage, and any modals or thumbnails associated with that theme.

The accent color is the main color presented in the game and universe UI. By default, this color is Alchemy Gold! Alchemy gold has a Hex value of #8a6C3C, which is its unique identifier for identifying colors used in HTML, CSS, SVG, and other formats. This code starts with a # symbol followed by six letters or numbers relating to the mixture of red, green, and blue colors that make up that unique color.

To find a specific Hex Color for a universe theme, anyone can use one of several tools online by searching 'Hex Color Picker' in a browser window. Once having located a color for a new theme, enter a # symbol immediately followed by the 6-digit color code to see the UI immediately change to that color!

The example below uses a Hex Color of #D2232A.

Additional colors can also be added past the Accent Color and Light Accent Color of a theme by selecting the Add Color button. Additional colors can be removed by selecting the Remove Color button that appears in a theme with multiple colors.

Additional colors added work slightly different to the Accent Color as instead of being applied generally to the UI, they can be applied specifically through any markdown in the universe or game as well as be used for a game's trackers.

For this theme's secondary color, #228B22 was added. This color was also renamed to Forest Green by highlighting the CLICK TO EDIT NAME text that appears and typing over it.

With a secondary color added, that color can be embedded into any markdown text through a syntax using the text to display and the name of the new color. This syntax is [yourText =type:color:colorName]() where yourText is the text to be displayed in the markdown and colorName is the new name of the secondary color. In this case, we can add the secondary color of Forest Green presented in the image above by typing [This awesome sentence.=type:color:Forest Green]() directly in the markdown.

The settings below generally effect how some aspects of the game experience look, but primarily alter the pages relating to managing universe and any universe objects contained within it.

The Accent Font in the game experience is the dominant font that is displayed across many core areas of that experience. Outside of the game, this font is also used when editing the universe and any universe objects contained within it!

The default font available is a Serif font. A replacement font in either a OTF or TTF format can be uploaded in place of the default font. A quick place to start searching for fonts would be Google's Font Library, though any font files of that type from any source will work.

The glyph symbol replaces the icons which rests both in the center of many modal dividers across Alchemy as well as in the Floating Action Button (FAB) in the game experience.

Below is the default divider that can be changed by uploading a custom glyph symbol.

Below is the default FAB rest state that can be changed by uploading a custom Glyph Symbol.

The Sheet Header is a header image that is present on the premade, character, and NPC modals displayed in a themed universe or in a game where a themed universe is enabled.

Similar to the Sheet Header, the Sheet Footer is an image that applies to the bottom of the editable character sheet modal. This is most often reserved for text of the game being played or a publisher's name.

Below is an example of our Sheet Footer, which can be found across many modals within the app.

By default, Alchemy displays a subtle blue leather background in every modal opened within the app.

This background can be replaced with a custom background that fits better to the style of game being played.

The settings below alter how the Alchemy game experience is presented to players in games with a custom themed universe enabled.

Scene Title Frames allow for framing scene titles with artwork in the game experience to help make them pop off the screen for players. In combination with an accent color and custom fonts, this allows for very customizable title frames for scenes played in a game.

Avatar Frames are the decorative frames placed around the avatar of any player character, premades, or NPCs. This is the default frame for many areas such as when viewing the Player Bar when playing as a character or NPC.

The Combat Avatar Frame is the frame that displays on the Player Bar when Turn Order is enabled in a game. The Character Avatar Frame is used specifically for when viewing avatars in a character sheet.

By default, a small vignette is applied to scenes in the game experience to bring out the artwork of the scene around the various UI elements of the game experience.

Tab Bars are the selectable text in the game experience that players and gamemasters can use to switch between the panels they have access to through the game's UI. This is also the same section that controls the look of the selectable tabs used when navigating through a modal in the game or universe.

Several aspects of the text used in these tabs can be altered.

Gamemasters can choose whether the font uploaded as the Accent Font of the theme is used for the text displayed on the tab bars.

The font size of the tab bar buttons can be altered to increase or decrease how large the text appears. The default size of this text is 10px, or Pixels. In addition to noting a size by pixel, size notation can be set using Em or Rem, which are common typeface sizing units used in CSS by web developers.

The letter spacing of the tab bar buttons can be altered to increase or decrease how spread out the letters of each tab are displayed. The default size of this spread is 2px, or Pixels. In addition to noting a size by pixel, size notation can be set using Em or Rem, which are common typeface sizing units used in CSS by web developers.

Text transform allows for the tab names to be displayed in a particular letter case. By default, Alchemy tabs are presented with an Uppercase text transform.

Section Headers are the header texts displayed throughout many articles and modals presented in both a universe as well as the game experience.

Several aspects of header text can be altered in a similar ways to how Tab Bars mentioned above.

Gamemasters can choose whether the font uploaded as the Accent Font of the theme is used for the text displayed in headers.

The header font size can be altered to increase or decrease how large the text appears. The default size of this text is 10px, or Pixels. In addition to noting a size by pixel, size notation can be set using Em or Rem, which are common typeface sizing units used in CSS by web developers.

The letter spacing of headers can be altered to increase or decrease how spread out the letters of each header are displayed. The default size of this spread is 2.5px, or Pixels. In addition to noting a size by pixel, size notation can be set using Em or Rem, which are common typeface sizing units used in CSS by web developers.

Text transform allows for headers to be displayed in a particular letter case. By default, Headers are presented with an Uppercase text transform.

Once a theme is created in Alchemy, it can be exported in a JSON file format to a computer and reuploaded to a separate Alchemy Universe.

To export a completed universe theme, open the universe for editing and navigate to its Theme tab. Select the Overflow Menu Icon and select 'Download Theme' from the menu options that appear. This will prompt you to download a JSON file of the theme's details as well as links to the assets uploaded directly to Alchemy. These files can be shared with others and uploaded to universes on other Alchemy accounts.

From this same menu, a universe theme can be uploaded by selecting the 'Import Theme' button from the same overflow menu. You will be prompted to select the JSON file from your local device and, once selected and confirmed by selecting the Floating Action Button (FAB), the universe will automatically adopt the new theme just uploaded to it.

Bespoke universe theme assets can be created and added to custom universes to provide a more unique and customized gaming experience in Alchemy.

All universe theme assets are recommended to be in a .webp (preferred) or .png format. These assets should contain transparent layers outside of the core graphics themselves to support an enriched view in the game experience. Any parts of the template images below that are red indicate regions of the image that will be covered by other elements in the Alchemy interface.