Create theme

If you don't like how AT looks you can change the current theme or just create a new one and share it with the rest of us. If you want your new theme to be part of AT original themes send it to arenatracker@gmail.com or show it to me on the subreddit.

In AT, themes are organized in different directories inside AT dir/Themes, each directory refers to a specific theme.

The name of the directory will be used to name the theme in the combo box selector in config tab.

Theme files

Every theme dir needs the following files:

  • theme.json: It's the main file that define the theme.

  • Fonts files with .ttf extension: If you want to use fonts different that the default ones you will need to include them in the dir. The name of the .ttf file needs to match with the name of the font included in that file.

  • Image files with .png or .jpg extension: If you want to use images different that the default ones you will need to include them in the dir.

Info

If you want to create your own theme the best way to start is to copy one of the existing themes and change the name of the dir, put that dir along with the rest of themes on AT dir/Themes.

If you mess around with one of AT default themes and want to revert it to its original state, just remove its dir and restart AT, the theme will be downloaded again.

Theme structure

A theme is defined through theme.json file. This file has a lot of different keys that can be set to customize the look of AT.

The keys you will find inside can be organized depending on the end of their name:

  • "-----FONTS-----": This is a line used as a comment to try to group the keys and make it easier to navigate through theme.json

  • "defaultFont": Keys that ends on Font contains the name of a .ttf font file. Remember that the name of the .ttf file needs to match with the name of the font included in that file.

  • "buttonMinimizeFile": Keys that ends on File contains the name of a .png or .jpeg file.

  • "fgColor": Keys that ends on Color contains a color. You can define the color of these keys in 4 different ways:

    • By setting the rgb components of the color. "rgb(37,0,65)"

    • By setting the rgba components of the color. This way you can add transparencies (alpha channel). "rgba(37,0,65,50)"

    • By setting the hash code of the color. "#4B0082" or "#4B00829F"

    • By writing the name of the color. These are the accepted names:

("aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "transparent", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen")

  • "bgAppCF": Keys that ends on CF can either contain a color or an image in any of the format mentioned before.

  • "cardsFontOffsetY": Other keys will contain numeric or boolean values, they will be explained on their specific section.

When defining your own theme.json you don't need to give a value to every key. If a key has an empty value "", or it's missing from the file (you removed the line), AT will use a default value for it. For images and fonts AT will take the default images and fonts, and for colors AT will take the main colors you defined for your theme, these are set through the keys "theme1Color" and "theme2Color". Even removing all the keys and leaving theme.json containing just the curly brackets {} will result in a valid theme.

When writing the Classic and Purple theme many of the files you can check in the dirs are the default ones so there weren't any reason to copy them, just letting the corresponding key to empty or removing it would have been enough as AT would then use the default images. I decided to copy all of them so you guys can use them as a starting point and as a reference of the size needed for every image.

Keys in theme.json

Let's go over every key:

-----FONTS-----

These keys define the fonts used along AT. Keys that ends on Font contains the name of a .ttf font file as mentioned before. Remember that the name of the .ttf file needs to match with the name of the font included in that file.

  • "defaultFont": It's the default one used in AT when a small font is needed. Mainly used on config tab.

  • "bigFont": It's the one used when a big font is needed. Mainly used on the games tab and the list of stored decks on deck window.

  • "cardsFont": It's the one used on cards.

  • "cardsFontOffsetY": In case the font you use for the cards is not well centered on the y axis you can move it setting a number in this key. Only integer numbers are accepted. A number in the range of -10, 10 is generally enough to center the font.

-----MAIN COLORS-----

These are the most important keys, they define the soul of your theme.

  • "bgAppCF": Background used for AT and any message dialog. The background will be centered and repeated if AT is bigger than the image.

  • "fgColor": Text color used as default on AT.

  • "borderAppCF": Set this key if you want a border on AT and any message dialog.

  • "borderWidth": If you have set a border, here you define its width. Only integer numbers are accepted.

  • "theme1Color": Main color that will define your theme. It will be used as default in many other keys when they are not defined.

  • "theme2Color": Secondary color that will define your theme. Generally used for lines of borders, It works better, visually speaking, when chosing a lighter color that theme1Color.

  • "bgWidgetsColor": It's an aditional background color used for all the components of AT. It's totally optional. If you decide to set it, a semi-transparent color works, visually speaking, much better.

-----MIN CLOSE RESIZE-----

  • "bgTopButtonsColor": Background color of close and minimize buttons.

  • "hoverTopButtonsColor": Background color of close and minimize buttons when you hover you mouse over these icons.

  • "buttonMinimizeFile": Image used as minimize icon.

  • "buttonCloseFile": Image used as close icon.

  • "buttonResizeFile": Image used as resize icon.

