# How the UI Status Indicator Shows "ADHD ON" in the i‑have‑adhd Theme

> Discover how the UI status indicator in the i-have-adhd theme visually signals 'ADHD ON' using color coded bullets and accent text. Learn about its implementation.

- Repository: [Ayoub Ghriss/i-have-adhd](https://github.com/ayghri/i-have-adhd)
- Tags: how-to-guide
- Published: 2026-08-20

---

**The UI status indicator displays "ADHD ON" as a success‑colored bullet (●) followed by accent‑colored text, built by the `updateStatus` function in [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts).**

The **i‑have‑adhd** extension provides a visual status indicator that appears in the UI when ADHD mode is active. Understanding how this indicator renders helps users recognize when the accessibility features are enabled and allows developers to customize or test the behavior. The implementation relies on theme‑aware color helpers to ensure consistent styling across different color schemes.

## How the Status Indicator Is Constructed

The visual representation is built inside the `updateStatus` function (lines 104‑112 of [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts)). This function assembles a two‑part label using theme foreground helpers:

1. **Success‑colored dot** – `ctx.ui.theme.fg("success", "●")` renders a green bullet.
2. **Accent‑colored text** – `ctx.ui.theme.fg("accent", "ADHD ON")` renders the label in the theme's accent color.

These fragments are concatenated with a space separator and passed to `ctx.ui.setStatus`:

```typescript
const updateStatus = (ctx: ExtensionContext): void => {
  if (!enabled) {
    ctx.ui.setStatus("i-have-adhd", undefined);   // hide indicator
    return;
  }

  const dot   = ctx.ui.theme.fg("success", "●");      // coloured bullet
  const label = ctx.ui.theme.fg("accent", "ADHD ON"); // coloured text
  ctx.ui.setStatus("i-have-adhd", `${dot} ${label}`); // show "● ADHD ON"
};

```

The `ctx.ui.setStatus` call registers the composite string under the key `"i-have-adhd"`, making it appear in the status bar.

## Theme Integration and Color Application

The **theme foreground helpers** (`ctx.ui.theme.fg`) automatically map semantic color names to the active color scheme:

- `"success"` typically resolves to green, providing immediate visual confirmation that the mode is active.
- `"accent"` uses the theme's highlight color, ensuring the "ADHD ON" text stands out without clashing with the UI.

This abstraction allows the indicator to adapt to light, dark, or custom themes without hardcoded color values.

## Toggling the Indicator Visibility

When ADHD mode is disabled, the `updateStatus` function clears the status entry entirely:

```typescript
ctx.ui.setStatus("i-have-adhd", undefined);

```

This removes the visual indicator from the UI rather than displaying an "off" state.

From the command line, users can toggle the mode:

```bash

# Enable ADHD-friendly output (shows the status indicator)

/i-have-adhd on

# Disable it (removes the status indicator)

/i-have-adhd off

```

## Key Implementation Files

| File | Purpose |
|------|---------|
| [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts) | Main extension logic; contains `updateStatus` function that builds and renders the status indicator. |
| [`scripts/check_pi_extension.py`](https://github.com/ayghri/i-have-adhd/blob/main/scripts/check_pi_extension.py) | Test suite asserting that "ADHD ON" appears in UI status when enabled. |
| [`README.md`](https://github.com/ayghri/i-have-adhd/blob/main/README.md) | Documents the footer behavior showing "● ADHD ON" while active. |

## Summary

- The **UI status indicator** combines a success‑colored bullet with accent‑colored text to display "ADHD ON".
- The `updateStatus` function in [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts) handles both rendering and clearing the indicator.
- Theme helpers (`ctx.ui.theme.fg`) ensure colors adapt to the active color scheme.
- The indicator disappears completely when ADHD mode is disabled via `ctx.ui.setStatus(STATUS_KEY, undefined)`.

## Frequently Asked Questions

### What colors does the "ADHD ON" status indicator use?

The indicator uses **success** (green) for the bullet and **accent** for the text label. These semantic names map to actual colors through `ctx.ui.theme.fg`, adapting to the current theme.

### Where is the status indicator code located?

The implementation resides in [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts), specifically within the `updateStatus` function at lines 104‑112.

### How can I test that the status indicator appears correctly?

Run the test suite in [`scripts/check_pi_extension.py`](https://github.com/ayghri/i-have-adhd/blob/main/scripts/check_pi_extension.py), which asserts that "ADHD ON" text appears in the UI status when the mode is enabled.

### Why does the indicator disappear instead of showing "ADHD OFF"?

The extension calls `ctx.ui.setStatus("i-have-adhd", undefined)` when disabled. This design choice keeps the UI uncluttered—the indicator serves as an active‑state marker only.