Theming and Branding
Customise every visual aspect of your published documentation with 120+ CSS colour variables, light and dark theme support, custom icon upload for logos and brand marks, and per-component styling overrides. The published site reflects your organisation's brand identity, not the tool's default appearance.
Architecture documentation represents your organisation. When you share a documentation site with stakeholders, clients, or partners, it should look like it belongs to your organisation, not to the tool that generated it. NeoArc Studio's theming system gives you complete control over the visual identity of your published output through 120+ CSS colour variables, custom icons, and theme-level configuration.
120+ CSS Colour Variables
Every colour in the published viewer is controlled by a CSS variable that you can override. Variables are organised by component and purpose, covering every visual element from page backgrounds to individual content block borders.
Light and Dark Themes
Two complete themes are included as starting points. Each theme defines all 120+ colour variables with values tuned for its context.
Custom Icons
Upload SVG icons for your organisation's logo, product marks, and custom symbols. Custom icons are available everywhere standard icons appear: navigation, card grids, content blocks, and infographic elements. Each custom icon is stored with a custom:id reference and renders using the original SVG markup for pixel-perfect display.
Theme Configuration
Theme settings are defined in the site settings file and apply to all published output.
What Gets Themed
Theme variables affect every visual element in the published output.
| Element | What You Can Customise |
|---|---|
| Page Layout | Background colour, content area width, sidebar width, border colours |
| Navigation | Top bar colours, sidebar colours, active/hover states, mobile menu |
| Content Blocks | Every content block type respects theme variables for backgrounds, borders, text, and accents |
| Code Blocks | Background, text colour, border, syntax highlighting base colours |
| Callouts | Background and border colours for each variant (info, warning, tip, danger) |
| Tables | Header background, stripe colour, border colour, text colour |
| Cards | Background, border, shadow, icon colour, title colour |
| Diagrams | Diagrams respect the current theme (light/dark) for element rendering |
| Search | Input styling, result highlighting, keyboard navigation indicators |
| Visualisation Blocks | Path colours are per-block, but container styling follows the theme |
Marketing Home Sections
The documentation home page supports six section types for creating landing page experiences: hero banners, feature grids, call-to-action buttons, graph-links, diagrams, and graph-diagram sections. Each section type is individually themed and styled, allowing you to create a professional landing page that introduces your documentation with visual impact.
Publish architecture documentation as a fully featured static website with server-side rendered HTML, built-in full-text search, automatic navigation, SEO metadata including Open Graph and JSON-LD, responsive design, and two deployment modes: local file system browsing and hosted web server deployment with clean URLs.
Specialised content blocks across a range of categories, designed specifically for architecture documentation. Decision blocks, risk registers, requirements matrices, testing frameworks, operational runbooks, planning tools, reference tables, and integration documentation, each with purpose-built structure and professional styling that renders identically in web and PDF output.
NeoArc Studio produces architecture documentation that looks as good as enterprise websites. Animated diagrams, scroll-driven presentations, a full infographic design system, professional PDF publishing, static website generation, styled content blocks, D3 visualisation layouts, and complete theme customisation, all from the same source content.