feat: custom suggest-widget style

purocean · Sep 21, 2023 · 18efc12 · 18efc12 · vercel · Sep 21, 2023
1 parent f81b71c
commit 18efc12
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/renderer/components/MonacoEditor.vue b/src/renderer/components/MonacoEditor.vue
@@ -109,7 +109,9 @@ export default defineComponent({
 }
 </style>
 
-<style>
+<style lang="scss">
+@import '@fe/styles/mixins.scss';
+
 .monaco-editor .inputarea {
   display: unset;
   box-sizing: content-box;
@@ -120,4 +122,24 @@ export default defineComponent({
 .monaco-editor .margin-view-overlays {
   user-select: none;
 }
+
+.editor .monaco-editor .suggest-widget {
+  background-color: rgba(var(--g-color-98-rgb), 0.6);
+  backdrop-filter: var(--g-backdrop-filter);
+  border-radius: var(--g-border-radius);
+  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
+  --vscode-editorSuggestWidget-selectedBackground: var(--g-color-active-a);
+  --vscode-list-hoverBackground: var(--g-color-active-x);
+  --vscode-editorSuggestWidget-selectedForeground: var(--g-color-0);
+  --vscode-editorSuggestWidget-focusHighlightForeground: var(--vscode-editorSuggestWidget-highlightForeground);
+}
+
+@include dark-theme {
+  .editor .monaco-editor .suggest-widget {
+    background: rgba(var(--g-color-86-rgb), 0.65);
+    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 10px;
+    --vscode-editorSuggestWidget-selectedBackground: var(--g-color-active-b);
+    --vscode-list-hoverBackground: var(--g-color-active-a);
+  }
+}
 </style>
diff --git a/src/renderer/styles/index.scss b/src/renderer/styles/index.scss
@@ -34,6 +34,7 @@
   --g-color-accent: rgb(20, 112, 251);
   --g-color-anchor: #4c93e2;
 
+  --g-color-active-x: #{rgba(var(--g-color-0-rgb), 0.05)};
   --g-color-active-a: #{rgba(var(--g-color-0-rgb), 0.1)};
   --g-color-active-b: #{rgba(var(--g-color-0-rgb), 0.15)};
   --g-color-active-c: #{rgba(var(--g-color-0-rgb), 0.2)};