Add dark theme.

cweijan · Mar 4, 2024 · 6515478 · 6515478
1 parent dd8f318
commit 6515478
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 21 deletions.
diff --git a/resource/vditor/css/base.css b/resource/vditor/css/base.css
@@ -38,10 +38,6 @@
     color: var(--front-color) !important;
 }
 
-body[data-vscode-theme-name='One Dark Modern Classic'] .vditor-content code:not(.hljs) {
-    color: #abb2bf !important;
-}
-
 /* 编辑模式 */
 body[data-vscode-theme-kind="vscode-dark"] .vditor-content .vditor-wysiwyg__pre>code {
     background-color: #313131 !important;
@@ -62,21 +58,6 @@ body[data-vscode-theme-kind="vscode-dark"] .vditor-content .vditor-wysiwyg__prev
     background-color: #2E2E2E !important;
 }
 
-body[data-vscode-theme-name='One Dark Modern Classic'] .vditor-toolbar {
-    background-color: var(--second-bg-color) !important;
-}
-
-body[data-vscode-theme-name='One Dark Modern Classic'] .vditor {
-    background-color: var(--second-bg-color) !important;
-}
-
-body[data-vscode-theme-name='One Dark Modern Classic'] .vditor-content,
-body[data-vscode-theme-name='One Dark Modern Classic'] .vditor-content *:not(.hljs, .hljs *, .katex, .katex *, a, hr, .vditor-reset--error,code) {
-    background-color: var(--second-bg-color) !important;
-    color: #abb2bf !important;
-}
-
-
 .vditor,
 .vditor-content,
 .vditor-content *:not(.hljs, .hljs *, .katex, .katex *, a, hr, .vditor-reset--error,code) {

diff --git a/resource/vditor/css/theme/Dracula.css b/resource/vditor/css/theme/Dracula.css
@@ -0,0 +1,11 @@
+:root {
+    --hr-bg: #bd93f9;
+    --ext-border-color: rgba(255, 255, 255, 0.1);
+    --bg-color:  #282a36;
+    --front-color: #f8f8f2;
+    --second-bg-color:#21222c;
+    --code-bg-color:  #222222;
+    --list-hover-color:#bd93f9;
+    --dropdown-hover-background: #44475a;
+    --error-color: #ff5555;
+}
diff --git a/resource/vditor/css/theme/Github Dark.css b/resource/vditor/css/theme/Github Dark.css
@@ -0,0 +1,11 @@
+:root {
+    --hr-bg: #444c56;
+    --ext-border-color: rgba(255, 255, 255, 0.1);
+    --bg-color: #22272e;
+    --front-color: #adbac7;
+    --second-bg-color: #2d333b;
+    --code-bg-color: #1c2128;
+    --list-hover-color: #539bf5;
+    --dropdown-hover-background: rgba(99, 110, 123, 0.4);
+    --error-color: #f14c4c;
+}
diff --git a/src/provider/markdownEditorProvider.ts b/src/provider/markdownEditorProvider.ts
@@ -116,9 +116,12 @@ export class MarkdownEditorProvider implements vscode.CustomTextEditorProvider {
             new MarkdownService(this.context).exportMarkdown(uri, option)
         }).on("theme", async (theme) => {
             if (!theme) {
-                const themes = ["Auto", "Light", "Solarized"]
+                const themes = ["Auto", "|", "Light", "Solarized", "|", "Dracula", "Github Dark"]
                 const editorTheme = Global.getConfig('editorTheme');
-                const themeItems: vscode.QuickPickItem[] = themes.map(theme => ({ label: theme, description: theme == editorTheme ? 'Current' : undefined }))
+                const themeItems: vscode.QuickPickItem[] = themes.map(theme => {
+                    if (theme == '|') return { label: '|', kind: vscode.QuickPickItemKind.Separator }
+                    return { label: theme, description: theme == editorTheme ? 'Current' : undefined }
+                })
                 theme = await vscode.window.showQuickPick(themeItems, { placeHolder: "Select Editor Theme" });
                 if (!theme) return
             }