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

Customize the i-have-adhd plugin by editing the CSS template literal in 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 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 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 file (along with runtime-specific variants like claude.plugin.json or 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. 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. This template literal defines the .adhd-banner CSS class that controls background color, text color, padding, border radius, and font family.

// 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:

// 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 to modify the help text appearance and branding that appears when users run the command:

# 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 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 if you added new asset files (such as custom fonts or additional CSS files) by appending them to the assets array:

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

5. Modify command text in .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:

python -m unittest discover -s tests -v

For OpenCode runtime testing, execute the plugin driver directly:

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, 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 and control the help text branding.
• Asset registration occurs in 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, 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 to point to logo.svg. Ensure the 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}