Custom Themes

Sonolus Reverse allows you to create and import custom themes.

How it works

1. Write a theme JSON file by template
2. Import it through the mod's settings or copy it manually
3. The theme appears in Sonolus theme selector

Themes are loaded from <PersistentDataPath>/CustomThemes/*.json at startup or you can click refresh button in Mod Section

JSON Format

{
    "Id": "my_theme",
    "Title": "My Custom Theme", 
    "Colors": {
        "MainSurface": "#2B3B30",
        "MainBackground": "#1E2326",
        "MainBackgroundAltFirst": "#1E2326",
        "MainBackgroundAltSecond": "#232A27",
        "MainSuccess": "#A7C080",
        "MainWarning": "#E67E80",
        "TextNormal": "#D3C6AA",
        "TextDisabled": "#D3C6AA40",
        "ButtonNormal": "#A7C08040",
        "ButtonHighlighted": "#A7C08080",
        "ButtonPressed": "#A7C08020",
        "ButtonDisabled": "#A7C08010"
    },
    "ImagesUrl": {
        "Thumbnail": "https://example.com/thumbnail.png",
        "Background": "https://example.com/background.png"
    }
}

Fields

Field	Type	Description
Id	string	Unique identifier. A sr_custom_ prefix is added automatically
Title	string	Display name in the theme selector
Colors.MainSurface	HEX	Main surface color
Colors.MainBackground	HEX	Main background color
Colors.MainBackgroundAltFirst	HEX	First alternate background. Used for gradient in Main Menu
Colors.MainBackgroundAltSecond	HEX	Second alternate background. Used for gradient in Main Menu
Colors.MainSuccess	HEX	Success color
Colors.MainWarning	HEX	Warning color
Colors.TextNormal	HEX	Primary text color
Colors.TextDisabled	HEXA	Disabled text color.
Colors.ButtonNormal	HEXA	Default button color
Colors.ButtonHighlighted	HEXA	Highlighted button color
Colors.ButtonPressed	HEXA	Pressed button color
Colors.ButtonDisabled	HEXA	Disabled button color
ImagesUrl.Thumbnail	URL	Theme thumbnail. Can be empty string
ImagesUrl.Background	URL	Theme background. Can be empty string

• HEXA - Hex with alpha (e.g #A7C08010)

Source

https://github.com/repinek/SonolusReverse/blob/master/src/mod/data/ThemeLoader.ts