# How to Customize the Appearance of the i-have-adhd Plugin: A Complete Guide

> Customize the i-have-adhd plugin appearance by editing CSS, replacing the logo, and modifying command descriptions. Follow this complete guide for personalization.

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

---

**Customize the i-have-adhd plugin by editing the CSS template literal in [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts) to change banner colors and fonts, replacing `logo.png` for custom branding, and modifying [`.opencode/command/i-have-adhd.md`](https://github.com/ayghri/i-have-adhd/blob/main/.opencode/command/i-have-adhd.md) for command descriptions.**

The i-have-adhd plugin injects ADHD-friendly response formatting into LLM outputs across multiple runtimes including OpenCode, Claude, Codex, and Gemini. According to the ayghri/i-have-adhd source code, the visual presentation is controlled by a compact set of TypeScript and configuration files that define the banner HTML, inline CSS, and asset references.

## Understanding the Appearance Architecture

The plugin’s UI consists of three core components that you can modify without changing the underlying behavioral logic.

### Core Extension Logic

The file [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts) contains the runtime TypeScript that constructs the visual banner. It exports two critical template literals: `const STYLE`, which injects a `<style>` block defining the banner’s appearance, and `const BANNER`, which contains the HTML structure displayed before model responses.

### Asset Manifests

The [`plugin.json`](https://github.com/ayghri/i-have-adhd/blob/main/plugin.json) file (along with runtime-specific variants like [`claude.plugin.json`](https://github.com/ayghri/i-have-adhd/blob/main/claude.plugin.json) or [`opencode.plugin.json`](https://github.com/ayghri/i-have-adhd/blob/main/opencode.plugin.json)) tells each LLM runtime where to locate UI assets. This manifest registers the logo file and any custom CSS files you add to the repository.

### Command Interface

Visual and textual help content appears in [`.opencode/command/i-have-adhd.md`](https://github.com/ayghri/i-have-adhd/blob/main/.opencode/command/i-have-adhd.md). This markdown file renders when users invoke the `i-have-adhd` command, controlling the description, usage instructions, and any branding elements shown in the command palette.

## Modifying Visual Elements

### Change Banner Colors and Typography

To alter the banner’s visual styling, locate the `const STYLE` declaration around line 30 in [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts). This template literal defines the `.adhd-banner` CSS class that controls background color, text color, padding, border radius, and font family.

```typescript
// extensions/i-have-adhd.ts
const STYLE = `
  .adhd-banner {
    background: #e0f7fa;      /* Teal background */
    color: #004d40;           /* Dark teal text */
    padding: 0.8rem;
    border-radius: 0.5rem;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }
`;

```

Save the file and reload the plugin runtime for changes to take effect immediately.

### Replace the Default Logo

The banner displays an image specified in the `const BANNER` template literal. By default, it references `logo.png` in the repository root. Replace this file with a custom PNG or SVG, or update the image path directly in the TypeScript:

```typescript
// extensions/i-have-adhd.ts
const BANNER = `
  <div class="adhd-banner">
    <img src="my-custom-logo.svg" alt="i-have-adhd" width="32" height="32"/>
    <strong>ADHD MODE ON</strong>
    <span>Focus-friendly formatting enabled</span>
  </div>
`;

```

If you change the filename from `logo.png` to something else, ensure the new file exists in the repository root or update the path to point to a subdirectory.

### Update Command Descriptions

Edit [`.opencode/command/i-have-adhd.md`](https://github.com/ayghri/i-have-adhd/blob/main/.opencode/command/i-have-adhd.md) to modify the help text appearance and branding that appears when users run the command:

```markdown

# i-have-adhd — Focus-Friendly Response Mode

**Your personalized productivity assistant**

Run this command before any prompt to activate ADHD-optimized formatting with clear headers, bullet points, and concise explanations.

```

## Step-by-Step Customization Workflow

Follow this sequence to safely customize the plugin appearance:

1. **Fork or clone** the ayghri/i-have-adhd repository to your local environment.

2. **Edit the CSS** in [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts) by modifying the `const STYLE` template literal to match your preferred color scheme and typography.

3. **Swap the logo** by replacing `logo.png` or updating the `src` attribute in the `const BANNER` template literal to reference your custom asset.

4. **Update the manifest** in [`plugin.json`](https://github.com/ayghri/i-have-adhd/blob/main/plugin.json) if you added new asset files (such as custom fonts or additional CSS files) by appending them to the `assets` array:

   ```json
   {
     "assets": [
       "logo.png",
       "custom-theme.css"
     ]
   }
   ```

5. **Modify command text** in [`.opencode/command/i-have-adhd.md`](https://github.com/ayghri/i-have-adhd/blob/main/.opencode/command/i-have-adhd.md) to reflect any branding or terminology changes.

6. **Reload the plugin** in your target runtime (OpenCode, Claude, etc.) to test the visual changes.

## Testing Your Changes

Verify your customizations by running the plugin locally before committing changes.

For unit testing the core logic:

```bash
python -m unittest discover -s tests -v

```

For OpenCode runtime testing, execute the plugin driver directly:

```bash
node .opencode/plugins/i-have-adhd.mjs

```

Trigger a test prompt like "Explain neural networks" and confirm that your custom banner colors, logo, and typography render correctly in the output.

## Summary

- **Visual styling** lives in the `const STYLE` template literal inside [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts), controlling CSS for background colors, text colors, fonts, and spacing.
- **Banner HTML structure** is defined in the `const BANNER` template literal in the same file, where you can modify the logo path and layout elements.
- **Logo assets** default to `logo.png` in the repository root but can be replaced or re-pathed to custom SVG or PNG files.
- **Command descriptions** appear in [`.opencode/command/i-have-adhd.md`](https://github.com/ayghri/i-have-adhd/blob/main/.opencode/command/i-have-adhd.md) and control the help text branding.
- **Asset registration** occurs in [`plugin.json`](https://github.com/ayghri/i-have-adhd/blob/main/plugin.json), which must be updated if you introduce new file references beyond the default configuration.

## Frequently Asked Questions

### Where is the CSS for the ADHD banner located?

The CSS is defined in the `const STYLE` template literal within [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts), typically starting around line 30. This inline stylesheet sets the `.adhd-banner` class properties including background color, text color, padding, border radius, and font family.

### Can I use an SVG logo instead of PNG?

Yes. Replace the `logo.png` file with an SVG version, or update the `<img src="...">` tag inside the `const BANNER` template literal in [`extensions/i-have-adhd.ts`](https://github.com/ayghri/i-have-adhd/blob/main/extensions/i-have-adhd.ts) to point to `logo.svg`. Ensure the [`plugin.json`](https://github.com/ayghri/i-have-adhd/blob/main/plugin.json) manifest includes the new filename in its assets array if the runtime requires explicit file registration.

### Do I need to update plugin.json after changing the logo filename?

Only if you rename the file to something other than `logo.png` or add additional asset files. The [`plugin.json`](https://github.com/ayghri/i-have-adhd/blob/main/plugin.json) file contains an `assets` array that tells the runtime which files to bundle; add your new logo filename there to ensure it loads correctly across OpenCode, Claude, and other supported platforms.

### How do I test appearance changes locally?

Run the Python unit tests with `python -m unittest discover -s tests -v` to verify logic integrity. For visual confirmation, load the plugin in your target runtime (such as running `node .opencode/plugins/i-have-adhd.mjs` for OpenCode) and execute a test prompt to inspect the rendered banner, colors, and logo placement.