Media
2 items
Description
Organic dark theme for the Webstudio builder. Keeps canvas clean. Webstudio Dark Theme Chrome Extension An organic dark theme for the Webstudio builder. This extension injects dark theme variables into the builder UI, while ensuring the website rendered on the canvas (inside the iframe) remains unaffected. Here is the changelog for version 1.1.0 in English: ✨ New Features: Massive Theme Library: Added 55 new themes based on popular palettes (including Catppuccin Mocha, Dracula, Tokyo Night, Gruvbox, Kanagawa, and many more). Contrast Slider: Added a slider to fine-tune the UI contrast (from 50% to 150%). Instead of problematic CSS filters, the extension now uses dynamic color-mix() which seamlessly deepens and enriches the panel colors while keeping your development canvas (iframe) 100% unaffected. 🐛 Fixes & Improvements: Token Badges Preserved: Semantic property badges (Local — blue, Remote — yellow, Overwritten — red) now retain their original standard colors across all themes and are safely ignored by the contrast slider to prevent color distortion. Fixed Invisible Icons: Fixed the issue where expand/collapse chevrons in the style panel and the visibility "eye" icon (especially next to Animation Group) would blend into the dark background. They now properly inherit the theme's bright foreground color and remain clearly visible. Optimized Match Patterns: Removed localhost and 127.0.0.1 from manifest.json. The extension now safely triggers only on webstudio.is domains, ensuring it won't interfere with your other local development environments. Features - **Organic Dark Theme:** Easy on the eyes, using slate and dark grays instead of pure black. - **Canvas Isolation:** Does not inject CSS into `iframes`, keeping your website design exactly as you styled it. - **Toggle Switch:** A popup menu to easily enable or disable the theme without uninstalling the extension. Usage - Open Webstudio builder (either `localhost:3000` or `app.webstudio.is`). - The dark theme will apply automatically. - Click the extension icon to open the popup and toggle the theme on/off.