Ver Fonte

feat(主题): 添加暗色主题样式文件

添加editordark.css和vuepressdark.css样式文件,为编辑器及文档页面实现暗色主题支持
- 使用CSS变量(--background-color等)实现主题切换
- 适配编辑器各组件及VuePress文档的暗色样式
- 包括文本颜色、背景色、边框、滚动条等元素的暗色适配
Sakulin há 2 meses atrás
pai
commit
7103d6a45c
2 ficheiros alterados com 281 adições e 0 exclusões
  1. 103 0
      src/assets/editordark.css
  2. 178 0
      src/assets/vuepressdark.css

+ 103 - 0
src/assets/editordark.css

@@ -0,0 +1,103 @@
+.v-md-textarea-editor pre,
+.v-md-textarea-editor textarea {
+  background-color: var(--background-color) !important;
+}
+
+.v-md-editor__menu {
+  background-color: var(--background-color) !important;
+}
+
+.v-md-editor {
+  background-color: var(--background-color) !important;
+}
+
+.v-md-editor__toolbar-item--active,
+.v-md-editor__toolbar-item--active:hover {
+  background: var(--secondary-background-color) !important;
+}
+
+.v-md-editor__tooltip {
+  background-color: var(--secondary-background-color) !important;
+}
+
+.v-md-editor__menu-item:hover {
+  background-color: var(--secondary-background-color); /* 菜单项悬停背景改为暗色 */
+}
+.v-md-editor__toolbar-item:hover {
+  background: var(--secondary-background-color); /* 工具栏项悬停背景改为暗色 */
+}
+.v-md-editor__toolbar {
+  border-bottom: 1px solid var(--secondary-background-color); /* 工具栏底部边框颜色改为暗色 */
+}
+
+.v-md-editor__toolbar-divider:before {
+  border-left: 1px solid var(--secondary-background-color); /* 工具栏分隔线颜色改为暗色 */
+}
+
+.v-md-editor__left-area {
+  border-right: 1px solid var(--secondary-background-color); /* 左侧区域右边框颜色改为暗色 */
+}
+
+.v-md-editor__left-area-title:after {
+  border-bottom: 1px solid var(--secondary-background-color); /* 左侧区域标题底部边框颜色改为暗色 */
+}
+
+.v-md-editor--left-area-reverse .v-md-editor__left-area {
+  border-left: 1px solid var(--secondary-background-color); /* 反转左侧区域左边框颜色改为暗色 */
+}
+
+.v-md-editor--editable .v-md-editor__editor-wrapper {
+  border-right: 1px solid var(--secondary-background-color); /* 可编辑区域右边框颜色改为暗色 */
+}
+
+@media (prefers-color-scheme: dark) {
+  /* Dark For V Md Editor */
+  .v-md-textarea-editor pre,
+  .v-md-textarea-editor textarea {
+    color: #e0e0e0;
+  }
+
+  .v-md-textarea-editor textarea::-webkit-input-placeholder {
+    color: #707070; /* 输入提示颜色调暗 */
+  }
+
+  .v-md-textarea-editor textarea::placeholder {
+    color: #707070; /* 输入提示颜色调暗 */
+  }
+
+  .v-md-editor__tooltip {
+    color: #ffffff;
+  }
+
+  .v-md-editor__menu::-webkit-scrollbar-thumb {
+    background-color: rgba(80, 80, 80, 0.3); /* 滚动条拇指颜色调暗 */
+  }
+
+  .v-md-editor__menu::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(80, 80, 80, 0.5); /* 滚动条拇指悬停颜色调暗 */
+  }
+
+  .v-md-editor__menu-item {
+    color: #e0e0e0; /* 菜单项文字改为较亮的颜色 */
+  }
+
+  .v-md-editor__toolbar-item {
+    color: #e0e0e0; /* 工具栏项文字改为较亮的颜色 */
+  }
+
+  .v-md-editor__left-area-title {
+    color: #e0e0e0; /* 左侧区域标题文字改为较亮的颜色 */
+  }
+
+  .scrollbar__thumb {
+    background-color: rgba(80, 80, 80, 0.3); /* 滚动条拇指颜色调暗 */
+  }
+
+  .scrollbar__thumb:hover {
+    background-color: rgba(80, 80, 80, 0.5); /* 滚动条拇指悬停颜色调暗 */
+  }
+
+  .v-md-editor__toc-nav-item {
+    color: #e0e0e0; /* 目录导航项文字改为较亮的颜色 */
+  }
+}

+ 178 - 0
src/assets/vuepressdark.css

