Customizing Argenmap's Visual Appearance

Argenmap separates its built-in assets from your customizations. Everything under src/styles/ ships with the application and should not be edited directly — doing so would be overwritten when you update Argenmap. Instead, place your overrides in src/config/styles/, which the application checks first. Any file found there takes precedence over its equivalent in src/styles/.

The easiest starting point is to copy the entire src/config/default/styles/ directory into src/config/styles/ and then modify the copies. This gives you a working baseline with the default IGN theme already in place.

File structure

The recommended directory layout inside src/config/styles/ is:

src/config/
└── styles/
    ├── css/
    │   └── main.css            ← CSS overrides (replaces src/styles/css/main.css)
    └── images/
        ├── logo.png            ← custom logo (reference path in preferences.json)
        ├── favicon.ico         ← custom browser tab icon
        └── legends/
            ├── argenmap.jpg    ← basemap legend image
            └── <LayerName>.svg ← per-layer legend images (name must match WMS layer name)

Argenmap does not require every directory or file to exist. Only create what you need to override.

CSS customization

Place your CSS overrides in src/config/styles/css/main.css. The application loads this file after its own styles, so any rule you define here wins over the defaults. The original stylesheet lives at src/styles/css/main.css — copy it from there (or from src/config/default/styles/css/main.css) as a reference for available class names and custom properties.

Example: overriding header and panel colors

The following main.css targets the same structural elements controlled by the theme block in preferences.json, but with full CSS flexibility:

/* src/config/styles/css/main.css */

/* Override the top header bar */
#header {
  background-color: #1a3a5c !important;
}

/* Override the layers panel background */
#panel-lateral {
  background-color: #1a3a5c !important;
}

/* Override the active layer highlight color */
.layer-active {
  background-color: #e84e0f !important;
}

/* Adjust the toolbar icon color */
.leaflet-control-toolbar a {
  color: #ffffff;
}

For simple color changes, prefer editing the theme block in preferences.json — it is faster and does not require knowing CSS class names. Use main.css when you need changes beyond color: fonts, spacing, borders, shadows, responsive breakpoints, etc.

Custom logo

The logo displayed in the header is configured entirely through preferences.json. Point logo.src and logo.srcLogoMini to image files you have placed in src/config/styles/images/:

"logo": {
  "title": "Mi Organización",
  "src": "src/config/styles/images/logo.png",
  "srcLogoMini": "src/config/styles/images/logo_mini.png",
  "height": "47px",
  "width": "200px",
  "style": "filter: drop-shadow(1px 1px 1px #103847);",
  "ministyle": "filter: drop-shadow(1px 1px 1px #103847); width: 128px;",
  "link": "https://www.miorganizacion.gob.ar/"
}

Field	Recommendation
`src`	Full-width logo for desktop; PNG or WebP with transparent background recommended.
`srcLogoMini`	Compact logo for mobile/portrait viewports; keep it under 128 px wide.
`height` / `width`	Set explicit values to prevent layout shift during load.
`style`	Use `filter: drop-shadow(…)` to add depth against dark header backgrounds.
`link`	Typically your organization’s homepage.

Logo image files should be placed in src/config/styles/images/ and referenced with that same path in preferences.json.

Legend images

Argenmap automatically looks for legend images in src/config/styles/images/legends/ using the WMS layer name as the filename. If a matching file is found, it is shown as the layer’s legend or preview image in the layers panel.

Image filenames are case-sensitive and must match the WMS Name element from the capabilities document exactly. A layer named area_protegida_070115 requires a file named area_protegida_070115.png (or .svg / .jpg) — not Area_Protegida_070115.png or any other variation.

Supported formats

Extension	Notes
`.png`	Best for icons and graphics with transparency.
`.svg`	Scalable — ideal for single-color icons and simple diagrams.
`.jpg` / `.jpeg`	Best for photographic previews; no transparency support.

Naming examples

WMS layer name	Expected legend file
`argenmap`	`legends/argenmap.jpg`
`area_protegida_070115`	`legends/area_protegida_070115.png`
`provincia_FA003`	`legends/provincia_FA003.svg`
`Centro`	`legends/Centro.png`

Basemap legend images are referenced directly in data.json via the legend field, so their filenames just need to match what you write there. Overlay-layer legend images, however, are discovered automatically by name — no configuration required.

Theme colors via preferences.json

As an alternative to CSS overrides, you can change the most visible interface colors by editing the theme block in preferences.json. No knowledge of CSS class names is needed — Argenmap reads these values at startup and injects them directly into the UI. The full theme block from src/config/default/preferences.json:

"theme": {
  "headerBackground": "#157DB9",
  "menuBackground": "#157DB9",
  "bodyBackground": "#0094d4",
  "activeLayer": "#33b560",
  "iconBar": "#4f4f4f",
  "btnColor": "#FFFFFF",
  "textLegendMenu": "#FFFFFF",
  "textLegendMenuStyle": "",
  "textMenu": "#FFFFFF",
  "textMenuStyle": ""
}

Field	Affects
`headerBackground`	Top bar background
`menuBackground`	Layers panel background
`bodyBackground`	Map body background (visible before tiles load)
`activeLayer`	Highlight on enabled layer buttons
`iconBar`	Toolbar icon color
`btnColor`	Button text and icon color
`textLegendMenu`	Legend panel text color
`textMenu`	General layers panel text color

See preferences.json for the complete field reference including textLegendMenuStyle and textMenuStyle for additional inline CSS on those text elements.

Applying changes

Create or edit your override file

Add or modify a file inside src/config/styles/. For CSS changes edit src/config/styles/css/main.css; for logo changes place your image in src/config/styles/images/ and update preferences.json.

Validate JSON if you edited preferences.json

Run your preferences.json through a JSON linter to catch any syntax errors before reloading.

Reload the browser

Hard-refresh (Ctrl+Shift+R / Cmd+Shift+R) to bypass the browser cache and pick up the new CSS and image assets.

Get Started

Configuration

Features

Contributing

Customizing Argenmap's Visual Appearance

File structure

CSS customization

Example: overriding header and panel colors

Custom logo

Legend images

Supported formats

Naming examples

Theme colors via preferences.json

Applying changes

Build docs developers (and LLMs) love

Get Started

Configuration

Features

Contributing

Documentation Index

​File structure

​CSS customization

​Example: overriding header and panel colors

​Custom logo

​Legend images

​Supported formats

​Naming examples

​Theme colors via preferences.json

​Applying changes

Build docs developers (and LLMs) love

File structure

CSS customization

Example: overriding header and panel colors

Custom logo

Legend images

Supported formats

Naming examples

Theme colors via preferences.json

Applying changes