Theming and banners

A theme is a stylesheet that overrides MenuAPI's colours, radius, shadow and font. A banner is an image file that replaces the picture at the top of a menu.

ThemesCopy Anchor Link

Your stylesheet loads after MenuAPI's, so it wins on equal specificity without !important. Tokens you do not set keep their default.

Themes are for recolouring the menu, moving or resizing it is not supported. The instructional buttons are the exception, their sizes and spacing are tokens too.

Write oneCopy Anchor Link

/* themes/midnight.css */

#menuapi {
  --menuapi-rows-bg: rgb(12 18 38 / 82%);
  --menuapi-row-selected-bg: rgb(84 148 255 / 92%);
  --menuapi-row-selected-text: rgb(255 255 255);
}

The #menuapi selector is required, the tokens live there. Add the folder to fxmanifest.lua:

files {
    'index.html',
    'menuapi/**/*',

    'themes/**/*',
}

Apply itCopy Anchor Link

NuiTuning.RegisterTheme("midnight", "themes/midnight.css");
NuiTuning.RegisterTheme("sunset", "themes/sunset.css");

NuiTuning.SetTheme("midnight");
NuiTuning.SetTheme("sunset");   // hot swap, applies next frame
NuiTuning.SetTheme(null);       // default look

Paths are relative to your index.html. The new sheet loads before the old one is dropped, so a swap never flashes.

For one fixed theme, skip the C# and add a <link> to index.html after MenuAPI's two stylesheets.

TokensCopy Anchor Link

Defaults are the game's own values.

Shape, shadow, fontCopy Anchor Link

The banner title font is not themeable, because each title font has its own measured size and offset. Use Menu.MenuTitleFont.

SubtitleCopy Anchor Link

--menuapi-freemode replaces --menuapi-subtitle-text on a freemode subtitle.

RowsCopy Anchor Link

Banner, slider, descriptionCopy Anchor Link

Stats panelsCopy Anchor Link

Colour picker panelCopy Anchor Link

Instructional buttonsCopy Anchor Link

The button hints in the bottom right have their own element, so these tokens go on #menuapi-buttons instead of #menuapi. The defaults copy the game's own button bar. The same theme file can hold both, and the hints keep the theme even while no menu is open.

#menuapi-buttons {
  --menuapi-buttons-bg: rgb(12 18 38 / 90%);
  --menuapi-buttons-radius: 12px;
  --menuapi-buttons-key-bg: rgb(84 148 255);
  --menuapi-buttons-key-text: rgb(255 255 255);
  --menuapi-buttons-item-direction: row-reverse;
}

The bar

Each hint

Text

Keyboard keys

Controller and mouse

Everything else

Out of reachCopy Anchor Link

Colours set from C# are inline styles and always beat the theme. That covers MenuItem text colour and MenuSliderItem.BackgroundColor / BarColor. Stop setting them in C# if the theme should own them.

BannersCopy Anchor Link

Both routes use the menuapi-banners folder next to your fxmanifest.lua. Do not put it inside menuapi, that folder is rewritten on every build.

files {
    'menuapi-banners/**/*',
}

Replace a game spriteCopy Anchor Link

Name the file after the sprite: the dictionary is the folder, the texture is the file name. Every menu drawing that sprite picks it up, no C# needed.

menuapi-banners/commonmenu/interaction_bgd.png    <- the default banner
menuapi-banners/my_textures/my_banner.png         <- a Menu.HeaderTexture you set

Point one menu at your own imageCopy Anchor Link

Set Menu.HeaderImage to any name. The extension is optional.

Menu menu = new Menu("Outlaws", "Gang menu") { HeaderImage = "outlaw" };

menu.HeaderImage = "gangs/outlaw";   // subfolders are fine
menu.HeaderImage = null;             // back to whatever it would have shown

An image in another resourceCopy Anchor Link

An http, https or nui url is used as is, so the banner can live in another resource. It still has to be in that resource's files. Anything else is a name inside menuapi-banners.

menu.HeaderImage = "https://cfx-nui-my-theme-pack/banners/outlaw.png";

Resolution orderCopy Anchor Link

First one that exists on disk wins:

1. Menu.HeaderImage
2. An image named after the game sprite
3. The game sprite

A missing file falls through, so a typo leaves the old banner instead of an empty header.

FilesCopy Anchor Link

.png, .jpg, .webp, tried in that order. Use png for transparency.

The banner is 500x110 at 1080p and the image is stretched to fill, so use roughly 1000x220 and keep that aspect ratio.

A menu created with a null title has no banner to replace.

When something is wrongCopy Anchor Link

The default banner is resolved at page load. Others resolve the first time a menu using them opens, then are cached for the life of the page.