feat: improved autocompletion look
mellbacon committed
Aug 19, 2024 at 12:04 UTC
f6fefcbc3ef1b2b04334c4f60db090e6fa4bf85d
3 files changed
+34
-7
src/config/extensions/default_themes/themes/default_dark.json
+6
@@ -95,6 +95,12 @@
95
"editor.activeLineBackground": "#212121",
96
"editor.activeLineBorder": "",
97
"editor.activeIndentLineColor": "#a5a5a5",
98
+ "editor.tooltipForeground": "#e4e4e4",
99
+ "editor.tooltipBackground": "#212121",
100
+ "editor.tooltipActiveBackground": "#1d4a97",
101
+ "editor.tooltipActiveForeground": "#e4e4e4",
102
+ "editor.tooltipBorder": "#353535",
103
+ "editor.tooltipCompletionForeground": "#50a5ff",
104
105
"filetree.treeNodeBackground": "",
106
"filetree.treeNodeForeground": "#808080",
src/config/extensions/default_themes/themes/default_light.json
+6
@@ -94,6 +94,12 @@
94
"editor.activeLineBackground": "#7e7e7e2b",
95
"editor.activeLineBorder": "",
96
"editor.activeIndentLineColor": "#000000",
97
+ "editor.tooltipForeground": "#3a3a3a",
98
+ "editor.tooltipBackground": "#f5f5f5",
99
+ "editor.tooltipActiveBackground": "#4371c1",
100
+ "editor.tooltipActiveForeground": "#e4e4e4",
101
+ "editor.tooltipBorder": "#bbbbbb",
102
+ "editor.tooltipCompletionForeground": "#56a8ff",
103
104
"filetree.treeNodeBackground": "",
105
"filetree.treeNodeForeground": "#3D3D3D",
src/config/themehandler.ts
+22
-7
@@ -85,18 +85,33 @@ export async function loadTheme(name: string) {
85
color: getThemeProperty("editor-gutterActiveForeground")
86
},
87
".cm-tooltip": {
88
- border: "0.5px solid #292929",
89
- backgroundColor: getThemeProperty("editor-background"),
90
- color: getThemeProperty("window-foreground")
88
+ border: `1px solid ${getThemeProperty("editor-tooltipBorder")}`,
89
+ backgroundColor: getThemeProperty("editor-tooltipBackground"),
90
+ color: getThemeProperty("editor-tooltipForeground"),
91
},
92
".cm-tooltip-autocomplete": {
93
+ "& > ul": {
94
+ maxHeight: "12em !important",
95
+ fontWeight: "500"
96
+ },
97
"& > ul > li[aria-selected]": {
94
- backgroundColor: getThemeProperty("editor-activeLineBackground"),
95
- color: getThemeProperty("test-color")
98
+ backgroundColor: getThemeProperty("editor-tooltipActiveBackground"),
99
+ color: getThemeProperty("editor-tooltipActiveForeground")
100
+ },
101
+ "& > ul > li": {
102
+ padding: "2px 3px !important"
103
}
97
- }
104
+ },
105
+ ".cm-completionMatchedText": {
106
+ textDecoration: "none",
107
+ color: getThemeProperty("editor-tooltipCompletionForeground")
108
+ },
109
+ "&.cm-focused .cm-matchingBracket": {
110
+ backgroundColor: "transparent",
111
+ outline: "0.5px solid #5c5c5c"
112
+ }
113
},
99
- { dark: true }
114
+ { dark: get(is_dark_theme) }
115
))
116
editorHighlightStyle.set(HighlightStyle.define(tokens));
117