-----TABS-----

  • "bgTabsColor": Background color of the tabs.

  • "hoverTabsColor": Background color used when you hover you mouse over a tab.

  • "selectedTabsColor": Background color of the selected tab.

  • "tabArenaFile": Image used as "Draft tab" icon. This tab is only visible while drafting.

  • "tabGamesFile": Image used as "Games tab" icon.

  • "tabHandFile": Image used as "Enemy Hand tab" icon.

  • "tabDeckFile": Image used as "Player Deck tab" icon. This tab is only visible when you don't have the deck separate in another window.

  • "tabEnemyDeckFile": Image used as "Enemy Deck tab" icon.

  • "tabPlanFile": Image used as "Replay tab" icon.

  • "tabConfigFile": Image used as "Config tab" icon.

  • "tabLogFile": Image used as "Log tab" icon. This tab is normally hidden, unless you use the "Split Window" option.

-----DECK WINDOW-----

  • "buttonNewDeckFile": Image of "New Deck" button.

  • "buttonLoadDeckFile": Image of "Load Deck" button.

  • "buttonSaveDeckFile": Image of "Save Current Deck" button.

  • "buttonRemoveDeckFile": Image of "Remove Current Deck" button.

  • "buttonRemoveFile": Image of "Remove Card" button.

  • "buttonMinFile": Image of "Decrease Card" button.

  • "buttonPlusFile": Image of "Increase Card" button.

  • "unknownFile": Image used when there are unknown cards in your deck.

  • "starFile": Star image used for legendary cards in your deck.

  • "manaLimitFile": Image used to separate the cards in your deck by mana.

  • "manaLimitBehind": Define if the mana limits are drawn behind the cards or in front of them. It accepts a boolean value: either true (behind) or false (in front).

  • "bgCard1File": Image used as background of deck cards with only 1 copy. If "Class Color" is set on config tab the class specific backgrounds will be used for class cards, these are defined with the following keys:

    • "bgCard1DeathknightFile"

    • "bgCard1DemonhunterFile"

    • "bgCard1DruidFile"

    • "bgCard1HunterFile"

    • "bgCard1MageFile"

    • "bgCard1PaladinFile"

    • "bgCard1PriestFile"

    • "bgCard1RogueFile"

    • "bgCard1ShamanFile"

    • "bgCard1WarlockFile"

    • "bgCard1WarriorFile"

  • "bgCard2File": Image used as background of deck cards with 2+ copies or legendary rarity. If "Class Color" is set on config tab the class specific backgrounds will be used for class cards, these are defined with the following keys:

    • "bgCard2DeathknightFile"

    • "bgCard2DemonhunterFile"

    • "bgCard2DruidFile"

    • "bgCard2HunterFile"

    • "bgCard2MageFile"

    • "bgCard2PaladinFile"

    • "bgCard2PriestFile"

    • "bgCard2RogueFile"

    • "bgCard2ShamanFile"

    • "bgCard2WarlockFile"

    • "bgCard2WarriorFile"

-----GAMES TAB-----

  • "gamesOnZ2HColor": Text color used for games/drafts already uploaded to zerotoheroes.com.

  • "buttonGamesReplayFile": Image of "Replay on zerotoheroes.com" button.

  • "buttonGamesWebFile": Image of "Open track-o-bot profile" button.

  • "buttonGamesGuideFile": Image of "Open user guide" button.

  • "bgSelectedItemListColor": Background color of the selected game on the list.

  • "fgSelectedItemListColor": Text color of the selected game on the list.

  • "branchClosedFile": Image used for a closed branch of the tree. Used on games tab and on the window to load a deck.

  • "branchOpenFile": Image used for an open branch of the tree.

  • "coinFile": Image of the coin.

  • "firstFile": Image of going first.

  • "loseFile": Image of a lost game.

  • "winFile": Image of a won game.

The images used to represents the different heroes are defined by the following keys:

  • "heroDemonhunterFile"

  • "heroDruidFile"

  • "heroHunterFile"

  • "heroMageFile"

  • "heroPaladinFile"

  • "heroPriestFile"

  • "heroRogueFile"

  • "heroShamanFile"

  • "heroWarlockFile"

  • "heroWarriorFile"

The background image of the enemy leaderboard ranking is defined with:

  • "bgLeaderboardFile"

-----ENEMY HAND TAB-----

  • "handCardFile": Image used as background for unknown cards hold by the opponent.

  • "handCardBYFile": Image used as background for cards created by other cards and RNG cards.

  • "handCardBYUnknownFile": This image is in theory never used. It's the image used as background for cards created by an unknown source.

  • "bgTotalAttackFile": Image used as background for total attack.

