Making Custom Themes
This page will guide you through the essential information needed to customize the core RetroArch theme.
Credit for information goes to @baxysquare
Skills & Tools Needed to Make and Contribute a Theme
- A GitHub account and a basic understanding on how to fork a project and contribute via Pull Requests. The GitHub project that hosts the theme is the retroarch-assets repository.
- Computer application(s) to create source icons. You can use any photo editing application such as Photoshop or GIMP, but a Vector-based application such as Illustrator or Inkscape is preferred. The preferred source format is SVG.
- Conversion applications can come in handy. You can use ImageMagick to batch convert your source files to PNG format. Running your PNG files through ImageOptim can help reduce the icon file size without reducing the quality.
- Attention to detail, patience and time. Be prepared to create and revise as you learn and grow. Feel free to take an existing theme, make modifications and then test your new design.
Required Theme Components
- A truetype font renamed to "font.ttf." You need to choose a typeface that has an open license. There is a wide selection to choose from at Google Fonts. If you have the tools and skills to make your own font and wish to contribute it via open license, feel free to do so.
- A text file in GitHub Markdown format titled README.md. This file provides basic info on the theme itself along with specifications and guidelines to help others contribute to the theme. Make sure to include an attribution and license info for the included truetype font.
- A PNG folder that contains a complete set of icons and a default background image.
Optional Theme Components
- A SRC file containing SVG or other source files. If you choose not to include your source files, please host them elsewhere and indicate in the README.
Icons
The majority of time and effort involved in creating a theme is creating and revising the icons. The default Monochrome set includes just over 200 icons as listed below. That number will continue to grow as more cores and features are added.Tips & Tricks for Creating Icons
- The icons should be set to a 256x256 pixel canvas and should be centered on a 64x64 grid. You need to snap your point and line elements to the grid wherever possible. Libretro icons are scaled down, so when design elements do not line up with the grid, they tend to render oddly.
- Give your icons room to breathe. While you are capable of using the full canvas, a 248x248 or 240x240 maximum icon size is highly recommended. Alternatively, you can keep your icons inside a 256x256 circular "blueprint". This will keep the top and the bottom of your icons from touching when you're scrolling through a list of icons.
- Create and stick to a color palette of 64 colors or less. While you can use an unlimited palette, your icons will look more uniform and consistent as a theme.
- Keep the details of your icons in harmony with one another. If one icon has too many design details, try to simplify it to match with the other icons. If an icon is lacking in detail, do what you can to add balance in comparison to the other designs.
Here's a complete list of icons (and wallpaper) in the default set. Category, Type, Menu Level and Size info has been included to help you understand an icon's purpose and use in the user interface.
Name Category Type Level Size
FB Alpha - Arcade Games-content.png Arcade Content 1 256
MAME-content.png Arcade Content 1 256
MAME2003-content.png Arcade Content 1 256
MAME2010-content.png Arcade Content 1 256
Neo Geo-content.png Arcade Content 1 256
FB Alpha - Arcade Games.png Arcade System 0 256
MAME.png Arcade System 0 256
MAME2003.png Arcade System 0 256
MAME2010.png Arcade System 0 256
Neo Geo.png Arcade System 0 256
Lutro.png Computer Application 0 256
DOS.png Computer Application 0 256
Atari - ST-content.png Computer Content 1 256
Commodore Amiga-content.png Computer Content 1 256
DOS-content.png Computer Content 1 256
Microsoft - MSX-content.png Computer Content 1 256
Microsoft - MSX2-content.png Computer Content 1 256
ScummVM-content.png Computer Content 1 256
Sinclair - ZX 81-content.png Computer Content 1 256
Sinclair - ZX Spectrum +3-content.png Computer Content 1 256
Sinclair - ZX Spectrum-content.png Computer Content 1 256
Lutro-content.png Computer Content 1 256
Atari - ST.png Computer System 0 256
Commodore Amiga.png Computer System 0 256
Microsoft - MSX.png Computer System 0 256
Microsoft - MSX2.png Computer System 0 256
ScummVM.png Computer System 0 256
Sinclair - ZX 81.png Computer System 0 256
Sinclair - ZX Spectrum +3.png Computer System 0 256
Sinclair - ZX Spectrum.png Computer System 0 256
Atari - 2600-content.png Console Content 1 256
Atari - 5200-content.png Console Content 1 256
Atari - 7800-content.png Console Content 1 256
Atari - Jaguar-content.png Console Content 1 256
Bandai - WonderSwan Color-content.png Console Content 1 256
Bandai - WonderSwan-content.png Console Content 1 256
Coleco - ColecoVision-content.png Console Content 1 256
GCE - Vectrex-content.png Console Content 1 256
Magnavox - Odyssey2-content.png Console Content 1 256
NEC - PC Engine - TurboGrafx 16-content.png Console Content 1 256
NEC - PC Engine CD - TurboGrafx-CD-content.png Console Content 1 256
NEC - PC Engine SuperGrafx-content.png Console Content 1 256
NEC - PC-FX-content.png Console Content 1 256
Nintendo - Family Computer Disk System-content.png Console Content 1 256
Nintendo - GameCube-content.png Console Content 1 256
Nintendo - Nintendo 64-content.png Console Content 1 256
Nintendo - Nintendo 64DD-content.png Console Content 1 256
Nintendo - Nintendo Entertainment System-content.png Console Content 1 256
Nintendo - Satellaview-content.png Console Content 1 256
Nintendo - Sufami Turbo-content.png Console Content 1 256
Nintendo - Super Nintendo Entertainment System-content.png Console Content 1 256
Nintendo - Wii-content.png Console Content 1 256
Sega - 32X-content.png Console Content 1 256
Sega - Dreamcast-content.png Console Content 1 256
Sega - Master System - Mark III-content.png Console Content 1 256
Sega - Mega Drive - Genesis-content.png Console Content 1 256
Sega - Mega-CD - Sega CD-content.png Console Content 1 256
Sega - PICO-content.png Console Content 1 256
Sega - Saturn-content.png Console Content 1 256
Sega - SG-1000-content.png Console Content 1 256
SNK - Neo Geo CD-content.png Console Content 1 256
SNK - Neo Geo-content.png Console Content 1 256
Sony - PlayStation-content.png Console Content 1 256
The 3DO Company - 3DO-content.png Console Content 1 256
Uzebox-content.png Console Content 1 256
Atari - 2600.png Console System 0 256
Atari - 5200.png Console System 0 256
Atari - 7800.png Console System 0 256
Atari - Jaguar.png Console System 0 256
Bandai - WonderSwan Color.png Console System 0 256
Bandai - WonderSwan.png Console System 0 256
Coleco - ColecoVision.png Console System 0 256
GCE - Vectrex.png Console System 0 256
Magnavox - Odyssey2.png Console System 0 256
NEC - PC Engine - TurboGrafx 16.png Console System 0 256
NEC - PC Engine CD - TurboGrafx-CD.png Console System 0 256
NEC - PC Engine SuperGrafx.png Console System 0 256
NEC - PC-FX.png Console System 0 256
Nintendo - Family Computer Disk System.png Console System 0 256
Nintendo - GameCube.png Console System 0 256
Nintendo - Nintendo 64.png Console System 0 256
Nintendo - Nintendo 64DD.png Console System 0 256
Nintendo - Nintendo Entertainment System.png Console System 0 256
Nintendo - Satellaview.png Console System 0 256
Nintendo - Sufami Turbo.png Console System 0 256
Nintendo - Super Nintendo Entertainment System.png Console System 0 256
Nintendo - Wii.png Console System 0 256
Sega - 32X.png Console System 0 256
Sega - Dreamcast.png Console System 0 256
Sega - Master System - Mark III.png Console System 0 256
Sega - Mega Drive - Genesis.png Console System 0 256
Sega - Mega-CD - Sega CD.png Console System 0 256
Sega - PICO.png Console System 0 256
Sega- Saturn.png Console System 0 256
Sega - SG-1000.png Console System 0 256
SNK - Neo Geo CD.png Console System 0 256
SNK - Neo Geo.png Console System 0 256
Sony - PlayStation.png Console System 0 256
The 3DO Company - 3DO.png Console System 0 256
Uzebox.png Console System 0 256
Atari - Lynx-content.png Handheld Content 1 256
Game Park - GP32-content.png Handheld Content 1 256
Handheld Electronic Game-content.png Handheld Content 1 256
Nintendo - Game Boy Advance-content.png Handheld Content 1 256
Nintendo - Game Boy Color-content.png Handheld Content 1 256
Nintendo - Game Boy-content.png Handheld Content 1 256
Nintendo - Nintendo DS Decrypted-content.png Handheld Content 1 256
Nintendo - Nintendo DS-content.png Handheld Content 1 256
Nintendo - Pokemon Mini-content.png Handheld Content 1 256
Nintendo - Virtual Boy-content.png Handheld Content 1 256
Sega - Game Gear-content.png Handheld Content 1 256
SNK - Neo Geo Pocket Color-content.png Handheld Content 1 256
SNK - Neo Geo Pocket-content.png Handheld Content 1 256
Sony - PlayStation Portable-content.png Handheld Content 1 256
Tiger - Game.com-content.png Handheld Content 1 256
Atari - Lynx.png Handheld System 0 256
Game Park - GP32.png Handheld System 0 256
Handheld Electronic Game.png Handheld System 0 256
Nintendo - Game Boy Advance.png Handheld System 0 256
Nintendo - Game Boy Color.png Handheld System 0 256
Nintendo - Game Boy.png Handheld System 0 256
Nintendo - Nintendo DS Decrypted.png Handheld System 0 256
Nintendo - Nintendo DS.png Handheld System 0 256
Nintendo - Pokemon Mini.png Handheld System 0 256
Nintendo - Virtual Boy.png Handheld System 0 256
Sega - Game Gear.png Handheld System 0 256
SNK - Neo Geo Pocket Color.png Handheld System 0 256
SNK - Neo Geo Pocket.png Handheld System 0 256
Sony - PlayStation Portable.png Handheld System 0 256
Tiger - Game.com.png Handheld System 0 256
2048.png Port Application 0 256
Cave Story.png Port Application 0 256
Dinothawr.png Port Application 0 256
DOOM.png Port Application 0 256
Dungeon Crawl Stone Soup.png Port Application 0 256
Quake1.png Port Application 0 256
2048-content.png Port Content 1 256
Cave Story-content.png Port Content 1 256
Dinothawr-content.png Port Content 1 256
DOOM-content.png Port Content 1 256
Dungeon Crawl Stone Soup-content.png Port Content 1 256
Quake1-content.png Port Content 1 256
FFmpeg.png XMB Application 0 256
default.png XMB Application 0 256
Game.png XMB Application 0 256
history.png XMB Application 0 256
images.png XMB Application 0 256
lakka.png XMB Application 0 256
movies.png XMB Application 0 256
netplay.png XMB Application 0 256
retroarch.png XMB Application 0 256
settings.png XMB Application 0 256
musics.png XMB Application 0 256
add.png XMB Application 0 256
FFmpeg-content.png XMB Content 1 256
music.png XMB Content 1 256
image.png XMB Content 1 256
movie.png XMB Content 1 256
achievement-list.png XMB Content 1 256
default-content.png XMB Content 1 256
Game-content.png XMB Content 1 256
netplay - iRoom-locked.png XMB Content 1 256
netplay - iRoom.png XMB Content 1 256
netplay - LAN Room-locked.png XMB Content 1 256
netplay - LAN Room.png XMB Content 1 256
netplay - rooms-locked.png XMB Content 1 256
netplay - rooms.png XMB Content 1 256
room.png XMB Content 1 256
setting.png XMB Content 1 256
zip.png XMB Content 2 256
file.png XMB Content 2 Small
folder.png XMB Content 2 Small
dialog-slice.png XMB Dialog 2 256
Libretro - Pad.png XMB Help - 256
battery-charging.png XMB Info Bar - Small
battery-full.png XMB Info Bar - Small
clock.png XMB Info Bar - Small
undo.png XMB Info Bar - Small
wifi.png XMB Info Bar - Small
key-hover.png XMB Key 2 256
key.png XMB Key 2 256
arrow.png XMB Nav 2 Small
close.png XMB Nav 2 Small
core-cheat-options.png XMB Nav 2 Small
core-disk-options.png XMB Nav 2 Small
core-infos.png XMB Nav 2 Small
core-input-remapping-options.png XMB Nav 2 Small
core-options.png XMB Nav 2 Small
core-shader-options.png XMB Nav 2 Small
core.png XMB Nav 2 Small
cursor.png XMB Nav 2 Small
database.png XMB Nav 2 Small
loadstate.png XMB Nav 2 Small
pointer.png XMB Nav 2 Small
reload.png XMB Nav 2 Small
resume.png XMB Nav 2 Small
run.png XMB Nav 2 Small
savestate.png XMB Nav 2 Small
screenshot.png XMB Nav 2 Small
subsetting.png XMB Nav 2 Small
off.png XMB Selection 2 Small
on.png XMB Selection 2 Small
bg.png XMB Wallpaper - 1080p
0 Comments