1
0
forked from Leaf/amber-ui

改进 深色模式

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

View File

@ -32,7 +32,11 @@
:plugins="markdownPlugins"
/> -->
<!-- <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">
<n-avatar
round
@ -91,7 +95,7 @@ import leaflowPng from "@/assets/images/leaflow.png";
import markdownKatex from "@traptitech/markdown-it-katex";
import markdownIt from "markdown-it";
// highlightjs
import hljs from "highlight.js";
// import hljs from "highlight.js";
import config from "@/config/config";
import Shiki from "@shikijs/markdown-it";

View File

@ -47,4 +47,16 @@ body {
.markdown-body ol {
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;
}
}