# Archify Visual Presets and Themes: A Complete Guide to Diagram Customization > Explore Archify's visual presets and themes: classic, signal-flow, blueprint, and editorial, with dark and light color options. Customize your diagrams easily. - Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) - Tags: tutorial - Published: 2026-08-09 --- **Archify supports four distinct visual presets (`classic`, `signal-flow`, `blueprint`, `editorial`) and two built-in color themes (`dark` and `light`) that control the overall look-and-feel of diagrams through JSON metadata and HTML data attributes.** Archify is an open-source diagramming tool that separates content from presentation through a flexible styling system. The **visual presets and themes** available in the repository allow you to transform the same diagram data into radically different visual outputs suitable for documentation, presentations, or technical drafting. ## Available Visual Presets in Archify Archify defines four visual presets in [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json) that determine the stylistic treatment of diagram elements: - **`classic`** – The stable default style suitable for general-purpose diagrams - **`signal-flow`** – A motion-forward style emphasizing directional flow and movement - **`blueprint`** – A drafting-first aesthetic with grid-heavy technical styling - **`editorial`** – A publication-oriented style optimized for documentation and print The preset is stored in the diagram's metadata under `meta.visual_preset` and defaults to `classic` when unspecified. ## Theme Modes: Dark vs. Light In addition to visual presets, Archify implements two color themes that affect the entire palette: - **`dark`** – Dark-mode colors (default) - **`light`** – Light-mode colors for bright backgrounds According to the source code in [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html), themes are applied via the `data-theme` attribute on the root HTML element. The CSS uses attribute selectors like `[data-theme="dark"]` to swap CSS custom properties dynamically. ## How to Configure Visual Presets and Themes You can apply these styling options through multiple interfaces depending on your workflow. ### Setting Presets in JSON Diagrams Define the visual preset directly in your diagram's metadata: ```json { "schema_version": 1, "diagram_type": "workflow", "meta": { "title": "Sample workflow", "visual_preset": "signal-flow" } } ``` The `visual_preset` field is validated against the enum defined in [`architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/architecture.schema.json). ### Switching Themes in HTML For web-based rendering, set both theme and preset using data attributes: ```html ... ``` The `data-theme` attribute selects the color palette while `data-preset` applies the visual style. ### Using the CLI to Render with Specific Styles The Archify CLI supports preset selection via command-line flags: ```bash archify render diagram.json --preset=editorial ``` In `archify/renderers/shared/cli.mjs`, the implementation injects the preset attribute into generated HTML: ```javascript const preset = ` data-preset="${esc(meta.visual_preset || 'classic')}"`; ``` This line defaults to `classic` when no preset is specified in metadata or CLI arguments. ## Source Files and Implementation Details The styling system is implemented across several key files: - **[`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json)** – Enumerates the four valid `visual_preset` values - **`archify/renderers/shared/cli.mjs`** – Handles `data-preset` attribute injection with fallback logic - **[`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html)** – Demonstrates `data-theme` and `data-preset` selectors - **`examples/`** – Contains real-world diagrams showcasing different preset and theme combinations Both attributes are read by the renderer to swap CSS custom properties, enabling instant visual transformation without modifying diagram structure. ## Summary - Archify provides **four visual presets** (`classic`, `signal-flow`, `blueprint`, `editorial`) defined in the JSON schema - **Two theme modes** (`dark` and `light`) control color palettes via the `data-theme` HTML attribute - Presets are stored in `meta.visual_preset` while themes use the `data-theme` attribute on root HTML elements - The CLI tool in `cli.mjs` supports `--preset` flags and defaults to `classic` when unspecified - CSS custom properties enable dynamic switching without regenerating diagram content ## Frequently Asked Questions ### What is the default visual preset in Archify? If you do not specify a preset in your JSON metadata or CLI arguments, Archify defaults to the `classic` preset. This fallback is hardcoded in `archify/renderers/shared/cli.mjs` where the template string explicitly uses `'classic'` as the default value. ### Can I use dark mode with the blueprint preset? Yes, presets and themes are independent properties. You can combine any of the four visual presets (`classic`, `signal-flow`, `blueprint`, `editorial`) with either `dark` or `light` themes. Set `data-theme="dark"` and `data-preset="blueprint"` simultaneously in your HTML or rendering configuration. ### Where are the visual presets validated? The allowed values are enumerated in [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json), which validates the `meta.visual_preset` field in diagram JSON files. This ensures only the four defined presets can be used, preventing invalid styling configurations. ### How do I preview different themes during development? Use the prototype HTML file at [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html) as a reference implementation. It demonstrates how to toggle both `data-theme` and `data-preset` attributes on the root HTML element to preview different visual combinations in real-time.