Archify Keyboard Navigation: How to Use T for Theme, E for Export, and Arrow Keys

Archify provides complete keyboard accessibility through the T key for theme toggling, E key for opening the export menu, and arrow keys for navigating export options, all implemented in the self-contained HTML template generated by the tt-a1i/archify CLI.

The tt-a1i/archify repository generates self-contained HTML diagrams that support comprehensive keyboard navigation without external dependencies. Users can toggle between dark and light themes, trigger export menus, and select file formats using intuitive shortcuts defined in archify/assets/template.html and documented in the project's README.

Toggling Themes with the T Key

Pressing T anywhere on the page instantly switches the diagram between dark and light themes. The current theme persists in localStorage and respects the browser's prefers-color-scheme media query for initial detection.

Theme Resolution Logic

The theme initialization logic lives in the startup script within archify/assets/template.html (lines 13-24). It resolves the active theme by checking for a theme URL parameter first, falling back to the value stored in localStorage, and finally defaulting to the OS preference.

// Theme toggle – reacts to the "T" key anywhere on the page
window.addEventListener('keydown', (e) => {
  if (e.key === 't' || e.key === 'T') {
    const newTheme = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
    document.documentElement.dataset.theme = newTheme;
    localStorage.setItem('archify-theme', newTheme);
  }
});

Opening the Export Menu with the E Key

Pressing E opens the Export dropdown menu, which contains copy-to-clipboard and download options for PNG, JPEG, WebP, and SVG formats. The hint text "Press for theme and for export" is injected into the UI by the CLI helper in archify/renderers/shared/cli.mjs (lines 24-27).

Export Format Options

The export menu supports four image formats and clipboard operations. When activated, the menu renders as a standard <ul> with role="menu" for accessibility.

<!-- Example of the export button with the keyboard hint -->
<button id="exportBtn" aria-label="Export menu">
  Export E
</button>

Navigating the Export Menu with Arrow Keys

Once the export menu is open, users can navigate using Arrow Up and Arrow Down (or Home and End), activate items with Enter or Space, and close the menu with Esc. The generic menu script embedded in the template handles these interactions.

Menu Accessibility Implementation

The menu navigation follows standard WAI-ARIA practices. The keyboard event listeners manage focus states for the export actions without requiring external libraries.

// Export menu navigation (simplified)
document.addEventListener('keydown', (e) => {
  if (exportMenuOpen) {
    if (e.key === 'ArrowDown') focusNextItem();
    if (e.key === 'ArrowUp')   focusPrevItem();
    if (e.key === 'Enter' || e.key === ' ') activateFocusedItem();
    if (e.key === 'Escape') closeExportMenu();
  }
});

Source Files and Implementation Location

The keyboard navigation system spans three key files in the tt-a1i/archify repository:

• archify/assets/template.html: Contains the startup script that resolves initial themes and defines the UI structure including the toolbar and export menu
• archify/renderers/shared/cli.mjs: Generates the keyboard hint text and supplies helper functions for building the final HTML document
• README.md: Documents all keyboard shortcuts and their effects (lines 97-104)

Summary

• Press T to toggle between dark and light themes, with preferences automatically saved to localStorage
• Press E to open the export menu containing PNG, JPEG, WebP, and SVG download options
• Use Arrow Up, Arrow Down, Home, and End to navigate export menu items
• Activate selections with Enter or Space, and close the menu with Escape
• All keyboard functionality is self-contained in the generated HTML and works in any modern browser

Frequently Asked Questions

Does archify keyboard navigation work without JavaScript?

No, the keyboard shortcuts require JavaScript to function. The theme toggle, export menu, and navigation controls are implemented through keydown event listeners in the client-side script bundled within archify/assets/template.html.

Where are the keyboard shortcuts documented in the source code?

The keyboard shortcuts are documented in README.md at lines 97-104. Additionally, the inline hints visible in the UI are generated by archify/renderers/shared/cli.mjs at lines 24-27, which injects the "Press for theme and for export" text into the HTML output.

Can I customize the T and E key bindings in archify?

The key bindings are hardcoded in the template's event listeners. To customize them, you would need to modify the keydown event handlers in archify/assets/template.html before generating your diagrams, as the current implementation does not expose configuration options for shortcut remapping.

Does the theme toggle respect system preferences?

Yes, the theme resolution logic respects the prefers-color-scheme media query. According to the implementation in archify/assets/template.html (lines 13-24), the system checks for an explicit theme URL parameter first, then falls back to the localStorage value, and finally defaults to the OS-level color scheme preference.

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