Compatibility systems

Dark mode and RTL starter

Version 1.2 adds a persistent system-aware colour scheme and a logical-property RTL layer without duplicating the entire template.

Dark mode

The bootstrap script applies a saved or system colour scheme before first paint. The toggle is mounted by assets/js/theme-mode.js. Replace token values in assets/css/theme-mode.css to match a client brand.

RTL

Open pages/home-plumbing-rtl.html for the complete demonstration. Load assets/css/rtl.css after the shared styles and set dir="rtl" on the root HTML element. Directional icons and comparison behavior should be reviewed whenever new components are added.

Translation checklist

Translate visible labels, metadata, validation copy, structured data, image alternative text and form confirmation messages. Test long labels, keyboard order, carousel direction and screen-reader announcements.