Documentation Index
Fetch the complete documentation index at: https://mintlify.com/spatialillusions/milsymbol/llms.txt
Use this file to discover all available pages before exploring further.
Milsymbol uses a color mode system to map symbol affiliation to fill color. Rather than hard-coding a single color per symbol, a ColorMode object is a named palette that defines one color for each of the six possible affiliations: Civilian, Friend, Hostile, Neutral, Unknown, and Suspect. When a symbol is rendered, milsymbol looks up the affiliation of the SIDC and reads the matching color from the active mode. This means you can switch the entire visual vocabulary of your map from a light theme to a dark theme by changing a single string.
Affiliation-to-Color Mapping
Military standards assign colors to affiliations. Milsymbol follows MIL-STD-2525 / APP-6 conventions by default:
| Affiliation | Standard color | Meaning |
|---|
| Friend | Blue | Allied or own forces |
| Hostile | Red | Enemy forces |
| Neutral | Green | Neither hostile nor friendly |
| Unknown | Yellow | Affiliation not yet established |
| Civilian | Purple | Non-military civilian entities |
| Suspect | Amber | Potentially hostile; confirmed in 2525E |
Built-In Color Modes
When milsymbol initialises, nine color modes are registered automatically. You can use any of their names as the colorMode string option:
| Name | Description |
|---|
Light | Bright, pastel-style fill colors — the default mode |
Medium | Saturated mid-tone colors; good contrast on light backgrounds |
Dark | Deep, muted colors suited to dark-themed map canvases |
FrameColor | The exact frame-outline colors; useful for unframed symbols |
IconColor | Bright, fully-saturated colors for icon strokes |
Black | All affiliations render black — for single-color printing |
White | All affiliations render white |
OffWhite | rgb(239,239,239) for all affiliations; used for white icon parts |
None | false for all affiliations — transparent / no fill |
Light, Medium, and Dark RGB Values
The following RGB values are taken directly from src/colormodes.js:
Light (default)
Medium
Dark
// src/colormodes.js — Light
{
Civilian: "rgb(255,161,255)", // pale purple
Friend: "rgb(128,224,255)", // light blue
Hostile: "rgb(255,128,128)", // light red
Neutral: "rgb(170,255,170)", // light green
Unknown: "rgb(255,255,128)", // light yellow
Suspect: "rgb(255,229,153)", // pale amber
}
// src/colormodes.js — Medium
{
Civilian: "rgb(128,0,128)", // medium purple
Friend: "rgb(0,168,220)", // medium blue
Hostile: "rgb(255,48,49)", // medium red
Neutral: "rgb(0,226,110)", // medium green
Unknown: "rgb(255,255,0)", // yellow
Suspect: "rgb(255,217,107)", // medium amber
}
// src/colormodes.js — Dark
{
Civilian: "rgb(80,0,80)", // dark purple
Friend: "rgb(0,107,140)", // dark blue
Hostile: "rgb(200,0,0)", // dark red
Neutral: "rgb(0,160,0)", // dark green
Unknown: "rgb(225,220,0)", // dark yellow
Suspect: "rgb(255,188,1)", // amber
}
Setting the Color Mode on a Symbol
Pass the mode name as the colorMode style option when constructing a symbol, or update it later with setOptions():
// Light fill (default)
const sym1 = new ms.Symbol("SFG-UCI----D", { colorMode: "Light" });
// Dark fill for a dark-map theme
const sym2 = new ms.Symbol("SFG-UCI----D", { colorMode: "Dark" });
// Switch a live symbol to Medium
sym1.setOptions({ colorMode: "Medium" });
// Pass a ColorMode object directly instead of a string
const myMode = ms.ColorMode(
"purple", "blue", "red", "green", "yellow", "orange"
);
const sym3 = new ms.Symbol("SFG-UCI----D", { colorMode: myMode });
ms.ColorMode() — Creating a Custom Palette
ms.ColorMode(civilian, friend, hostile, neutral, unknown, suspect) constructs a plain ColorMode object. The arguments are CSS color strings (keywords, rgb(...), hex, etc.) in affiliation order:
// Function signature (from index.d.ts)
ms.ColorMode(
civilian: string,
friend: string,
hostile: string,
neutral: string,
unknown: string,
suspect: string
): ColorMode
{
Civilian: string,
Friend: string,
Hostile: string,
Neutral: string,
Unknown: string,
Suspect: string
}
Example — High-Contrast Custom Mode
import ms from "milsymbol";
// Create a high-contrast mode suitable for printed maps
const printMode = ms.ColorMode(
"#cc00cc", // Civilian
"#003399", // Friend
"#cc0000", // Hostile
"#007700", // Neutral
"#999900", // Unknown
"#cc6600" // Suspect
);
const sym = new ms.Symbol("SFG-UCI----D", {
colorMode: printMode,
size: 60,
});
ms.setColorMode(name, colormode) — Registering a Mode Globally
Register a named color mode so you can reference it by string across all symbol instances:
// Signature
ms.setColorMode(name: string, colormode: ColorMode): ColorMode
// Register "Print" globally
const printMode = ms.ColorMode(
"#cc00cc", "#003399", "#cc0000", "#007700", "#999900", "#cc6600"
);
ms.setColorMode("Print", printMode);
// Now any symbol can use the name string
const sym = new ms.Symbol("SFG-UCI----D", { colorMode: "Print" });
setColorMode with the name of a built-in mode (e.g. "Light") overrides that mode globally for the session.
ms.getColorMode(name) — Retrieving a Registered Mode
// Signature
ms.getColorMode(mode: string): ColorMode
const light = ms.getColorMode("Light");
console.log(light.Friend); // "rgb(128,224,255)"
const dark = ms.getColorMode("Dark");
console.log(dark.Hostile); // "rgb(200,0,0)"
// Clone Light and desaturate Unknown
const softMode = { ...ms.getColorMode("Light") };
softMode.Unknown = "rgb(230,230,180)";
ms.setColorMode("Soft", softMode);
Full Custom Mode Workflow
Create the ColorMode object
const nightMode = ms.ColorMode(
"rgb(120, 0, 120)", // Civilian
"rgb(0, 80, 160)", // Friend
"rgb(160, 0, 0)", // Hostile
"rgb(0, 120, 0)", // Neutral
"rgb(160, 160, 0)", // Unknown
"rgb(180, 100, 0)" // Suspect
);
Register it with a name
ms.setColorMode("Night", nightMode);
Use it on symbols
const sym = new ms.Symbol("130310001412110000000000000000", {
colorMode: "Night",
size: 40,
});
document.body.appendChild(sym.asDOM());
Additional Color Options
civilianColor
When true (the default), civilian symbols use the Civilian key of the active color mode instead of the affiliation color:
// Default: civilian symbols show purple
const sym = new ms.Symbol("SFGPUCI---E", { civilianColor: true });
// Disable: civilian symbols use the standard affiliation color (e.g. blue for Friend)
const sym2 = new ms.Symbol("SFGPUCI---E", { civilianColor: false });
monoColor
Setting monoColor switches the symbol to a single-color unstroked rendering — useful for icon legends or accessibility modes:
// Render entire symbol in black — no fill, just outline color
const sym = new ms.Symbol("SFG-UCI----D", {
monoColor: "black",
size: 40,
});
// Dark grey monochrome
const sym2 = new ms.Symbol("SHG-UCI----D", {
monoColor: "rgb(60,60,60)",
size: 40,
});
monoColor is set, fill is forced to false internally and colorMode is ignored.
fillColor
fillColor accepts any CSS color string and overrides the fill for the symbol frame — bypassing the affiliation lookup in the active color mode entirely:
// Force all symbols to teal regardless of affiliation
const sym = new ms.Symbol("SFG-UCI----D", {
fillColor: "teal",
size: 40,
});
Use colorMode when you want affiliation-aware coloring (the standard
military convention). Use fillColor only when you need a direct override
that ignores affiliation — for example, rendering a cluster icon in your
app’s brand color rather than a tactical color.
frameColor and iconColor
Both accept either a ColorMode object or a CSS string:
// Custom frame outline color
const sym = new ms.Symbol("SFG-UCI----D", {
colorMode: "Light",
frameColor: ms.ColorMode("black","black","black","black","black","black"),
iconColor: ms.ColorMode("black","black","black","black","black","black"),
});
