diff --git a/hdc/service/service-gen/src/tools/common.js b/hdc/service/service-gen/src/tools/common.js
index e176ca5d52019a9a7369eef19c1362b50ae857d4..d241e6b221cfdb1f5e07ce6797ba0e12b05a317a 100755
--- a/hdc/service/service-gen/src/tools/common.js
+++ b/hdc/service/service-gen/src/tools/common.js
@@ -36,7 +36,8 @@ const DATA_R_MAP = new Map(
 const TYPE_DEF_MAP = new Map(
     [["ErrCode", "int32_t"], ["char", "int8_t"], ["short", "int16_t"], ["int", "int32_t"], ["long", "int64_t"],
     ["unsigned char", "uint8_t"], ["unsigned short", "uint16_t"], ["unsigned int", "uint32_t"], 
-    ["unsigned long", "uint64_t"]
+    ["unsigned long", "uint64_t"], ["double_t", "double"], ["float_t", "float"], ["size_t", "double"],
+    ["long long", "double"], ["long double", "double"]
 ]);
 
 // remote消息中vector变量类型名(key)与对应的写parcel方法名(value)的映射（参考parcel.h）
diff --git a/hdc/service/service_vs_plugin/src/extension.js b/hdc/service/service_vs_plugin/src/extension.js
index b2e77b2b6d06d4cee7f923436dbae7268b2ee19a..5a3b2b6fcb0d309357c4c16f6d030c0f14ce8d52 100755
--- a/hdc/service/service_vs_plugin/src/extension.js
+++ b/hdc/service/service_vs_plugin/src/extension.js
@@ -45,6 +45,12 @@ function activate(context) {
 	} else if (platform == 'Linux') {
 		exeFilePath = __dirname + "/service-gen-linux";
 	}
+	vscode.window.onDidChangeActiveColorTheme(colorTheme => {
+		var result = {
+			msg: "colorThemeChanged"
+		}
+		globalPanel.webview.postMessage(result);
+	});
 }
 
 function executorService(name, genDir, serviceId) {
diff --git a/hdc/service/service_vs_plugin/src/images/file_black.png b/hdc/service/service_vs_plugin/src/images/file_black.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd54e8a66190cee967d71270a1375952c59c4ccb
Binary files /dev/null and b/hdc/service/service_vs_plugin/src/images/file_black.png differ
diff --git a/hdc/service/service_vs_plugin/src/vs_plugin_view.html b/hdc/service/service_vs_plugin/src/vs_plugin_view.html
index af14b662fb1af435a896dc07abd4f1b477ceddd1..1d82681c1e448c825339e89a2305379e431adea9 100755
--- a/hdc/service/service_vs_plugin/src/vs_plugin_view.html
+++ b/hdc/service/service_vs_plugin/src/vs_plugin_view.html
@@ -2,51 +2,49 @@
 <html lang="en" style="width: 100%; height: 100%;">
 <head>
     <meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Napi</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Napi</title>
 </head>
 <style type="text/css">
-        body {
-			background-color: #000000;
-			margin:0 auto;
-			font-family: Consolas, sans-serif;
-		}
-        a  {
-			text-decoration: none;
-		}
+    body {
+        background-color: var(--vscode-editor-background, #000000);
+        margin:0 auto;
+        font-family: "Microsoft YaHei";
+        opacity: 0.9;
+    }
+    a  {
+        text-decoration: none;
+    }
 
-		button.button {
-			background-color: #ffffff;
-            font-family: Consolas, sans-serif;
-            font-size: 16px;
-            border-radius: 3px;
-            border-color: #C4C4C4;
-            align-self: center;
-            border: 1px solid #C4C4C4;
-            outline: none;
-			width: 100px; 
-			height:24px
-		}
+    button.button {
+        background-color: #ffffff;
+        font-family: Consolas, sans-serif;
+        font-size: 16px;
+        border-radius: 3px;
+        border-color: #C4C4C4;
+        align-self: center;
+        border: 1px solid #C4C4C4;
+        outline: none;
+        width: 100px; 
+        height:24px
+    }
 
-		button.button:hover {
-			background: #4B97D9;
-			color: #fff;
-			border: 0px;
-			font-family: Consolas, sans-serif;
-            font-size: 16px;
-			width: 100px; 
-			height: 24px
-		}
+    input.text {
+        width: 250px; 
+        vertical-align:middle;
 
-		input.text:focus {
-			outline: 2px solid #4B97D9;
-  			border: 0px;
-        }
+        background-color: var(--vscode-editor-background, #000000);
+        color: var(--vscode-editor-foreground, #ffffff);
+        border-radius: 6px;
+        border: 1px solid #555555;
+        opacity: 0.9;
+        height: 24px;
+    }
+    input.text:hover {
+        outline: none;
+        border-color: var(--vscode-focusBorder, #272727);
+    }
 
-		input.text {
-			outline: 2px solid #C4C4C4;
-			border: 0px;
-		}
     .tabs{
         position: relative;
         height: 800px;
@@ -71,23 +69,7 @@
         color: #333333;
         background: white;
     }
-    input.text {
-		width: 250px;
-        height: 18px; 
-        vertical-align:middle;
-		}
-    .content{
-        position: absolute;
-        top: 61px;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: black;
-        padding: 20px 20px;
-        border: 0px solid #ccc;
-        max-height: 800px;
-        overflow: scroll;
-    }
+
     [type=radio]:checked ~ label{
         color: white;
         background: #3288e9;
@@ -103,17 +85,17 @@
     let vscode = acquireVsCodeApi();
 
     function sendParamMsg() {
-		var fileNames = document.getElementById("hFilePath").value;
-		var genDir = document.getElementById("genHResultDir").value;
+        var fileNames = document.getElementById("hFilePath").value;
+        var genDir = document.getElementById("genHResultDir").value;
         var serviceId = document.getElementById("serviceID").value;
-		var result = {
-			msg: "param",
-			fileNames: fileNames,
-			genDir: genDir,
+        var result = {
+            msg: "param",
+            fileNames: fileNames,
+            genDir: genDir,
             serviceId: serviceId,
-		}
-		vscode.postMessage(result);
-	}
+        }
+        vscode.postMessage(result);
+    }
     function selectHFilePath() {
         var fileNames = document.getElementById("hFilePath").value;
         var result = {
@@ -148,6 +130,8 @@
             fillInputDir(path);
         } else if(message == "selectHResultDir") {
             document.getElementById("genHResultDir").value = path;
+        } else if (message == "colorThemeChanged") {
+            reloadFileImgPic();
         }
         else {
             console.log("param is error");
@@ -194,7 +178,27 @@
             document.getElementById("error").innerHTML="";
         }
     }
+    function isDarkColor(colorArr) {
+        let grayLevel = colorArr[0] * 0.299 + colorArr[1] * 0.587 + colorArr[2] * 0.114;
+        return grayLevel < 192;
+    }
+
+    function reloadFileImgPic() {
+        var bodyobj = document.getElementsByTagName("body")[0];
+        var bgStyle = document.defaultView.getComputedStyle(bodyobj, null);  
+        var bgColor = bgStyle.getPropertyValue("background-color").match(/\d{1,3}/g); 
+        var isDarkBackground = true;
+        if (bgColor) { 
+            isDarkBackground = isDarkColor(bgColor);
+        }
 
+        var fileImgPng = isDarkBackground ? "file.png" : "file_black.png"
+        var currentFileImgPath = document.getElementById("hFilePathImg").src;
+        var fileImgPath = currentFileImgPath.substr(0, currentFileImgPath.lastIndexOf("/") + 1);
+        fileImgPath += fileImgPng;
+        document.getElementById("hFilePathImg").src = fileImgPath;
+        document.getElementById("genHResultDirImg").src = fileImgPath;
+    }
 </script>
 
 <body>
@@ -208,7 +212,7 @@
                         <td width="110px">.h文件选择*:</td>
                         <td width="340px">
                             <input class="text" type="text" id="hFilePath" onchange="inputChange()" onporpertychange="inputChange() ">
-                            <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;"
+                            <img id="hFilePathImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;"
                                 onclick="selectHFilePath()">
                         </td>
                     </tr>
@@ -217,7 +221,7 @@
                         <td>输出路径选择:</td>
                         <td>
                             <input class="text" accept="text" id="genHResultDir">
-                            <img src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;"
+                            <img id="genHResultDirImg" src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;"
                                 onclick="selectPath('selectHResultDir')">
                         </td>
                     </tr>
@@ -257,5 +261,7 @@
         </div>
     </div>
 </body>
-
-</html>
\ No newline at end of file
+</html>
+<script>
+    reloadFileImgPic();
+</script>
\ No newline at end of file
