What's the Difference Between template.html, template-dark.html, and template-full.html?

template.html is a minimal light-theme diagram scaffold, template-dark.html is its dark-mode counterpart with swapped color variables, and template-full.html adds a comprehensive UI layer with headers, cards, and footers for architecture documentation.

All three HTML templates live in skills/diagram-design/assets/ within the cathrynlavery/diagram-design repository. They provide the foundational structure for exporting SVG-based diagrams, but each serves a distinct workflow—from quick personal sketches to polished technical documentation.

Theme and Visual Design Differences

The most immediate distinction between these templates is their visual theme and design system scope.

Light vs. Dark Color Schemes

template.html and template-dark.html share identical markup structure but invert their color tokens. This creates a clean "theme-swap" pattern that the repository extends for environment-specific rendering.

• template.html (light): Paper background #f5f5f5 with dark ink #2d3142
• template-dark.html (dark): Paper background #2d3142 with light ink #f5f5f5

Both use a minimal CSS variable set defined in lines 10–18:

<!-- template.html -->
<style>
  :root {
    --color-paper:   #f5f5f5;
    --color-ink:     #2d3142;
    --color-muted:   #4f5d75;
    --color-accent:  #eb6c36;
  }
</style>

<!-- template-dark.html -->
<style>
  :root {
    --color-paper:   #2d3142;
    --color-ink:     #f5f5f5;
    --color-muted:   #bfc0c0;
    --color-accent:  #f08a59;
  }
</style>

Extended Color System in template-full.html

template-full.html expands the design token palette for richer, multi-layered interfaces. Lines 11–26 define additional variables:

<style>
  :root {
    --color-paper:       #f5f5f5;
    --color-paper-2:     #ececec;
    --color-ink:         #2d3142;
    --color-muted:       #4f5d75;
    --color-soft:        #7a8399;
    --color-rule:        rgba(45,49,66,0.12);
    --color-link:        #2e5aa8;
    /* …additional variables… */
  }
</style>

Structural and Layout Differences

Beyond color, the templates diverge significantly in HTML hierarchy and component architecture.

Minimal Structure: template.html and template-dark.html

Both minimal templates use a simple <div class="frame"> containing:

• An eyebrow label
• A title
• The SVG canvas

No additional UI elements exist beyond the diagram area. This structure appears in both files with identical class names, ensuring interchangeable styling through CSS variables alone.

Full-Featured Architecture: template-full.html

template-full.html implements a layered design system with distinct layout components:

<div class="container">
  <header>
    <p class="header-eyebrow">Architecture · [Date]</p>
    <h1>[Project Name]</h1>
    <p class="subtitle">[One-sentence description...]</p>
  </header>
  
  <div class="diagram-container">
    <!-- SVG canvas here -->
  </div>
  
  <div class="cards">
    <!-- Optional info cards -->
  </div>
  
  <div class="footer">
    <!-- Footer text -->
  </div>
</div>

This template adds:

• Header with eyebrow, title, and subtitle
• Legend component for diagram notation
• Card components for contextual information
• Footer for attribution or versioning

Customization Points and Intended Usage

Template	Placeholders	Best For
template.html	[Type], [Diagram title], [diagram-slug]	Quick, clean exports of single diagrams; personal sketches
template-dark.html	Same as light template	Presentations in dark rooms; dark-mode documentation
template-full.html	Above plus header eyebrow, subtitle, card titles, legend entries, footer text	Architecture documentation; generated technical overviews; stakeholder presentations

SVG Consistency Across All Templates

Despite their structural differences, all three templates maintain identical SVG canvas definitions:

• Standard viewBox: 0 0 1000 600 or 0 0 1000 700

This ensures diagrams render consistently regardless of which template wrapper you choose. The SVG scaling logic remains portable—you can switch templates without redrawing your diagram.

Key Architectural Patterns

The three-file organization demonstrates two important patterns from the cathrynlavery/diagram-design source code:

1. Theme isolation through CSS variables: The dark template proves you can support multiple themes without duplicating markup—only :root values change.

2. Progressive enhancement via template variants: Rather than conditional logic in a single file, the repository provides explicit template choices. This simplifies automation (scripted exports can select template-full.html for architecture docs, template.html for quick shares) and makes customization predictable.

Summary

• template.html provides a minimal light-theme scaffold with four core CSS variables and a single-frame layout—ideal for fast, uncluttered diagram exports.

• template-dark.html is a theme-swapped twin using identical HTML structure but inverted color tokens for dark environments.

• template-full.html delivers a comprehensive documentation template with expanded design tokens, header/subtitle components, optional cards, legend support, and footer elements—suited for architecture documentation and presentations.

All three share consistent SVG sizing and use the same placeholder substitution pattern ([Type], [Diagram title], [diagram-slug]), making them interchangeable within automated export workflows.

Frequently Asked Questions

Can I use my own color theme without modifying the repository files?

Yes. Since template.html and template-dark.html isolate all color values in :root CSS variables, you can override these in a <style> block after the template loads or post-process the file with your own token values. The template-full.html file follows the same pattern with its expanded variable set.

Why does template-full.html use a different viewBox height?

The template-full.html canvas may use 0 0 1000 700 versus 0 0 1000 600 in the minimal templates to accommodate vertical space consumed by the header and footer components. Check your specific export requirements—diagrams scale to fit, but aspect ratios differ slightly.

Is there a dark version of template-full.html?

Not in the current repository structure. You can create one by combining the expanded variable set from template-full.html (lines 11–26) with the inverted color values from template-dark.html (lines 11–14), then adjusting specific tokens like --color-rule and --color-link for dark-mode contrast.

Which template should I use for automated diagram generation?

Use template.html for pipeline outputs where you want clean, embeddable SVG diagrams without chrome. Use template-full.html when your automation produces architecture documentation requiring contextual headers, descriptive cards, or professional presentation formatting. Swap to template-dark.html when your target environment (slides, dashboards) uses dark themes.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}