💄 style(highlight): fix highlight select color and support wildcards

lobehub · Jul 5, 2023 · 34547c4 · 34547c4
1 parent 365b12f
commit 34547c4
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git a/javascript/main.js b/javascript/main.js
diff --git a/src/modules/PromptHighlight/prompt.tmLanguage.json b/src/modules/PromptHighlight/prompt.tmLanguage.json
@@ -43,6 +43,10 @@
     {
       "match": "\\d+(\\.\\d+)?",
       "name": "number"
+    },
+    {
+      "match": "__.*__",
+      "name": "wildcards"
     }
   ],
 

diff --git a/src/modules/PromptHighlight/promptTheme.ts b/src/modules/PromptHighlight/promptTheme.ts
@@ -5,6 +5,7 @@ export const themeConfig: any = (isDarkMode: ThemeAppearance) => {
   const type = isDarkMode ? 'dark' : 'light';
 
   const colorTextTertiary = isDarkMode ? colorScales.gray[type][6] : colorScales.gray[type][7];
+  const colorYellow = isDarkMode ? colorScales.yellow[type][9] : colorScales.yellow[type][10];
   const colorOrange = isDarkMode ? colorScales.gold[type][9] : colorScales.orange[type][9];
   const colorGreen = isDarkMode ? colorScales.lime[type][9] : colorScales.green[type][10];
   const colorBlue = isDarkMode ? colorScales.blue[type][9] : colorScales.geekblue[type][8];
@@ -66,6 +67,13 @@ export const themeConfig: any = (isDarkMode: ThemeAppearance) => {
           foreground: colorPurple,
         },
       },
+      {
+        scope: 'wildcards',
+        settings: {
+          fontStyle: 'italic',
+          foreground: colorYellow,
+        },
+      },
     ],
     type,
   };

diff --git a/src/modules/PromptHighlight/style.ts b/src/modules/PromptHighlight/style.ts
@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, token }) => ({
+export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css``,
   editor: css`
     resize: vertical;
@@ -43,7 +43,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 
     &::selection {
       color: #000;
-      background: ${token.yellow3A};
+      background: ${isDarkMode ? token.yellow3A : token.yellow6A};
     }
 
     &:focus {