Transparent background

Author: octref

package.json

@@ -46,10 +46,10 @@
           "description": "Shadow of the snippet node. Use any value for CSS `box-shadow`",
           "default": "rgba(0, 0, 0, 0.55) 0px 20px 68px"
         },
-        "polacode.background": {
-          "type": "string",
-          "description": "Background of the container node. Use any value for CSS `background`",
-          "default": "rgba(242, 242, 242, 1)"
+        "polacode.transparentBackground": {
+          "type": "boolean",
+          "description": "Transparent background for containers",
+          "default": false
         },
         "polacode.target": {
           "type": "string",

src/extension.js

@@ -111,7 +111,7 @@ function activate(context) {
       panel.webview.postMessage({
         type: 'updateSettings',
         shadow: settings.get('shadow'),
-        background: settings.get('background'),
+        transparentBackground: settings.get('transparentBackground'),
         target: settings.get('target')
       })
     }

webview/index.js

@@ -2,6 +2,7 @@
   const vscode = acquireVsCodeApi()
 
   let target = 'container'
+  let transparentBackground = false
 
   vscode.postMessage({
     type: 'getAndUpdateCacheAndSettings'
@@ -141,7 +142,8 @@
       height,
       style: {
         transform: 'scale(2)',
-        'transform-origin': 'center'
+        'transform-origin': 'center',
+        background: `rgba(242, 242, 242, ${transparentBackground ? 0 : 1})`
       }
     }
 
@@ -236,7 +238,7 @@
       } else if (e.data.type === 'updateSettings') {
         snippet.style.boxShadow = e.data.shadow
         target = e.data.target
-        snippetContainerNode.style.background = e.data.background
+        transparentBackground = e.data.transparentBackground
       }
     }
   })