Zebra Stripes brings the classic, highly readable alternating row colors (like macOS Finder or traditional ledger paper) directly to your Visual Studio Code editor. By applying subtle background shading to alternating lines of code, it helps guide your eyes across the screen, reducing eye strain and making it easier to track long lines of code, complex objects, and deeply nested arrays.
Features
Instant Readability: Visually separates lines of code with alternating background colors, drastically improving readability for wide files or dense codebases.
Zero Performance Impact: Highly optimized rendering engine. It only calculates and draws stripes for the lines currently visible on your screen (viewport rendering), meaning it uses practically zero CPU, even on 100,000+ line files.
Auto-Adapts to Themes: Seamlessly detects whether you are using a Light or Dark theme and automatically adjusts the stripe opacities to look natural and unobtrusive.
Fully Customizable: Don't like the default colors? You have complete control. Adjust the exact RGBA color and opacity for both odd and even lines in your VS Code Settings.
Extension Settings
This extension contributes the following settings, which you can customize in your VS Code Settings UI or settings.json:
zebraStripes.evenLineColor: CSS color for even lines in DARK themes (Default: rgba(40, 40, 40, 0.45)).
zebraStripes.oddLineColor: CSS color for odd lines in DARK themes (Default: rgba(60, 60, 60, 0.5)).
zebraStripes.evenLineColorLight: CSS color for even lines in LIGHT themes (Default: rgba(220, 220, 220, 0.6)).
zebraStripes.oddLineColorLight: CSS color for odd lines in LIGHT themes (Default: rgba(240, 240, 240, 0.1)).
How to Customize
Open VS Code Settings (Cmd+, on Mac or Ctrl+, on Windows/Linux).
Search for Zebra Stripes.
Enter any valid CSS color string (Hex, RGB, or RGBA). Using rgba() is highly recommended so your syntax highlighting can still shine through the background!
