Styling

Customize DyeLight’s appearance with CSS classes and Tailwind CSS

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:

Focus Ring

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

Monospace

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

Sans Serif

<DyeLight
    className="font-sans text-base leading-normal"
    value={text}
    onChange={setText}
/>

Custom Font

<DyeLight
    className="font-['Fira_Code'] text-sm tracking-wide"
    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

• Basic usage - Review fundamental concepts
• Controlled vs uncontrolled - Choose the right component mode
• Error highlighting - Add validation feedback