Theming

Bazaar ships dashboard presets under config/bazaar/themes/. Each preset is a pair of files:

<name>.json for tokens and layout defaults
<name>.css for stylesheet overrides

The active preset is selected in config/bazaar/web-theme.conf. You can switch it in game with /bazaar admin theme set <name> and reload from disk with /bazaar admin theme reload.

Shipped Presets

The bundled assets currently include these preset IDs:

battle-frontier-ops
bloomberg-terminal
cosmic-purple
goldenrod-department
kingdom-quest-board
midnight-market
mystery-dungeon-board
neon-arcade
network-launcher
oak-laboratory
pokedex-industrial
pokemon-center
rotom-dex
skyblock-exchange
team-rocket

web-theme.conf

preset = "pokedex-industrial"

overrides {
  colors {
    accent = "#ffb020"
  }
}

layout {
  navigation {
    style = "sidebar-icons"
  }
  listings {
    defaultView = "table"
  }
}

customCss = null

Field	Purpose
`preset`	Base preset file name, without the extension.
`overrides`	Token overrides merged on top of the selected preset JSON.
`layout`	Layout-specific overrides merged on top of the preset’s own layout settings.
`customCss`	Extra CSS appended after the preset stylesheet.

Authoring a Preset

Create config/bazaar/themes/my-theme.json:

{
  "name": "My Theme",
  "description": "Custom Bazaar preset",
  "stylesheet": "my-theme.css",
  "branding": { "serverName": "Bazaar" },
  "colors": {
    "background": "#101218",
    "surface": "#171a21",
    "accent": "#ff8f3d",
    "text": "#f5f7fa"
  },
  "typography": {
    "fontFamily": "'JetBrains Mono', system-ui, sans-serif",
    "monoFamily": "'JetBrains Mono', monospace",
    "headingWeight": "700"
  },
  "effects": {
    "cardStyle": "flat",
    "density": "comfortable",
    "mode": "dark"
  },
  "navigation": { "style": "sidebar-icons" },
  "listings": { "defaultView": "table" },
  "analytics": { "style": "balanced", "columns": 2 },
  "profile": { "style": "tabs" }
}

Optional CSS lives in config/bazaar/themes/my-theme.css:

[data-theme="my-theme"] {
    --color-accent: #ff5277;
}

[data-theme="my-theme"] .listing-card {
    border: 2px solid var(--color-accent);
}

The shipped presets are the best reference for the full JSON shape. Inspect them before inventing new top-level sections.

Applying Changes

/bazaar admin theme set my-theme switches the active preset.
/bazaar admin theme reload re-reads web-theme.conf and the files under themes/.
Edit customCss in web-theme.conf when you want one-off polish without creating a new preset.

Hard-refresh the browser if your CSS looks cached.