Theming

ThemeManager::apply() or ThemeManager::set()
  → ThemeManager notifies all Themeable subscribers
    → each component's onThemeApplied(const Theme&) is called
      → component re-styles itself from the new token values

// Switch to light theme
ml::ThemeManager::set(ml::LightTheme());

// Switch back to dark
ml::ThemeManager::set(ml::DarkTheme());

// Read a value from the active theme
const ml::Theme& t = ml::ThemeManager::get();
sf::Color bg = t.background;

#include <Malena/Malena.h>

struct NeonTheme : ml::Theme
{
    NeonTheme()
    {
        // Color roles
        primary      = sf::Color(0,   255, 180);   // bright cyan-green
        secondary    = sf::Color(0,   200, 255);   // electric blue
        surface      = sf::Color(10,  10,  20);    // near-black
        background   = sf::Color(5,   5,   15);
        onSurface    = sf::Color(220, 255, 245);   // light mint text
        onPrimary    = sf::Color(0,   0,   0);     // black on bright buttons
        onBackground = sf::Color(200, 240, 230);
        muted        = sf::Color(60,  100, 90);
        border       = sf::Color(0,   180, 130);
        borderFocus  = sf::Color(0,   255, 180);
        error        = sf::Color(255, 60,  100);
        success      = sf::Color(0,   255, 140);
        disabled     = sf::Color(20,  30,  25);
        onDisabled   = sf::Color(60,  100, 90);

        // Geometry
        radius           = 4.f;    // sharper corners
        spacing          = 6.f;
        borderThickness  = 1.f;
    }
};

ml::ThemeManager::set(NeonTheme());

#include <Malena/Malena.h>
#include "NeonTheme.h"

class GameManifest : public ml::Manifest
{
public:
    // One enum value per theme your app supports
    enum class Themes { Main, GameOver, Pause };

    // Register themes once at static-init time
    inline static const auto _ = []()
    {
        set(Themes::Main,     ml::DarkTheme());
        set(Themes::GameOver, NeonTheme());
        set(Themes::Pause,    ml::LightTheme());
        return 0;
    }();
};

// When the game ends:
ml::ThemeManager::apply<GameManifest>(GameManifest::Themes::GameOver);

// When the player pauses:
ml::ThemeManager::apply<GameManifest>(GameManifest::Themes::Pause);

// Back to the main theme:
ml::ThemeManager::apply<GameManifest>(GameManifest::Themes::Main);

void onLoad() override
{
    onMessage<bool>(GameEvent::GameOver, [](const bool&) {
        ml::ThemeManager::apply<GameManifest>(GameManifest::Themes::GameOver);
    });
}

#include <Malena/Malena.h>

class MyCard : public ml::ComponentWith<ml::DefaultManifest>,
               public ml::Themeable
{
public:
    MyCard()
    {
        _bg.setSize({200.f, 120.f});
        _label.setString("Hello");
        // Apply the current theme immediately on construction
        onThemeApplied(ml::ThemeManager::get());
    }

    void draw(sf::RenderTarget& target, sf::RenderStates states) const override
    {
        target.draw(_bg,    states);
        target.draw(_label, states);
    }

    void update() override {}

protected:
    void onThemeApplied(const ml::Theme& theme) override
    {
        if (isThemeLocked()) return;

        _bg.setFillColor(theme.surface);
        _bg.setOutlineColor(theme.border);
        _bg.setOutlineThickness(theme.borderThickness);
        _label.setFillColor(theme.onSurface);
        _label.setCharacterSize(theme.fontSize);
    }

private:
    sf::RectangleShape _bg;
    sf::Text           _label;
};

// Good — component base first, traits after
class MyWidget : public ml::ComponentWith<MyManifest>,
                 public ml::Themeable
{ ... };

// If you have multiple traits, list them in any order after the base
class MyPanel : public ml::ComponentWith<MyManifest>,
                public ml::Themeable,
                public ml::Draggable
{ ... };

// Lock — component keeps its current colors even if ThemeManager fires
myButton.lockTheme();

// Unlock — component will react to the next theme change
myButton.unlockTheme();

// Check state
if (myButton.isThemeLocked()) { ... }

// Block batch applySettings() — explicit setters still work
myToggle.lockSettings();

// Override a specific color directly (always works, regardless of locks)
myToggle.setTrackOnColor(sf::Color::Red);

myToggle.unlockSettings();

// Apply the global theme first, then lock and override one color
ml::ThemeManager::set(ml::DarkTheme());

myAccentButton.lockTheme();                        // freeze theme updates
myAccentButton.setFillColor(sf::Color(255, 80, 0)); // custom orange, persists