feat: suitable for theme for input

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["amodio.tsl-problem-matcher", "emeraldwalk.runonsave"]
+  "recommendations": [
+    "amodio.tsl-problem-matcher",
+    "emeraldwalk.runonsave",
+    "connor4312.css-theme-completions"
+  ]
 }

README.md

@@ -4,8 +4,11 @@
 
 * [usewiki2](https://github.com/oeyoews/usewiki2) 浏览器扩展的 的 vscode 插件
 
-<!-- * manage: https://marketplace.visualstudio.com/manage/publishers/oeyoews
-* publish: https://vscode.github.net.cn/api/working-with-extensions/publishing-extension -->
+<!--
+* manage: https://marketplace.visualstudio.com/manage/publishers/oeyoews
+* publish: https://vscode.github.net.cn/api/working-with-extensions/publishing-extension
+* https://code.visualstudio.com/api/extension-guides/webview
+-->
 
 ## TODO
 
@@ -23,4 +26,4 @@ pnpm dev ## and press `F5` to debug
 
 ## Credits
 
-https://github.com/microsoft/vscode-extension-samples/blob/main/webview-view-sample
+https://github.com/microsoft/vscode-extension-samples/blob/main/webview-view-sample

package.json

@@ -2,7 +2,7 @@
   "publisher": "oeyoews",
   "name": "usewiki2",
   "displayName": "usewiki2",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "private": true,
   "packageManager": "[email protected]",
   "description": "",

packages/react/src/App.css

@@ -29,3 +29,9 @@ img {
 	max-width: 100%;
 	height: auto;
 } */
+
+.input-bg {
+  border: none;
+  background: var(--vscode-input-background) !important;
+  color: var(--vscode-input-foreground) !important;
+}

packages/react/src/App.tsx

@@ -40,6 +40,7 @@ function App() {
   }
 
   return (
+    // vscode-dark
     <div className="relative h-screen">
       <h1 className="text-3xl font-bold">TiddlyWiki</h1>
       <ContextMenu>
@@ -50,13 +51,12 @@ function App() {
           <ContextMenuItem>Coming</ContextMenuItem>
         </ContextMenuContent>
       </ContextMenu>
-
       <div className="absolute inset-x-0 bottom-2 flex flex-col gap-2 p-0">
         <Input
           ref={inputRef}
           type="text"
           placeholder="input..."
-          className="focus-visible:ring-0"
+          className="focus-visible:ring-0 border-none input-bg"
           onKeyDown={handleInputBoxSave}
           onChange={(e) => setInputValue(e.target.value)}
           value={inputValue}