FocusFade
FocusFade dims code outside the current logical block in Visual Studio Code.
It improves local readability while preserving surrounding context.
The extension supports both indentation-based and brace-delimited languages.
Quick Start
- Open a supported file in VS Code.
- Run Toggle Fade Surrounding Code.
- Move the cursor to change the focused block.
Default keybinding: Ctrl+Alt+Q (when the editor has focus).
Behavior
FocusFade determines the smallest enclosing code block containing the cursor.
All visible code outside that block is dimmed using editor decorations.
The extension:
- Never modifies file contents
- Does not use language servers or ASTs
- Operates only on visible editor ranges
- Uses indentation or brace structure only
Block detection is heuristic by design.
Commands
fades-surrounding-code.toggle — Enable or disable FocusFade.
Configuration
Settings are defined under the focusFade namespace.
Example settings.json:
{
"focusFade.enableAnimation": false,
"focusFade.dimOpacity": 0.25,
"focusFade.dimDurationMs": 250,
"focusFade.dimSteps": 6,
"focusFade.maxWindowLines": 120,
"focusFade.maxWindowChars": 200000,
"focusFade.maxBlockLinesAuto": 230,
"focusFade.enabledOnStart": false,
"focusFade.indentationLanguages": ["python", "yaml"],
"focusFade.bracketLanguages": [
"javascript",
"typescript",
"javascriptreact",
"typescriptreact",
"c",
"cpp",
"csharp",
"java"
]
}
Settings Reference
| Setting |
Type |
Default |
Description |
focusFade.dimOpacity |
number |
0.25 |
Opacity applied to dimmed text. Lower values are darker. |
focusFade.enableAnimation |
boolean |
false |
Enable animated transitions. May cause brief flashing. |
focusFade.dimDurationMs |
number |
250 |
Duration of fade animation in milliseconds. |
focusFade.dimSteps |
number |
6 |
Number of opacity steps used during animation. |
focusFade.maxWindowLines |
number |
120 |
Lines scanned above and below the cursor. |
focusFade.maxWindowChars |
number |
200000 |
Character limit for scanned window. |
focusFade.maxBlockLinesAuto |
number |
230 |
Maximum block height processed automatically. |
focusFade.enabledOnStart |
boolean |
false |
Enable FocusFade automatically when an editor opens. |
focusFade.indentationLanguages |
string[] |
["python","yaml"] |
Languages using indentation-based detection. |
focusFade.bracketLanguages |
string[] |
see example above |
Languages using brace-based detection. |
Supported Languages
Detection is language-agnostic and configurable.
- Indentation-based: Python, YAML
- Brace-delimited: JavaScript, TypeScript, C, C++, C#, Java
Behavior depends on consistent formatting.
Known Limitations
- Block detection is heuristic and not syntax-tree based.
- Extremely large files or blocks may be skipped for performance.
- Complex template literals or string interpolation may reduce accuracy.
- Animated transitions can briefly flash on some platforms.
To fully avoid flashing, disable animation:
"focusFade.enableAnimation": false
Troubleshooting
- Toggle FocusFade off and on if dimming appears stale.
- Disable animation if flashing is distracting.
- Adjust language lists if detection is incorrect.
- Reduce window limits if performance degrades on large files.
Development
Install dependencies:
yarn install
yarn run compile
Run checks:
yarn run check-types
yarn run lint
Launch the Extension Development Host with F5.
Package for the Marketplace:
vsce package
Contributing
Issues and pull requests are welcome.
Provide minimal reproduction steps for bugs.
Keep changes focused and reviewable.
Security
The extension:
- Performs no network access
- Spawns no external processes
- Uses only VS Code decoration and read-only document APIs
Low-severity advisories may appear in development dependencies.
These do not affect runtime behavior.
License
MIT
