Guide to Making Themes

RetroArch Additions Themes
#1

I am working on putting together a guide to making themes that I’m hoping will eventually be hosted over on the Wiki. For now, I’d like to share this info on the forum to get the ball rolling.

Skills & Tools Needed to Make and Contribute a Theme

  • A GitHub account and a basic understanding on how to fork a project contribute via Pull Request. 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.

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
9 Likes
Temas no RetroArch
NeoActive, RetroActive and Systematic Theme Support and Feedback
Playlists: "Custom System Name" without thumbnail
#2

Should this be added to docs?

#3

Sure, seems like a good thing to document.

1 Like
#4

Added pr https://github.com/libretro/docs/pulls

Looks like this https://github.com/thatman84/docs/blob/master/docs/guides/themes.md

1 Like
#5

Is there any way to change size of thumbnails on screen separately from menu scale factor? I want to change interface to minimum, but i want to keep big thumbnails.

#6

great guide…thank u… …but there is one thing I cannot figure out…HELP…:wink:

Is it possible - after closing a game - not to get the standard wallpaper bg.png and instead the dynamic one???

1 Like
#7

Honestly, that’s outside the spectrum of what I do with themes, which is constrained to icon and background design. It’s more of a UI behavior question that is likely better answered by @Kivutar. I’ve never noticed the behavior you’re describing, but one workaround you have would be to replace the bg.png with an all black image.

2 Likes
#8

I would like to convert next Philips CDI gamepad to default monochrome Retroarch style:

Philips CDI gamepad

Is it possible? Which tools? How to it?

#9

@Alex123 It is possible to use the linked artwork as a foundation to draw your own version of the CDi gamepad in the Monochrome style. Because monochrome’s source files are SVG, you need a vector-based application such as Inkscape or Illustrator to do the conversion. Using the Monochrome guidelines, you place the artwork on a 64x64 pixel canvas with a 4x4 pixel grid and set the icon’s color to #f2f2f2. Make sure you snap your point and line elements to the grid wherever possible. Once the artwork is complete, you can submit your contribution to the RetroArch Assets repository for review.

#10

English is not my mother tongue; please excuse any errors on my part. Great guide; I think it should be added a point about if it is or not fair to use the real brands (Atari, Phillips, Sega, etc) in the icons.

#11

I recommend not using logos on icons in your theme. It has nothing to do with whether it’s fair or legal to use the real brands, although I’m sure that’s a concern to other members of the Libretro team.

The largest the icons will display is currently 256x256, but most of the time, the icons are scaled down to a smaller size. That scaling effect makes logos on icons look very bad.

Take a look at the picture below. For my first theme, RetroActive, I wanted to do parody logos for the controllers and media. You wouldn’t know it by looking at the full size icons, but below the controller’s NEO•RETRO logo, it says “Pro-Gear Spec Advanced Emulation System.” All you see is a white blob. But when it’s scaled, the larger logos become almost impossible to read.

ng_scaled_sample

5 Likes
#12

Is there a way to get the Icons to be a little bit bigger? I wanted to create 300x300 size icons but they appeared the same size as the 256x256 sized icons.

#13

To my knowledge, the XMB icons are generally automatically scaled according to the screen size.

However, under User Interface | Appearance you can tweak the settings how you like. For example, on a small screen like the Vita, the Menu Layout setting called “handheld” looks much better on that screen than the “auto” or “console” setting. You can also adjust the Menu Scale Factor. This will increase the size of the both the icons and the fonts.

Long term, there are plans to add 512 and 1024 pixel icon sets to RetroArch and Lakka. But these things take time. The idea is for the icons to become more universally used within all the user interfaces, including Ozone, XMB, RGUI, etc.

1 Like
#14

did you make this cool image for neo geo? btw can you make system image for Apple II and also Apple IIGS

#15

I did make those icons for Neo Geo above. They are part of the Retroactive icon set.

There are system icons and media icons for Apple II and Apple IIGS in the Systematic icon set. Is this what you’re looking for?

1 Like
#16

hi they look amazing i will download them thanks so much :grinning: :joystick: :video_game: can you share download link with the full icon set

#17

The icons for all the themes are all contained at the retroarch-assets Github page. To download the whole repository, feel free to use this link.

The PNG files for all the themes can be found in the xmb directory. For SVGs, you’ll find them in Automatic/src, FlatUX/src, Systematic/src and /src/xmb directories…

#18

hi can you make art for commodore 128

#19

I will add it to my to-do list.

1 Like
#20

thats sounds great :slight_smile: