jwai/amber-ui-re
1
0
Fork 0
forked from Leaf/amber-ui
Code Pull Requests Activity

改进 深色模式

Browse Source
This commit is contained in:
Twilight 2024-09-16 12:07:04 +08:00
parent 7bf232be6a
commit a26f0bf385
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/chat/MessageList.vue
View File

@ -32,7 +32,11 @@
:plugins="markdownPlugins" :plugins="markdownPlugins"
/> --> /> -->
<!-- <v-md-preview :text="message.content" height="500px"></v-md-preview> --> <!-- <v-md-preview :text="message.content" height="500px"></v-md-preview> -->
<div v-if="mdInited" class="markdown-body" v-html="mdIt.render(message.content)"></div> <div
v-if="mdInited"
class="markdown-body"
v-html="mdIt.render(message.content)"
></div>
<div class="relative h-full"> <div class="relative h-full">
<n-avatar <n-avatar
round round
@ -91,7 +95,7 @@ import leaflowPng from "@/assets/images/leaflow.png";
import markdownKatex from "@traptitech/markdown-it-katex"; import markdownKatex from "@traptitech/markdown-it-katex";
import markdownIt from "markdown-it"; import markdownIt from "markdown-it";
// highlightjs // highlightjs
import hljs from "highlight.js"; // import hljs from "highlight.js";
import config from "@/config/config"; import config from "@/config/config";
import Shiki from "@shikijs/markdown-it"; import Shiki from "@shikijs/markdown-it";

14
src/style.css
View File

@ -47,4 +47,16 @@ body {
.markdown-body ol { .markdown-body ol {
list-style: decimal; list-style: decimal;
} }
@media (prefers-color-scheme: dark) {
.shiki,
.shiki span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
/* 可选，用于定义字体样式 */
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
}