how-to-guide

How to Configure Dark and Light Themes for Archify: 3 Methods Explained

August 8, 2026 tt-a1i/archify ↗

Archify supports both dark and light themes through HTML data attributes, URL query parameters, and an interactive keyboard shortcut.

Archify is an open-source visualization tool that provides flexible theming options to match your preferred visual environment. Whether you are embedding diagrams in an iframe or building a standalone gallery, you can configure dark and light themes for Archify using three distinct mechanisms implemented in the tt-a1i/archify repository.

Method 1: Set the Theme via HTML Data Attribute

The most direct way to configure the theme is by setting the data-theme attribute on the root <html> element. Archify reads this attribute during initialization to determine whether to render in dark or light mode.

In scripts/gallery-template.html at line 2, the default configuration uses:

<html lang="en" data-theme="dark">

To switch to light mode, change the attribute value to "light":

<html lang="en" data-theme="light">

This approach works best for standalone pages where you control the HTML structure directly, as demonstrated in examples/web-app.html.

Method 2: Configure Themes via URL Query Parameter

When embedding Archify within an iframe, you can pass the theme preference through the URL query string. The viewer reads the theme parameter and applies the corresponding visual style automatically.

In scripts/gallery-template.html (lines 13-15), the template dynamically constructs iframe sources that append the theme parameter:

<iframe src="https://tt-a1i.github.io/archify/gallery.html?theme=light"></iframe>

Valid values are dark and light. This method is ideal for integrating Archify visualizations into content management systems or documentation sites where you cannot modify the HTML attributes directly.

Method 3: Toggle Themes Interactively

For end-user flexibility, Archify provides an interactive toggle that switches between dark and light modes without reloading the page. Press the T key to cycle between themes instantly.

The keyboard shortcut is documented in the repository's README.md under the "Choose visual style" section. Additionally, the gallery interface includes a preview button that triggers the same functionality. In scripts/gallery-template.html at line 22, a click handler on the "Preview" button calls applyPreviewTheme:

document.getElementById('preview-theme')
  .addEventListener('click', () => {
    const next = previewTheme === 'dark' ? 'light' : 'dark';
    applyPreviewTheme(next);
  });

The current theme state is stored in document.documentElement.dataset.previewTheme, allowing the application to persist the user's preference during the session.

CSS Implementation and Theme Styling

The visual differences between dark and light modes are defined through CSS selectors targeting the data attributes. In experiments/visual-evolution/prototype.html (lines 41-84), the stylesheet uses attribute selectors to apply color schemes:

[data-theme="dark"] {
  background-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="light"] {
  background-color: #ffffff;
  color: #1a1a1a;
}

These rules propagate to all SVG elements within the visualization container, ensuring consistent styling across the diagram components.

Summary

  • HTML attribute: Set data-theme="dark" or data-theme="light" on the <html> element to configure the theme statically.
  • URL parameter: Append ?theme=dark or ?theme=light to the URL when embedding Archify in an iframe.
  • Interactive toggle: Press T or use the preview button to switch themes dynamically, as implemented in scripts/gallery-template.html.
  • Default behavior: Preview pages default to dark mode unless overridden by one of the methods above.
  • Storage mechanism: The active theme is tracked in document.documentElement.dataset.previewTheme and applied via CSS selectors.

Frequently Asked Questions

What is the default theme in Archify?

Archify defaults to dark mode for preview pages and gallery templates. This is hardcoded in scripts/gallery-template.html at line 2 where the root element includes data-theme="dark". You can override this default using any of the three configuration methods described above.

Can I set the theme when embedding Archify in an iframe?

Yes. When embedding Archify via an iframe, append the theme query parameter to the URL source. Use ?theme=dark or ?theme=light to specify your preference. The gallery template processes this parameter on lines 13-15 of scripts/gallery-template.html to ensure the embedded content renders with the correct visual style.

How do I toggle between dark and light modes while viewing a diagram?

Press the T key to toggle between dark and light themes instantly. This keyboard shortcut is handled by the gallery interface and documented in the README.md. Alternatively, click the Preview button in the gallery interface, which triggers the applyPreviewTheme function to switch the data-preview-theme attribute.

Where are the dark and light theme styles defined in the source code?

The CSS rules for both themes are located in experiments/visual-evolution/prototype.html between lines 41 and 84. These styles use attribute selectors like [data-theme="dark"] and [data-theme="light"] to apply color schemes to SVG elements and container backgrounds.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →