fix: enhance 'this' keyword and Angular component highlighting with comprehensive fallbacks

This commit significantly improves highlighting coverage for two problematic areas:

**'this' Keyword Highlighting:**
- Add multiple tree-sitter capture fallbacks: @keyword.this, @variable.language, @variable.language.this
- Add LSP semantic token support for @lsp.type.selfParameter
- Ensures 'this' appears in orange (#CC7832) instead of purple like member variables

**Angular Component Highlighting:**
- Add @tag.component and @tag.custom for web components/custom elements
- Add @lsp.type.customElement for LSP-based component detection
- Ensures custom Angular components (e.g., <app-header>) appear in yellow (#FFC66D)

**Documentation:**
- Add comprehensive DEBUGGING.md guide with troubleshooting steps
- Add Troubleshooting section to README with quick fixes
- Include instructions for using :Inspect to debug highlight groups

**Note:** After updating, users should:
1. Reload theme: :colorscheme darcula-solid
2. Restart LSP: :LspRestart
3. Ensure tree-sitter parsers installed: :TSInstall typescript javascript html

DEBUGGING.md

@@ -0,0 +1,90 @@
+# Debugging Darcula Solid Highlighting
+
+If certain elements aren't highlighting correctly, use these debugging techniques:
+
+## 1. Check What Highlight Group Is Applied
+
+Place your cursor on the element that's not highlighting correctly and run:
+
+```vim
+:Inspect
+```
+
+This will show you the exact highlight groups being applied, from tree-sitter, LSP semantic tokens, and syntax.
+
+## 2. Common Issues
+
+### `this` Keyword Not Highlighting
+
+The `this` keyword should appear in **orange** (#CC7832), not purple like member variables.
+
+**Possible causes:**
+- LSP not running or not providing semantic tokens
+- Tree-sitter parser not installed for TypeScript/JavaScript
+- Theme not reloaded after updates
+
+**Solutions:**
+1. Reload the theme: `:colorscheme darcula-solid`
+2. Restart LSP: `:LspRestart` (if using nvim-lspconfig) or `:lua vim.lsp.stop_client(vim.lsp.get_clients())`
+3. Ensure tree-sitter parsers are installed: `:TSInstall typescript javascript tsx jsx`
+4. Check if LSP semantic tokens are enabled (most LSPs enable this by default)
+
+### Angular Components Appearing White/Blue
+
+Custom Angular components (like `<app-header>`, `<my-component>`) should appear in **yellow** (#FFC66D), same as standard HTML tags.
+
+**Possible causes:**
+- HTML tree-sitter parser not installed
+- Angular Language Server not recognizing custom components
+- File type not set to HTML
+
+**Solutions:**
+1. Install HTML parser: `:TSInstall html`
+2. Reload theme: `:colorscheme darcula-solid`
+3. Check file type: `:set filetype?` (should be `html` or `htmlangular`)
+4. If using Angular templates, ensure your LSP is configured for Angular
+
+## 3. Verify Tree-sitter Parsers
+
+Run: `:TSInstallInfo`
+
+Ensure these parsers are installed:
+- `html` - for HTML templates
+- `typescript` - for TypeScript files
+- `tsx` - for TypeScript React
+- `javascript` - for JavaScript files
+- `jsx` - for JavaScript React
+
+## 4. Verify LSP is Running
+
+Run: `:LspInfo`
+
+This shows which LSP servers are attached to the current buffer.
+
+For Angular projects, you should see:
+- `angularls` (Angular Language Server) for HTML templates
+- `ts_ls` or `tsserver` for TypeScript files
+
+## 5. Check Semantic Token Support
+
+LSP semantic tokens provide rich semantic highlighting. To check if they're working:
+
+```lua
+:lua print(vim.inspect(vim.lsp.semantic_tokens.get_at_pos()))
+```
+
+## 6. Force Reload Everything
+
+If nothing else works:
+1. Reload theme: `:colorscheme darcula-solid`
+2. Reload tree-sitter: `:write | edit`
+3. Restart LSP: `:LspRestart`
+4. Or just restart Neovim
+
+## 7. Report Issues
+
+If you're still having issues, please create a GitHub issue with:
+- Output of `:Inspect` on the problematic element
+- Output of `:LspInfo`
+- Output of `:TSInstallInfo`
+- Your Neovim configuration (especially LSP and tree-sitter setup)

README.md

@@ -144,6 +144,16 @@ Following JetBrains conventions:
 - **Italic** documentation comments
 - **Strikethrough** for deprecated items
 
+## 🐛 Troubleshooting
+
+If certain elements aren't highlighting correctly (e.g., `this` keyword appears purple instead of orange, or Angular components appear white), see [DEBUGGING.md](DEBUGGING.md) for detailed troubleshooting steps.
+
+**Quick fixes:**
+1. Reload the theme: `:colorscheme darcula-solid`
+2. Check what highlight is applied: `:Inspect` (cursor on element)
+3. Ensure tree-sitter parsers are installed: `:TSInstall typescript javascript html`
+4. Restart LSP: `:LspRestart`
+
 ## 🙏 Credits
 - Original theme inspired by the official JetBrains Darcula theme
 - Thanks to [@rorystephenson](https://github.com/rorystephenson) for the customization idea

lua/lush_theme/darcula-solid.lua

@@ -311,7 +311,11 @@ return lush(function()
 		["@variable.member"] = { fg = p.member_variable, gui = "italic" },
 
 		-- Special handling for 'this' keyword (should be distinct from member variables)
+		-- Multiple approaches to catch 'this' keyword in different contexts
 		["@variable.builtin.this"] = { fg = p.keyword, gui = "italic" },
+		["@keyword.this"] = { fg = p.keyword, gui = "italic" },
+		["@variable.language"] = { fg = p.keyword, gui = "italic" }, -- Used by some parsers for 'this'
+		["@variable.language.this"] = { fg = p.keyword, gui = "italic" },
 
 		-- Constants
 		["@constant"] = { fg = p.constant },
@@ -353,8 +357,11 @@ return lush(function()
 		["@constructor.jsx"] = { fg = p.function_call },
 
 		-- Angular specific (custom components in templates)
+		-- Angular components can be captured in multiple ways depending on parser
 		["@constructor.html"] = { fg = p.function_call }, -- Angular components in HTML
 		["@type.html"] = { fg = p.function_call }, -- Angular components that appear as types
+		["@tag.component"] = { fg = p.function_call }, -- Web components / custom elements
+		["@tag.custom"] = { fg = p.function_call }, -- Custom tags
 
 		-- Markup (Markdown, reStructuredText, etc.) - New standard
 		["@markup.strong"] = { gui = "bold" },
@@ -432,8 +439,15 @@ return lush(function()
 		["@lsp.type.method"] = { fg = p.function_call },
 		["@lsp.type.macro"] = { fg = p.annotation },
 		["@lsp.type.decorator"] = { fg = p.annotation },
-		["@lsp.type.selfKeyword"] = { fg = p.keyword, gui = "italic" }, -- 'this' keyword in TypeScript/JavaScript
+		-- 'this' keyword handling (multiple semantic token types)
+		-- NOTE: For changes to take effect, reload with :colorscheme darcula-solid
+		-- or restart Neovim and ensure LSP is reloaded
+		["@lsp.type.selfKeyword"] = { fg = p.keyword, gui = "italic" }, -- 'this' in TypeScript/JavaScript
+		["@lsp.type.selfParameter"] = { fg = p.keyword, gui = "italic" }, -- 'this' as parameter
+
+		-- Angular/React component handling
 		["@lsp.type.component"] = { fg = p.function_call }, -- Angular/React components
+		["@lsp.type.customElement"] = { fg = p.function_call }, -- Web components
 
 		["@lsp.mod.deprecated"] = { gui = "strikethrough" },
 		["@lsp.mod.readonly"] = { gui = "italic" },