Customizing Components

Fentrica web components are built to be easily customized and modified to fit your brand. All components are themed using CSS variables, configured via a global JavaScript object, and translated using i18next.

Theming with CSS Variables

CSS variables allow you to change colors, fonts, and backgrounds across all components without modifying source code. Set them on :root or scope them to a specific container.

Colors

Components have 9 default color palettes. Each color can be used through component color parameters (e.g. color="primary").

Layered Color Properties

Each color consists of six CSS variables — a base, contrast, shade, and tint — that must all be set together when overriding:

Example: Changing the secondary color to green

:root {
  --lar-color-secondary: #006414;
  --lar-color-secondary-rgb: 0, 100, 20;
  --lar-color-secondary-contrast: #ffffff;
  --lar-color-secondary-contrast-rgb: 255, 255, 255;
  --lar-color-secondary-shade: #005414;
  --lar-color-secondary-tint: #007414;
}

Default Color Values

Application Theme Variables

Global CSS variables that control the overall appearance:

Background & Text Color Steps

Background and text colors each have 20 stepped shades (from step-50 to step-1000 in increments of 50) used for layered surfaces and text opacity levels:

Example: Dark theme override

:root {
  --lar-background-color: #1a1a2e;
  --lar-background-color-step-50: #1f1f35;
  --lar-background-color-step-100: #24243c;
  --lar-text-color: #e0e0e0;
  --lar-font-family: 'Inter', sans-serif;
}

Backdrop & Effects

Node Component Variables

Nodes are the primary UI building blocks — each device control (switch, slider, sensor) renders as a node.

Node Box

Node Margins

Node Icon

Node Status Badge (Small Icon)

Node Typography

Node Camera / Video Overlay

Modal Variables

Button Variables

Badge Variables

List Variables

Icon Variables

Notification Variables

Push Button Variables

Global Configuration

Components use a global configuration object bound to window.Larva.config. This lets you control animations, date formats, and other runtime behavior.

Setting Configuration

Set default values before components are loaded:

window.Larva = {
  config: {
    animated: true,
    swipeBack: true,
  }
};

After components are loaded, the config object is converted to a getter/setter interface:

// Disable animations at runtime
window.Larva.config.set('animated', false);

// Read current value
window.Larva.config.get('animated'); // false

URL Query Overrides

Configuration can also be overridden via URL query parameters using the larva: prefix:

https://your-app.com/?larva:animated=false&larva:swipeBack=false

Configuration Properties

Translations

Components use i18next for internationalization. The i18next instance is bound to window.Larva.i18n, giving you full control over translations.

Adding Translations

window.Larva.i18n.addResourceBundle('en', 'namespace1', {
  key: 'hello from namespace 1'
});

Changing Language

window.Larva.i18n.changeLanguage('en', (err, t) => {
  if (err) return console.error('Language change failed:', err);
  console.log('Language changed successfully');
});

All component titles and labels pass through the i18next translation pipeline. To customize any text shown by a component, add the corresponding translation key to your resource bundle.

Default Translation Keys

The default English translation bundle contains all keys used by components. Use it as a reference when adding new languages or overriding specific labels:

View default English bundle