Themes

Pick one of the built-in themes, then adjust its colours with CSS variables.

Built-in themes

Every component takes a theme prop:

Theme	Look
light	Soft grey canvas, dark walls, pastel rooms (default)
dark	Near-black canvas, light walls, muted tinted rooms
blueprint	Classic blue blueprint with white double-line walls and a monospaced font
paper	Minimal: warm off-white floors, soft charcoal walls, furniture as fine grey lines
mist	Minimal: white floors on a cool grey ground, slate walls, blue-grey linework
ink	Minimal: pure white, black walls, hairline furniture, like an architect's drawing
graphite	Minimal, dark: graphite floors, light walls, quiet grey furniture

Vue

<FloorPlanViewer :plan="plan" theme="blueprint" />

React

<FloorplanViewer plan={plan} theme="blueprint" />

HTML

<floorplan-viewer theme="blueprint"></floorplan-viewer>
<!-- or as a property: viewer.theme = 'blueprint' -->

Try each theme on the hotel with the buttons above the demo:

Loading the live demo…

Minimal themes

paper, mist, ink and graphite are calm, near-monochrome looks for products where the plan should stay in the background:

• Every room has the same flat floor: no room colours and no floor patterns. Outdoor areas (grass) get a slightly different tone, and pools are only faintly tinted.
• Furniture, plants and add-on pack items are drawn in the theme's greys.
• In 3D the building becomes a matte "white model" (or a graphite one).
• Markers keep their own colours, so your data is the only colour on the plan.

Room colours and floor finishes stay in the plan data, so switching back to light or dark shows them again.

The same themes in 3D. Pick paper or ink to see the white model:

Loading the live demo…

CSS variables (2D components and panels)

All 2D colours come from CSS variables on the component's root element (.fp-root). Override them in your own CSS to match your brand. Your rule must be at least as specific as the theme class:

/* applies to every editor/viewer using the light theme */
.fp-root.fp-theme-light {
  --fp-accent: #0f766e;       /* tools, selection, handles */
  --fp-accent-2: #14b8a6;     /* gradient end, guides */
  --fp-wall: #1e293b;
  --fp-bg: #f8fafc;
  --fp-font: 'Your Font', sans-serif;
}

This works the same in every package. The React components and the HTML elements render into the page itself (no shadow DOM), so your stylesheet reaches them like any other element.

The minimal themes are separate classes (.fp-theme-paper, .fp-theme-mist, .fp-theme-ink, .fp-theme-graphite), so target the one you use. Or theme a single instance by giving it a class:

Vue

<FloorPlanViewer class="my-viewer" ... />

<style>
/* the class lands on the component's root element */
.fp-root.my-viewer { --fp-accent: #e11d48; }
</style>

React

<FloorplanViewer className="my-viewer" ... />

/* in your CSS: the class is on the <floorplan-viewer> element, around .fp-root */
.my-viewer .fp-root { --fp-accent: #e11d48; }

HTML

<floorplan-viewer class="my-viewer"></floorplan-viewer>

<style>
  /* the class is on the element, around .fp-root */
  .my-viewer .fp-root { --fp-accent: #e11d48; }
</style>

Most useful variables

Variable	Controls
--fp-bg, --fp-bg-image	Canvas background colour and gradient
--fp-grid-minor, --fp-grid-major	Grid lines
--fp-wall, --fp-wall-outline	Wall fill and outline
--fp-room-opacity	How strongly room colours show
--fp-pattern, --fp-grass-blade	Floor texture lines, grass blades
--fp-gap	Colour of door/window openings
--fp-furn-fill, --fp-furn-fill-2, --fp-furn-stroke, --fp-furn-accent	Furniture
--fp-plant, --fp-plant-2, --fp-plant-3	Plants
--fp-pool-mosaic-a / -b, --fp-pool-plaster-a / -b, --fp-pool-slate-a / -b	Pool water, shallow (-a) to deep (-b), per finish
--fp-pool-coping, --fp-pool-ripple, --fp-pool-glass	Pool edge, ripples, glass sides
--fp-label, --fp-label-muted, --fp-halo	Room labels
--fp-accent, --fp-accent-2, --fp-accent-soft, --fp-on-accent	Interaction colours
--fp-pin-color	Default marker colour
--fp-panel-bg, --fp-panel-border, --fp-panel-shadow	Floating glass panels
--fp-text, --fp-text-muted	Panel text
--fp-font, --fp-radius	Font family and panel corner radius

The full list is at the top of the package's stylesheet (style.css).

Room colours

Rooms without a color use a built-in pastel palette (ROOM_PALETTE). Grass areas use GRASS_COLOR. Set room.color to any CSS colour to override it. The minimal themes ignore room colours and use --fp-room-flat (indoor) and --fp-room-outdoor (grass) instead.

3D colours

The 3D viewer draws with WebGL, so its colours come from the THEMES_3D object instead of CSS variables. THEMES_3D is exported from each package's /3d entry (@jbaysolutions/floorplan-vue/3d, @jbaysolutions/floorplan-react/3d, @jbaysolutions/floorplan-elements/3d). See 3D viewer → Customising 3D colours. The floating panels in the 3D viewer still use the CSS variables above.

Reduced motion

If the user's system has "reduce motion" turned on, animations and transitions are switched off automatically.