Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ragaeeb/dyelight/llms.txt

Use this file to discover all available pages before exploring further.

DyeLight provides flexible styling options through CSS classes, inline styles, and seamless Tailwind CSS integration. This guide covers how to customize the component’s appearance.

​
className vs containerClassName

DyeLight accepts two different class name props:
  • className - Applied to the textarea element (controls text, padding, spacing)
  • containerClassName - Applied to the wrapper div (controls layout, borders, focus rings)
<DyeLight
    // Inner textarea: handles text color, spacing, and resizing
    className="h-full w-full bg-transparent px-3 py-2 text-base outline-none"
    
    // Outer shell: handles layout, borders, and focus rings
    containerClassName="flex-1 min-h-0 rounded-md border border-input bg-background"
    
    value={text}
    onChange={setText}
/>
For layout properties like borders and focus rings, use containerClassName. For text and spacing properties, use className.

​
Tailwind CSS integration

DyeLight works seamlessly with Tailwind CSS. Here’s a modern UI example: 
import { DyeLight } from 'dyelight';
import { cn } from './lib/utils';  // Your className utility

function ModernEditor() {
    const [text, setText] = useState('');

    return (
        <DyeLight
            // Outer shell: handles layout, borders, and focus rings
            containerClassName={cn(
                "flex-1 min-h-0 rounded-md border border-input bg-background shadow-xs",
                "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50"
            )}
            // Inner textarea: handles text color, spacing, and resizing
            className="h-full w-full bg-transparent px-3 py-2 text-base outline-none"
            placeholder="Start typing..."
            enableAutoResize={false}
            value={text}
            onChange={setText}
        />
    );
}
This creates a polished editor with:
  • Rounded borders
  • Focus ring effects
  • Subtle shadow
  • Responsive padding

​
Focus states

Add focus indicators using containerClassName: 
<DyeLight
    containerClassName="
        border border-gray-300 rounded-lg
        focus-within:border-blue-500
        focus-within:ring-2
        focus-within:ring-blue-200
    "
    className="p-3 outline-none"
/>
Always add outline-none to the className prop to remove the browser’s default focus outline, since you’re styling focus on the container.

​
Highlight styling

Customize the appearance of highlights: 
function StyledHighlights() {
    const [code, setCode] = useState('const x = 42;');

    const keywords = HighlightBuilder.pattern(
        code,
        /\b(const|let|var)\b/g,
        'highlight-keyword'
    );

    return (
        <>
            <style>{`
                .highlight-keyword {
                    background-color: #e3f2fd;
                    color: #1976d2;
                    font-weight: 600;
                    border-radius: 2px;
                    padding: 0 2px;
                }
            `}</style>
            <DyeLight
                value={code}
                onChange={setCode}
                highlights={keywords}
                className="font-mono"
            />
        </>
    );
}

​
Example CSS classes

Here are some pre-built CSS classes for common highlighting scenarios: 
.highlight-keyword {
    background-color: #e3f2fd;
    color: #1976d2;
    font-weight: 600;
}

.highlight-error {
    background-color: #ffebee;
    color: #c62828;
    text-decoration: underline wavy red;
}

.highlight-string {
    background-color: #e8f5e8;
    color: #2e7d32;
}

.highlight-comment {
    color: #757575;
    font-style: italic;
}

.highlight-number {
    color: #d84315;
    font-weight: 500;
}
Use them with HighlightBuilder: 
const keywords = HighlightBuilder.pattern(
    code,
    /\b(function|const)\b/g,
    'highlight-keyword'
);

const errors = HighlightBuilder.pattern(
    code,
    /undefined/g,
    'highlight-error'
);

​
Dark mode support

Implement dark mode with Tailwind’s dark: variant: 
function DarkModeEditor() {
    const [text, setText] = useState('');

    return (
        <DyeLight
            containerClassName="
                border rounded-lg
                border-gray-300 dark:border-gray-700
                bg-white dark:bg-gray-900
            "
            className="
                p-4 outline-none
                text-gray-900 dark:text-gray-100
                placeholder:text-gray-400 dark:placeholder:text-gray-500
            "
            value={text}
            onChange={setText}
            placeholder="Type something..."
        />
    );
}

​
Inline styles

For dynamic styling, use inline styles: 
const highlights = HighlightBuilder.ranges([
    {
        start: 0,
        end: 5,
        style: {
            backgroundColor: userColor,  // Dynamic color
            color: '#ffffff',
            fontWeight: 'bold',
            borderRadius: '3px',
            padding: '2px 4px'
        }
    }
]);

​
Typography

Customize font and text appearance: 
<DyeLight
    className="font-mono text-sm leading-relaxed"
    value={code}
    onChange={setCode}
/>

​
Responsive sizing

Make the editor responsive: 
<DyeLight
    containerClassName="
        w-full
        max-w-2xl mx-auto
        border rounded-lg
    "
    className="
        p-3 sm:p-4 md:p-6
        text-sm sm:text-base
        outline-none
    "
    value={text}
    onChange={setText}
/>

​
Custom container styles

Add custom background patterns or effects: 
<DyeLight
    containerClassName="
        relative
        border-2 border-dashed border-gray-300
        rounded-xl
        bg-gradient-to-br from-blue-50 to-purple-50
    "
    className="
        p-6
        bg-transparent
        text-gray-900
        outline-none
    "
    value={text}
    onChange={setText}
/>

​
Transparent overlay

DyeLight uses a transparent text overlay technique. The actual textarea text becomes transparent when content is present, and the highlights are rendered in an overlay behind it: 
// This is handled automatically by DyeLight
// The textarea has color: 'transparent' when there's content
// The placeholder remains visible because it uses the inherited color
This means:
  • Text color is controlled by the highlight className or style
  • The textarea’s className text color only affects the placeholder
  • Your highlights define the actual text color
When using highlights, set the text color in your highlight styles, not in the textarea’s className.

​
Complete example

Here’s a fully-styled modern editor: 
function CompleteStyledEditor() {
    const [code, setCode] = useState('');

    const keywords = HighlightBuilder.pattern(
        code,
        /\b(const|let|function)\b/g,
        'text-blue-600 dark:text-blue-400 font-semibold'
    );

    return (
        <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
            <DyeLight
                containerClassName={cn(
                    "max-w-4xl mx-auto",
                    "border-2 rounded-xl shadow-lg",
                    "border-gray-200 dark:border-gray-700",
                    "bg-white dark:bg-gray-800",
                    "focus-within:border-blue-500 dark:focus-within:border-blue-400",
                    "focus-within:ring-4 focus-within:ring-blue-100 dark:focus-within:ring-blue-900",
                    "transition-all duration-200"
                )}
                className={cn(
                    "font-mono text-sm leading-relaxed",
                    "p-6 outline-none",
                    "text-gray-900 dark:text-gray-100",
                    "placeholder:text-gray-400 dark:placeholder:text-gray-500"
                )}
                value={code}
                onChange={setCode}
                highlights={keywords}
                placeholder="// Start coding..."
                enableAutoResize
            />
        </div>
    );
}

​
Next steps

Build docs developers (and LLMs) love

Get started for freeTalk to us