# Dark Mode Regex Patterns for Find & Replace

Use these regex patterns in VS Code (Ctrl+Shift+F) to find classes that need dark mode variants.

## Enable Regex Mode
Make sure the `.*` button is enabled in the Find dialog (regex mode).

## Patterns to Find Classes Without Dark Variants

### 1. Find `bg-white` without `dark:bg` in the same className
```regex
className="[^"]*\bbg-white\b(?!.*dark:bg)[^"]*"
```

**Simpler version** (finds bg-white in any context, you manually check):
```regex
\bbg-white\b
```

### 2. Find `text-gray-900` without `dark:text` in the same className
```regex
className="[^"]*\btext-gray-900\b(?!.*dark:text)[^"]*"
```

**Simpler version**:
```regex
\btext-gray-900\b
```

### 3. Find `text-gray-600` or `text-gray-700` without dark variants
```regex
className="[^"]*\btext-gray-[67]00\b(?!.*dark:text)[^"]*"
```

**Simpler version**:
```regex
\btext-gray-[67]00\b
```

### 4. Find `text-gray-500` without dark variant
```regex
\btext-gray-500\b
```

### 5. Find `border-gray-200` without dark variant
```regex
\bborder-gray-200\b
```

### 6. Find any `bg-gray-*` without dark variant (like bg-gray-50)
```regex
\bbg-gray-\d+\b
```

## Recommended Manual Process

Since the negative lookahead patterns are complex, here's a simpler workflow:

1. **Find all instances of a pattern:**
   ```
   \bbg-white\b
   ```

2. **For each match, check if the same line/className contains `dark:bg-`**
   - If NO → needs dark mode variant
   - If YES → skip (already has dark mode)

3. **Replace patterns:**

### Replacement Patterns

**Backgrounds:**
- Find: `\bbg-white\b`
- Replace: `bg-white dark:bg-gray-800`
- Then manually add border if missing: `border border-gray-200 dark:border-gray-700`

**Text colors:**
- Find: `\btext-gray-900\b`
- Replace: `text-gray-900 dark:text-white`

- Find: `\btext-gray-800\b`
- Replace: `text-gray-800 dark:text-white/90`

- Find: `\btext-gray-700\b`
- Replace: `text-gray-700 dark:text-gray-300`

- Find: `\btext-gray-600\b`
- Replace: `text-gray-600 dark:text-gray-400`

- Find: `\btext-gray-500\b`
- Replace: `text-gray-500 dark:text-gray-400`

**Borders:**
- Find: `\bborder-gray-200\b`
- Replace: `border-gray-200 dark:border-gray-700`

- Find: `\bborder-gray-300\b`
- Replace: `border-gray-300 dark:border-gray-600`

**Table backgrounds:**
- Find: `\bbg-gray-50\b`
- Replace: `bg-gray-50 dark:bg-gray-900`

**Badges:**
- Find: `\bbg-blue-100\b`
- Replace: `bg-blue-100 dark:bg-blue-900/30`

- Find: `\btext-blue-800\b`
- Replace: `text-blue-800 dark:text-blue-300`

(Similar pattern for green, red, yellow, purple badges)

## Quick Find Patterns (Check Manually)

1. **All bg-white**: `\bbg-white\b`
2. **All text-gray-***: `\btext-gray-[0-9]+\b`
3. **All border-gray-***: `\bborder-gray-[0-9]+\b`
4. **All bg-gray-***: `\bbg-gray-[0-9]+\b`

## Example: Finding bg-white in className strings

If you want to be more precise and find `bg-white` that appears in a className attribute but doesn't have `dark:bg` nearby:

```regex
className="[^"]*\bbg-white\b[^"]*"(?!.*dark:bg)
```

But this won't work well if dark:bg is on a different line. So the simpler approach of finding all instances and manually checking is recommended.