FocusMode+
FocusMode+ is a lightweight VS Code extension by CodeFX that creates a distraction-free coding experience by visually dimming everything outside your active code region. The focus zone follows your cursor in real time, keeping the code you are working on clear while everything else fades away.
Features
Active Line & Smart Dimming
Lines outside a configurable range around the cursor are gradually dimmed. Three brightness levels are applied automatically:
| Zone |
Appearance |
Focus band (cursor ± focusRange lines) |
Full brightness |
Near band (half of focusRange further out) |
Slightly dimmed |
| Everything else |
Strongly dimmed |
Code Block Detection
FocusMode+ detects the enclosing code block (function, class, loop, conditional) and expands the focus zone to include the entire block. Two detection strategies run automatically:
- Bracket matching — finds the nearest enclosing
{ }, ( ), or [ ] pair.
- Indentation heuristics — fallback for Python, YAML, and other indentation-based languages.
Four Focus Styles
| Style |
Effect |
| Soft Dim |
Gentle fade — subtle and professional |
| Spotlight |
Strong contrast between focus and background |
| Zen Mode |
Calm, minimal dimming |
| Blur Mode |
Near-invisible background, maximum focus |
Status Bar Indicator
A clickable status bar item shows whether FocusMode+ is on or off.
$(eye) FocusMode+ ON ← click to disable
$(eye-closed) FocusMode+ ← click to enable
Distraction-Free Mode
Optionally hide VS Code chrome while focus mode is active:
- Minimap
- Breadcrumbs
- CodeLens annotations
Settings are saved and restored automatically when focus mode is toggled.
- All updates are event-driven — no timers or polling loops.
- A 50 ms debounce collapses rapid cursor movements into a single update.
- Decorations use
isWholeLine: true with opacity, avoiding syntax-highlight overrides.
- No theme configuration files are modified at any time.
Commands
Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and search for:
| Command |
Description |
FocusMode+: Toggle Focus Mode |
Enable or disable focus mode |
FocusMode+: Enable Focus Mode |
Explicitly enable |
FocusMode+: Disable Focus Mode |
Explicitly disable |
FocusMode+: Switch Focus Style |
Pick a dimming style from a quick-pick menu |
Settings
All settings are available in the VS Code Settings UI under FocusMode+.
| Setting |
Type |
Default |
Description |
focusModePlus.enabled |
boolean |
false |
Auto-enable on VS Code startup |
focusModePlus.focusRange |
number |
6 |
Lines above/below cursor kept at full brightness (1–50) |
focusModePlus.style |
string |
"softDim" |
Visual style: softDim, spotlight, zenMode, blurMode |
focusModePlus.hideMinimap |
boolean |
false |
Hide minimap while active |
focusModePlus.hideBreadcrumbs |
boolean |
false |
Hide breadcrumbs while active |
focusModePlus.hideCodeLens |
boolean |
false |
Hide CodeLens while active |
Example settings.json snippet
{
"focusModePlus.enabled": false,
"focusModePlus.focusRange": 8,
"focusModePlus.style": "spotlight",
"focusModePlus.hideMinimap": true,
"focusModePlus.hideBreadcrumbs": false,
"focusModePlus.hideCodeLens": false
}
How It Works
┌──────────────────────────────────────────┐
│ Line 1 ░░░░ strongly dimmed │ dimDecoration
│ Line 2 ░░░░ strongly dimmed │
│ Line 3 ▒▒▒▒ slightly dimmed │ nearDecoration
│ Line 4 ████ full brightness ◄ block │
│ Line 5 ████ full brightness ◄ cursor │ (no decoration)
│ Line 6 ████ full brightness ◄ block │
│ Line 7 ▒▒▒▒ slightly dimmed │ nearDecoration
│ Line 8 ░░░░ strongly dimmed │ dimDecoration
└──────────────────────────────────────────┘
- On every cursor move, text edit, or editor switch,
scheduleUpdate() is called.
- A 50 ms debounce fires
updateDecorations().
- The enclosing bracket block is detected (then indentation as fallback).
- Focus/near/dim ranges are computed and applied via
TextEditorDecorationType.
- The decorations update in place — no flicker, no theme writes.
💡 Feedback
If you encounter issues or have suggestions, feel free to leave us a review.
License
MIT © CodeFX
