Dark Theme Image View
A focused Visual Studio Code image viewer for PNG and SVG files, with sensible defaults for dark themes and a small, dependency-free runtime.
👀 preview
Left: Dark theme without extension | Right: Dark theme with extension enabled
✨ Features
- 🎨 Transparent Background Handling: Automatically converts transparent backgrounds to white in dark theme mode
- 🖱️ Interactive Viewing:
- 🔍 Zoom in/out using Ctrl/Cmd + Mouse Wheel (the cursor stays over the same image point)
- ↕️ Scroll long images vertically with the mouse wheel
- ↔️ Hold Shift while scrolling to move horizontally
- 🎯 Pan image by dragging with the mouse
- 📋 Clipboard Support: Copy the rendered image as PNG with the Copy button or Ctrl/Cmd+C
- 🌓 Background Modes: Cycle between white, checkerboard, and editor backgrounds with B
- 📂 Supported Formats:
🚀 Usage
- Open any PNG or SVG file in VS Code. The image will automatically open in the custom viewer, and In dark theme, transparent backgrounds will be rendered as white.
- You may use mouse controls to interact with the image:
- 👆 Hold and drag to pan
- ⚡ Ctrl/Cmd + scroll to zoom
- ↕️ Scroll normally for vertical movement, or hold Shift for horizontal movement
- 📋 Press Ctrl/Cmd+C or click Copy to put a PNG on the system clipboard
- 🌓 Press B or click Background to cycle the background
- To switch to a different editor, right-click the file in the Explorer and select "Open With..." from the context menu.
📋 Requirements
💻 Installation
- Install through VS Code Marketplace
- Reload VS Code
- Open any PNG/SVG file to start using
⚙️ Configuration
The following settings are available under Dark Theme Image View:
darkThemeImageView.defaultBackground: auto (white in dark themes and checkerboard in light themes), white, checkerboard, or editor.darkThemeImageView.defaultZoom: fitWidth (the default, which keeps tall images scrollable), fit, or actualSize.
The toolbar and Command Palette also expose Copy Image, Toggle Background, zoom, and fit commands.
🛠️ Development
npm install
npm run check # typecheck, lint, and unit tests
npm run compile # build dist/extension.js and dist/webview.js
The published extension has no runtime npm dependencies. The viewer uses a nonce-based Content Security Policy and only grants the webview access to the active image and its bundled assets.
🤝 Contributing
Found a bug or have a feature request? Please open an issue on the GitHub repository.
📄 License
MIT License
🙏 Credits
README and icon are generated with the assistance of Claude AI.
🔗 Links
