Utility Materials Protocol Theme
A VSCode theme inspired by industrial safety design and utility energy solutions, featuring safety orange colors and optional TV static effects.
Features
- Safety Orange Color Palette: Industrial-grade safety orange replacing traditional red hues
- Industrial Dashboard Design: Dark backgrounds with high-contrast utility colors
- TV Static Animation: Optional background static effect for that authentic industrial monitor feel
- Utility Materials Branding: Subtle industrial design elements
Installation
Method 1: Install from VSIX (Recommended)
- Download the
utility-materials-theme-0.0.1.vsix file
- Open VSCode
- Press
Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
- Type "Extensions: Install from VSIX..."
- Select the downloaded VSIX file
Method 2: Manual Installation
Copy this entire folder to your VSCode extensions directory:
- macOS:
~/.vscode/extensions/
- Windows:
%USERPROFILE%\.vscode\extensions\
- Linux:
~/.vscode/extensions/
Restart VSCode
Activation
- Press
Cmd+Shift+P / Ctrl+Shift+P
- Type "Preferences: Color Theme"
- Select "Utility Materials Protocol"
TV Static Effect (Optional)
To enable the authentic industrial monitor TV static effect:
Prerequisites
Install the Custom UI Style extension:
- Open VSCode Extensions (
Cmd+Shift+X / Ctrl+Shift+X)
- Search for "Custom UI Style" by subframe7536
- Install the extension
Setup Static Effect
- Copy the contents of
tv-static.css
- Press
Cmd+Shift+P / Ctrl+Shift+P
- Type "Custom UI Style: Edit CSS"
- Paste the CSS content
- Save and reload VSCode
Note: VSCode will show an "unsupported" warning - this is normal when using custom CSS.
Alternative Static Setup (Settings.json)
Add this to your VSCode settings.json:
{
"custom-ui-style.css": "path/to/tv-static.css",
"custom-ui-style.imports": ["tv-static.css"]
}
Color Palette
| Element |
Color |
Usage |
| Primary Orange |
#ff9500 |
Keywords, active elements, borders |
| Safety Orange |
#ff6600 |
Errors, warnings, critical elements |
| Industrial Dark |
#1a0a00 |
Backgrounds, panels |
| Utility Green |
#00ffc8 |
Success states, cursors |
| Warning Yellow |
#ffcc00 |
Cautions, modifications |
Screenshots
Editor View
The main editor features safety orange syntax highlighting with industrial dark backgrounds.
TV Static Effect
When enabled, the subtle static animation provides an authentic industrial monitor experience without interfering with code readability.
Compatibility
- VSCode 1.74.0+
- All major programming languages
- Light and dark variants (dark theme)
Troubleshooting
Theme Not Appearing
- Ensure the extension is properly installed
- Try reloading VSCode (
Cmd+R / Ctrl+R)
- Check that the theme name matches exactly
Static Effect Issues
- Verify Custom UI Style extension is installed and enabled
- Check that CSS file path is correct
- Restart VSCode after making changes
- Reduce static opacity if effect is too strong
License
MIT License - Feel free to modify and distribute.
Acknowledgments
- Inspired by the Cyberpunk SCARLET Protocol theme
- Color palette based on industrial safety standards
- Built for the utility materials community
UTIL-MAT Protocol Activated 🔧⚡
