style: dark theme for scroller

src/pages/playground/components/view-code-modal.tsx

@@ -113,8 +113,8 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     return '';
   }, [lang, payload, parameters, api, clientType, logcommand]);
 
-  const handleOnChangeLang = (value: string) => {
-    setLang(value);
+  const handleOnChangeLang = (value: string | number) => {
+    setLang(value as string);
   };
 
   const handleClose = () => {
@@ -152,20 +152,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
               }
             }}
           >
-            <div
-              style={{
-                paddingRight: 2,
-                paddingBottom: 2
-              }}
-            >
-              <HighlightCode
-                height={380}
-                theme="dark"
-                code={codeValue}
-                lang={lang}
-                copyable={false}
-              ></HighlightCode>
-            </div>
+            <HighlightCode
+              height={380}
+              theme="dark"
+              code={codeValue}
+              lang={lang}
+              copyable={false}
+            ></HighlightCode>
           </EditorWrap>
           <div
             style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}

src/pages/playground/components/view-common-code.tsx

@@ -86,20 +86,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
               }
             }}
           >
-            <div
-              style={{
-                paddingRight: 2,
-                paddingBottom: 2
-              }}
-            >
-              <HighlightCode
-                height={380}
-                theme="dark"
-                code={codeValue}
-                lang={lang}
-                copyable={false}
-              ></HighlightCode>
-            </div>
+            <HighlightCode
+              height={380}
+              theme="dark"
+              code={codeValue}
+              lang={lang}
+              copyable={false}
+            ></HighlightCode>
           </EditorWrap>
           <div
             style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}

src/pages/playground/style/message-input.less

@@ -80,11 +80,17 @@
     width: 100%;
     display: flex;
     position: relative;
+    background-color: var(--ant-color-bg-elevated);
+    border-radius: var(--border-radius-base);
+
+    textarea {
+      padding-block-start: var(--ant-padding-xxs);
+    }
 
     .holder {
       pointer-events: none;
       position: absolute;
-      top: 0;
+      top: var(--ant-padding-xxs);
       left: 6px;
       color: var(--ant-color-text-quaternary);