# How to Configure Dark and Light Themes for Archify: 3 Methods Explained > Easily configure dark and light themes for Archify using HTML data attributes, URL query parameters, or a keyboard shortcut. Customize your experience today! - Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) - Tags: how-to-guide - Published: 2026-08-08 --- **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 `` element. Archify reads this attribute during initialization to determine whether to render in dark or light mode. In [`scripts/gallery-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/gallery-template.html) at line 2, the default configuration uses: ```html ``` To switch to light mode, change the attribute value to `"light"`: ```html ``` This approach works best for standalone pages where you control the HTML structure directly, as demonstrated in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/scripts/gallery-template.html) (lines 13-15), the template dynamically constructs iframe sources that append the theme parameter: ```html ``` 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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/scripts/gallery-template.html) at line 22, a click handler on the "Preview" button calls `applyPreviewTheme`: ```javascript 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`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html) (lines 41-84), the stylesheet uses attribute selectors to apply color schemes: ```css [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 `` 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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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.