4,620
edits
Changes
→Themes
= Themes =
= Themes =
Themes can be optionally loaded from SD "/config/nx-hbmenu/themes/". The theme (or the default) can be selected using the Theme Menu via the - button. This uses [https://hyperrealm.github.io/libconfig/libconfig_manual.html libconfig]. Default settings will be used for any settings not specified in the theme (including themeInfo).
Themes can be optionally loaded from SD "/config/nx-hbmenu/themes/". The theme (or the default) can be selected using the Theme Menu via the - button. This uses [https://hyperrealm.github.io/libconfig/libconfig_manual.html libconfig]. Default settings will be used for any settings not specified in the theme (including themeInfo).
The file extension is .cfg. Git-only: .romfs is also supported. This is RomFs. With the [[Setting_up_Development_Environment|toolchain]] setup you can run the following to build a .romfs: <code>build_romfs {input directory} {out name}.romfs</code>. The .romfs (and therefore the input directory) contains: '/theme.cfg', optionally '/icon.jpg' for the menu-entry in Theme Menu, and any assets.
See [[Homebrew Themes]] for a list of themes.
See [[Homebrew Themes]] for a list of themes.
The color fields are RGBA.
The color fields are RGBA.
Sample theme file (.cfg file extension):
Sample theme file:
themeInfo={
themeInfo={
layout={ // git-only
layout={ // git-only
<object name> = {
<object name>={
visible=true;
visible=true;
posType=true;
posType=true;
// Any other objects here.
// Any other objects here.
};
assets={ // git-only
<object name>={
path = "relative_path_in_romfs";
imageSize = (256,256);
};
// Any other objects here.
};
};
The 'layout' group is optional. Each group within this is for a layout object, these and the settings contained within the objects are all optional (defaults are used when not specified). How each setting in the layout objects' are handled are specific to each object. The 'visible' field controls whether the object is displayed, however this is ignored from config for some objects / unused for certain other objects. posType controls the handling for pos* fields: generally this does nothing, however with some objects this controls whether the pos is absolute (false) / relative to {base-pos} or special-handling (true). When posType is absolute the pos* fields must not be negative. The content of 'size' must not be negative.
The 'layout' group is optional. Each group within this is for a layout object, these and the settings contained within the objects are all optional (defaults are used when not specified). How each setting in the layout objects' are handled are specific to each object. The 'visible' field controls whether the object is displayed, however this is ignored from config for some objects / unused for certain other objects. posType controls the handling for pos* fields: generally this does nothing, however with some objects this controls whether the pos is absolute (false) / relative to {base-pos} or special-handling (true). When posType is absolute the pos* fields must not be negative. The content of 'size' must not be negative.
Note that increasing *Wave height compared to the defaults can result in slowdown since sw-rendering is used.
Layout objects:
{| class="wikitable" border="1"
{| class="wikitable" border="1"
|-
|-
! Object name
! Layout object name
! Description
! Description
! 'visible' from config ignored / field used
! 'visible' from config ignored / field used
|-
|-
| msgBoxBottomText || Message-box text displayed at the bottom below the separator. Position is relative to the bottom of the box. || No, No || posStart[1]
| msgBoxBottomText || Message-box text displayed at the bottom below the separator. Position is relative to the bottom of the box. || No, No || posStart[1]
|-
| backgroundImage || Background image, not set with the defaults. Requires assets.background_image to be setup. This is drawn after backgroundColor, the maximum drawn y-pos is the same as backgroundColor (drawing where the waves are located is skipped). Note that this can result in slowdown since sw-rendering is used, especially with an image which covers the entire screen (besides where the waves are displayed). || No, Yes || posStart
|-
|-
| backWave || Back wave. The height is controlled by size[1], relative to the bottom of the screen. || No, Yes || size[1]
| backWave || Back wave. The height is controlled by size[1], relative to the bottom of the screen. || No, Yes || size[1]
| menuActiveEntryVersion || Version text for the currently active menu entry. || No, Yes || posStart
| menuActiveEntryVersion || Version text for the currently active menu entry. || No, Yes || posStart
|-
|-
|}
The 'assets' group is optional, it is only used with .romfs themes. The 'path' and 'imageSize' settings are required. imageSize[0-1] must be >0, and <= 1280x720. For some objects, the imageSize must match the internal imageSize for certain layout objects. The 'path' is the file-path to load the asset from, this is relative to "{mount-name}:/". imageSize is the size of the image, for non-.bin this must match the image size for the loaded file.
When an asset object is not specified, the settings are invalid, or loading the file fails, the default asset is used (if any).
The 'path' must have one of the below extensions:
* ".bin": Raw image without a header (the default images also use this). imageSize directly controls the size to load from here, the filesize must match width*height*{pixel-byte-size}.
* ".jpg"/".jpeg": JPEG, if you need transparency use PNG instead.
* ".png": PNG, background-color is black(all-zero) when the input PNG uses alpha and the target format is RGB24.
The pixel formats listed below are the formats used internally, the image-loading libraries handle converting the image to the required format where needed (except for .bin which uses the listed format directly).
Asset objects:
{| class="wikitable" border="1"
|-
! Layout object name
! Description
! Pixel format
! Only alpha component is used, with RGB from textColor used instead
! Size which the imageSize must match, from the internal layout object field
|-
| battery_icon || Battery icon. || RGBA32 || Yes || None
|-
| charging_icon || Battery charging icon. || RGBA32 || Yes || None
|-
| folder_icon || Folder/directory icon. || RGB24 || No || 256x256
|-
| invalid_icon || Icon displayed when loading the app's icon failed. || RGB24 || No || 256x256
|-
| theme_icon_dark || Default icon displayed in the Theme Menu for darkTheme. || RGB24 || No || 256x256
|-
| theme_icon_light || Default icon displayed in the Theme Menu for lightTheme. || RGB24 || No || 256x256
|-
| airplane_icon || Icon displayed when nifmGetInternetConnectionStatus fails. || RGBA32 || Yes || None
|-
| wifi_none_icon || Icon displayed for wifi with signal strength 0. || RGBA32 || Yes || None
|-
| wifi1_icon || Icon displayed for wifi with signal strength 1. || RGBA32 || Yes || None
|-
| wifi2_icon || Icon displayed for wifi with signal strength 2. || RGBA32 || Yes || None
|-
| wifi3_icon || Icon displayed for wifi with signal strength 3. || RGBA32 || Yes || None
|-
| eth_icon || Icon displayed when connected to the Internet via Ethernet. || RGBA32 || Yes || None
|-
| eth_none_icon || Icon displayed when using Ethernet, with no Internet connection. || RGBA32 || Yes || None
|-
| background_image || Background image. Optional, not set with the defaults. See layout.backgroundImage. || RGB24 || No || None
|}
|}