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

> Master Archify keyboard navigation! Use T for theme, E for export, and arrow keys for seamless control in the tt-a1i/archify CLI generated HTML. Enhance your workflow today.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: how-to-guide
- Published: 2026-07-14

---

**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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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.

```javascript
// 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 <T> for theme and <E> 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.

```html
<!-- 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.

```javascript
// 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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html).

### Where are the keyboard shortcuts documented in the source code?

The keyboard shortcuts are documented in [`README.md`](https://github.com/tt-a1i/archify/blob/main/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 <T> for theme and <E> 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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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.