-----REPLAY TAB-----

  • "buttonPlanResizeFile": Image of "Swap Size" button.

  • "buttonPlanFirstFile": Image of "First Turn" button.

  • "buttonPlanPrevFile": Image of "Previous Turn" button.

  • "buttonPlanNextFile": Image of "Next Turn" button.

  • "buttonPlanLastFile": Image of "Last Turn" button.

  • "buttonPlanRefreshFile": Image of "Refresh" button when in planning mode.

-----DRAFT-----

  • "buttonDraftRefreshFile": Image of "Refresh" button.

  • "lfBestFile": Image used as external ornament for the best LightForge score.

  • "lfOpenFile": Image used as border for all LightForge scores.

  • "lfCloseFile": Image used as inner background for LightForge scores in learning mode.

  • "lfTextFile": Text image to identify LightForge best score.

  • "haBestFile": Image used as external ornament for the best HearthArena score.

  • "haOpenFile": Image used as border for all HearthArena scores.

  • "haCloseFile": Image used as inner background for HearthArena scores in learning mode.

  • "haTextFile": Text image to identify HearthArena best score.

  • "hsrBestFile": Image used as external ornament for the best HSReplay winrate.

  • "hsrOpenFile": Image used as border for all HSReplay winrates.

  • "hsrTextFile": Text image to identify HSReplay best winrate.

  • "youTextFile": Text image to identify your personal class winrates.

  • "speedLavaFile": Image used to fill the deck weight indicator.

  • "speedCloseFile": Image used as background for deck weight indicator.

  • "speedOpenFile": Image used as border for deck weight indicator.

  • "speedDWTextFile": Text image to identify Deck Weight element.

  • "speedTwitchTextFile": Image to identify most voted card by twitch chat.

  • "checkCardOkFile": Image used as ok button when a card might be wrongly recognized.

  • "bgDraftMechanicsHelpFile": Image used for the explanation of the deck mechanics at the start of a draft.

  • "bgDraftMechanicsHelpDropsFile": Image used for the explanation of the deck drops/mechanics at the start of a draft.

  • "bgDraftMechanicsFile": Image used as background for the mechanics overlay.

  • "fgDraftMechanicsColor": Text color used for the mechanics.

  • "minionsCounterFile": Image for mechanic minion.

  • "spellsCounterFile": Image for mechanic spell.

  • "weaponsCounterFile": Image for mechanic weapon.

  • "manaCounterFile": Image for mechanic mana avg.

  • "drop2CounterFile": Image for 2-drops.

  • "drop3CounterFile": Image for 3-drops.

  • "drop4CounterFile": Image for 4-drops.

  • "aoeMechanicFile": Image for mechanic AOE.

  • "tauntMechanicFile": Image for mechanic taunt.

  • "survivalMechanicFile": Image for mechanic survival.

  • "drawMechanicFile": Image for mechanic draw.

  • "pingMechanicFile": Image for mechanic ping.

  • "damageMechanicFile": Image for mechanic removal.

  • "destroyMechanicFile": Image for mechanic hard removal.

  • "reachMechanicFile": Image for mechanic reach.

  • "goldenMechanicFile": Image border shown for the first card of a mechanic.

  • "redMechanicFile": Image border for bad drops.

  • "greenMechanicFile": Image border for good drops.

  • "synergyTagColor": Rectangle color used as background to show the tag identifying synergies.

-----MENU LISTS-----

These keys define the colors used on the drop-down lists at "Force Draft", "Change Theme" and "New Deck".

  • "buttonForceDraftFile": Image used for "Force Draft" button.

  • "bgMenuColor": Background color used on all item menus.

  • "fgMenuColor": Text color used on all item menus.

  • "bgSelectedItemMenuColor": Background color used on the selected item.

  • "fgSelectedItemMenuColor": Text color used on the selected item.

-----TOOLTIPS-----

  • "bgTooltipColor": Background color of tooltips.

  • "fgTooltipColor": Text color of tooltips.

  • "borderTooltipColor": Border color of tooltips.

-----PROGRESS BAR-----

  • "bgProgressBarColor": Background color of the progress bar.

  • "fgProgressBarColor": Text color of the progress bar and message bar.

  • "borderProgressBarColor": Border color of the progress bar and message bar.

  • "chunkProgressBarColor": Color of the chunk on the progress bar and background of the message bar.

-----LOAD DECKS-----

  • "bgDecksCF": Background of the load decks window.

  • "borderDecksCF": Set this key if you want a border on the load decks window.

  • "borderDecksWidth": If you have set a border, here you define its width. Only integer numbers are accepted.

-----DECK NAME LINE EDIT-----

  • "bgLineEditColor": Background color of the deck name.

  • "fgLineEditColor": Text color of the deck name.

  • "borderLineEditColor": Border color of the deck name.

  • "bgSelectionLineEditColor": Background color of the deck name when there's a selection active.

  • "fgSelectionLineEditColor": Text color of the deck name when there's a selection active.

PreviousConfig TabNextStreaming

Last updated