@@ -0,0 +1,178 @@
+.vuepress-markdown-body {
+  background-color: var(--background-color);
+}
+
+@media (prefers-color-scheme: dark) {
+  .vuepress-markdown-body code[class*='v-md-prism-'],
+  .vuepress-markdown-body pre[class*='v-md-prism-'] {
+    color: #ddd;
+    background: none;
+  }
+  .vuepress-markdown-body :not(pre) > code[class*='v-md-prism-'],
+  .vuepress-markdown-body pre[class*='v-md-prism-'] {
+    background: #1a1a1a;
+  }
+  .vuepress-markdown-body .token.block-comment,
+  .vuepress-markdown-body .token.cdata,
+  .vuepress-markdown-body .token.comment,
+  .vuepress-markdown-body .token.doctype,
+  .vuepress-markdown-body .token.prolog {
+    color: #888;
+  }
+  .vuepress-markdown-body .token.punctuation {
+    color: #ddd;
+  }
+  .vuepress-markdown-body .token.attr-name,
+  .vuepress-markdown-body .token.deleted,
+  .vuepress-markdown-body .token.namespace,
+  .vuepress-markdown-body .token.tag {
+    color: #ff6b6e;
+  }
+  .vuepress-markdown-body .token.function-name {
+    color: #4a90e2;
+  }
+  .vuepress-markdown-body .token.boolean,
+  .vuepress-markdown-body .token.function,
+  .vuepress-markdown-body .token.number {
+    color: #ff9f43;
+  }
+  .vuepress-markdown-body .token.class-name,
+  .vuepress-markdown-body .token.constant,
+  .vuepress-markdown-body .token.property,
+  .vuepress-markdown-body .token.symbol {
+    color: #ffd700;
+  }
+  .vuepress-markdown-body .token.atrule,
+  .vuepress-markdown-body .token.builtin,
+  .vuepress-markdown-body .token.important,
+  .vuepress-markdown-body .token.keyword,
+  .vuepress-markdown-body .token.selector {
+    color: #ba55d3;
+  }
+  .vuepress-markdown-body .token.attr-value,
+  .vuepress-markdown-body .token.char,
+  .vuepress-markdown-body .token.regex,
+  .vuepress-markdown-body .token.string,
+  .vuepress-markdown-body .token.variable {
+    color: #50fa7b;
+  }
+  .vuepress-markdown-body .token.entity,
+  .vuepress-markdown-body .token.operator,
+  .vuepress-markdown-body .token.url {
+    color: #8be9fd;
+  }
+  .vuepress-markdown-body .token.inserted {
+    color: #00ff00;
+  }
+  .vuepress-markdown-body code {
+    color: #a0a0a0;
+    background-color: #2d2d2d;
+  }
+  .vuepress-markdown-body code .token.deleted {
+    color: #ff4d4f;
+  }
+  .vuepress-markdown-body code .token.inserted {
+    color: #52c41a;
+  }
+  .vuepress-markdown-body pre,
+  .vuepress-markdown-body pre[class*='v-md-prism-'] {
+    background-color: #1e1e1e;
+  }
+  .vuepress-markdown-body pre[class*='v-md-prism-'] code,
+  .vuepress-markdown-body pre code {
+    color: #fff;
+    background-color: initial;
+  }
+  .vuepress-markdown-body div[class*='v-md-pre-wrapper-'] {
+    background-color: #1e1e1e;
+  }
+  .vuepress-markdown-body div[class*='v-md-pre-wrapper-']:before {
+    color: hsla(0, 0%, 100%, 0.5);
+  }
+  .vuepress-markdown-body div[class*='v-md-pre-wrapper-'].line-numbers-mode .line-numbers-wrapper {
+    color: hsla(0, 0%, 100%, 0.4);
+  }
+  .vuepress-markdown-body div[class*='v-md-pre-wrapper-'].line-numbers-mode:after {
+    background-color: #1e1e1e;
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  .vuepress-markdown-body .arrow.up {
+    border-bottom: 6px solid #ddd;
+  }
+  .vuepress-markdown-body .arrow.down {
+    border-top: 6px solid #ddd;
+  }
+  .vuepress-markdown-body .arrow.right {
+    border-left: 6px solid #ddd;
+  }
+  .vuepress-markdown-body .arrow.left {
+    border-right: 6px solid #ddd;
+  }
+  .vuepress-markdown-body {
+    color: #e0e0e0;
+  }
+  .vuepress-markdown-body:not(.custom) p.demo {
+    border: 1px solid #333;
+  }
+  .vuepress-markdown-body kbd {
+    background: #333;
+    border: 0.15rem solid #444;
+    border-bottom: 0.25rem solid #444;
+  }
+  .vuepress-markdown-body blockquote {
+    color: #888;
+    border-left: 0.2rem solid #333;
+  }
+  .vuepress-markdown-body h2 {
+    border-bottom: 1px solid #333;
+  }
+  .vuepress-markdown-body hr {
+    border-top: 1px solid #333;
+  }
+  .vuepress-markdown-body tr {
+    border-top: 1px solid #333;
+  }
+  .vuepress-markdown-body tr:nth-child(2n) {
+    background-color: #1a1a1a;
+  }
+  .vuepress-markdown-body td,
+  .vuepress-markdown-body th {
+    border: 1px solid #333;
+  }
+  .vuepress-markdown-body .v-md-svg-outbound {
+    color: #888;
+  }
+  .v-md-plugin-tip.tip {
+    background-color: #1a1a1a;
+    border-color: #42b983;
+  }
+  .v-md-plugin-tip.warning {
+    color: #ffd700;
+    background-color: rgba(255, 215, 0, 0.1);
+    border-color: #ffd700;
+  }
+  .v-md-plugin-tip.warning .v-md-plugin-tip-title {
+    color: #ffd700;
+  }
+  .v-md-plugin-tip.warning a {
+    color: #e0e0e0;
+  }
+  .v-md-plugin-tip.danger {
+    color: #ff4d4f;
+    background-color: rgba(255, 77, 79, 0.1);
+    border-color: #ff4d4f;
+  }
+  .v-md-plugin-tip.danger .v-md-plugin-tip-title {
+    color: #ff4d4f;
+  }
+  .v-md-plugin-tip.danger a {
+    color: #e0e0e0;
+  }
+  .v-md-plugin-tip.details {
+    background-color: #1a1a1a;
+  }
+  .vuepress-markdown-body a,
+  .vuepress-markdown-body p a code {
+    color: #61dafb;
+  }
+}