263 lines
8.1 KiB
CSS
263 lines
8.1 KiB
CSS
/* ============================================================
|
|
Halo Dark Mode — 富文本编辑器覆盖
|
|
@halo-dev/richtext-editor + TipTap / ProseMirror
|
|
+ Bytemd (Markdown 编辑器) + CodeMirror
|
|
============================================================ */
|
|
|
|
[data-halo-theme="dark"] {
|
|
/* ===== Bytemd Markdown 编辑器 ===== */
|
|
.bytemd {
|
|
background-color: var(--halo-bg-card) !important;
|
|
color: var(--halo-text-primary) !important;
|
|
border-color: var(--halo-border-base) !important;
|
|
}
|
|
.bytemd-toolbar {
|
|
background-color: var(--halo-bg-content) !important;
|
|
color: var(--halo-text-primary) !important;
|
|
border-color: var(--halo-border-light) !important;
|
|
}
|
|
.bytemd-toolbar-icon {
|
|
color: var(--halo-text-secondary) !important;
|
|
}
|
|
.bytemd-toolbar-icon:hover {
|
|
background-color: var(--halo-bg-hover) !important;
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
.bytemd-toolbar-tab-active,
|
|
.bytemd-toolbar-icon-active {
|
|
color: var(--halo-accent-primary) !important;
|
|
}
|
|
.bytemd-editor,
|
|
.bytemd-editor .CodeMirror {
|
|
background-color: var(--halo-bg-input) !important;
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
.bytemd-preview {
|
|
background-color: var(--halo-bg-card) !important;
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
.bytemd-status,
|
|
.bytemd-status-right,
|
|
.bytemd-status-left {
|
|
background-color: var(--halo-bg-content) !important;
|
|
color: var(--halo-text-secondary) !important;
|
|
border-color: var(--halo-border-light) !important;
|
|
}
|
|
.bytemd-dropdown,
|
|
.bytemd-dropdown-menu,
|
|
[class*="bytemd-dropdown"] {
|
|
background-color: var(--halo-bg-dropdown) !important;
|
|
color: var(--halo-text-primary) !important;
|
|
border-color: var(--halo-border-base) !important;
|
|
}
|
|
.bytemd-dropdown-title {
|
|
color: var(--halo-text-secondary) !important;
|
|
}
|
|
.bytemd-dropdown-item {
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
.bytemd-dropdown-item:hover {
|
|
background-color: var(--halo-bg-hover) !important;
|
|
}
|
|
.bytemd-sidebar,
|
|
.bytemd-toc,
|
|
.bytemd-toc ul,
|
|
.bytemd-toc li {
|
|
background-color: var(--halo-bg-content) !important;
|
|
color: var(--halo-text-secondary) !important;
|
|
}
|
|
.bytemd-toc-active {
|
|
background-color: var(--halo-bg-hover) !important;
|
|
color: var(--halo-accent-primary) !important;
|
|
}
|
|
.bytemd-floating-btn {
|
|
background-color: var(--halo-bg-card) !important;
|
|
color: var(--halo-text-secondary) !important;
|
|
border-color: var(--halo-border-base) !important;
|
|
}
|
|
.bytemd-floating-btn:hover {
|
|
background-color: var(--halo-bg-hover) !important;
|
|
}
|
|
.bytemd-floating-btn.active {
|
|
background-color: var(--halo-bg-active) !important;
|
|
color: var(--halo-accent-primary) !important;
|
|
}
|
|
.bytemd-code-theme-toggle,
|
|
.bytemd-copy-code-btn,
|
|
[class*="bytemd"] button {
|
|
color: var(--halo-text-secondary) !important;
|
|
}
|
|
.bytemd-copy-code-btn:hover,
|
|
[class*="bytemd"] button:hover {
|
|
color: var(--halo-text-primary) !important;
|
|
background-color: var(--halo-bg-hover) !important;
|
|
}
|
|
/* 编辑器内 markdown 正文 */
|
|
.bytemd-preview .markdown-body,
|
|
.bytemd-editor .markdown-body {
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
.bytemd-preview .markdown-body p,
|
|
.bytemd-preview .markdown-body li,
|
|
.bytemd-preview .markdown-body h1,
|
|
.bytemd-preview .markdown-body h2,
|
|
.bytemd-preview .markdown-body h3,
|
|
.bytemd-preview .markdown-body h4,
|
|
.bytemd-preview .markdown-body td,
|
|
.bytemd-preview .markdown-body th,
|
|
.bytemd-preview .markdown-body blockquote {
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
.bytemd-preview .markdown-body code,
|
|
.bytemd-preview .markdown-body pre,
|
|
.bytemd-preview .markdown-body pre code {
|
|
background-color: oklch(22% 0.02 250) !important;
|
|
color: oklch(85% 0.05 160) !important;
|
|
}
|
|
.bytemd-preview .markdown-body table tr,
|
|
.bytemd-preview .markdown-body table tr:nth-child(2n) {
|
|
background-color: var(--halo-bg-card) !important;
|
|
}
|
|
.bytemd-preview .markdown-body table td,
|
|
.bytemd-preview .markdown-body table th {
|
|
border-color: var(--halo-border-base) !important;
|
|
}
|
|
|
|
/* ===== CodeMirror 代码编辑器 ===== */
|
|
.CodeMirror {
|
|
background-color: var(--halo-bg-input) !important;
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
.CodeMirror-gutters {
|
|
background-color: var(--halo-bg-content) !important;
|
|
border-color: var(--halo-border-light) !important;
|
|
}
|
|
.CodeMirror-linenumber {
|
|
color: var(--halo-text-tertiary) !important;
|
|
}
|
|
.CodeMirror-cursor {
|
|
border-color: var(--halo-text-primary) !important;
|
|
}
|
|
.CodeMirror-selected {
|
|
background-color: oklch(30% 0.04 160 / 50%) !important;
|
|
}
|
|
.cm-s-default .cm-header,
|
|
.cm-s-default .cm-strong,
|
|
.cm-s-default .cm-em,
|
|
.cm-s-default .cm-link,
|
|
.cm-s-default .cm-url {
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
.cm-s-default .cm-comment {
|
|
color: var(--halo-text-tertiary) !important;
|
|
}
|
|
.cm-s-default .cm-quote {
|
|
color: var(--halo-accent-success) !important;
|
|
}
|
|
.cm-s-default .cm-tag {
|
|
color: var(--halo-accent-primary) !important;
|
|
}
|
|
.CodeMirror pre.CodeMirror-placeholder {
|
|
color: var(--halo-text-tertiary) !important;
|
|
}
|
|
.CodeMirror-activeline-background {
|
|
background-color: var(--halo-bg-hover) !important;
|
|
}
|
|
.CodeMirror-lines {
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
|
|
/* ===== ProseMirror / TipTap 编辑器主体 ===== */
|
|
.ProseMirror,
|
|
.tiptap,
|
|
[class*="editor-content"] {
|
|
color: var(--halo-text-primary);
|
|
background-color: var(--halo-bg-input);
|
|
}
|
|
|
|
/* ===== 编辑器菜单栏 ===== */
|
|
.editor-toolbar,
|
|
.editor-menubar,
|
|
[class*="editor-toolbar"],
|
|
[class*="editor-menubar"] {
|
|
background-color: var(--halo-bg-card);
|
|
border-color: var(--halo-border-base);
|
|
}
|
|
|
|
.editor-toolbar button,
|
|
.editor-menubar button {
|
|
color: var(--halo-text-secondary);
|
|
}
|
|
|
|
.editor-toolbar button:hover,
|
|
.editor-menubar button:hover,
|
|
.editor-toolbar button.is-active,
|
|
.editor-menubar button.is-active {
|
|
background-color: var(--halo-bg-hover);
|
|
color: var(--halo-text-primary);
|
|
}
|
|
|
|
/* ===== 代码块 ===== */
|
|
.ProseMirror pre,
|
|
.ProseMirror code,
|
|
.tiptap pre,
|
|
.tiptap code {
|
|
background-color: oklch(20% 0.015 250);
|
|
color: oklch(85% 0.03 160);
|
|
}
|
|
|
|
/* ===== Bubble menu / floating menu ===== */
|
|
.tippy-box,
|
|
.tiptap-bubble-menu,
|
|
.floating-menu {
|
|
background-color: var(--halo-bg-dropdown);
|
|
border-color: var(--halo-border-base);
|
|
color: var(--halo-text-primary);
|
|
}
|
|
|
|
/* ===== 编辑器占位符 ===== */
|
|
.ProseMirror p.is-editor-empty:first-child::before {
|
|
color: var(--halo-text-tertiary);
|
|
}
|
|
|
|
/* ===== 链接 ===== */
|
|
.ProseMirror a,
|
|
.tiptap a {
|
|
color: var(--halo-text-link);
|
|
}
|
|
|
|
/* ===== 选中文字 ===== */
|
|
.ProseMirror ::selection,
|
|
.tiptap ::selection {
|
|
background-color: oklch(30% 0.04 160 / 50%);
|
|
}
|
|
}
|
|
/* ===== Monaco Editor（日志查看器，JS 主题优先，此处仅兜底） ===== */
|
|
html[data-halo-theme="dark"] .monaco-editor.vs,
|
|
html[data-halo-theme="dark"] .monaco-editor.vs .margin,
|
|
html[data-halo-theme="dark"] .monaco-editor.vs .lines-content,
|
|
html[data-halo-theme="dark"] .monaco-editor.vs .monaco-scrollable-element {
|
|
background-color: var(--halo-bg-input) !important;
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
html[data-halo-theme="dark"] .monaco-editor.vs .line-numbers {
|
|
color: var(--halo-text-tertiary) !important;
|
|
}
|
|
html[data-halo-theme="dark"] .monaco-editor.vs .cursor {
|
|
border-color: var(--halo-text-primary) !important;
|
|
}
|
|
html[data-halo-theme="dark"] .monaco-editor.vs .selected-text,
|
|
html[data-halo-theme="dark"] .monaco-editor.vs .view-overlays .selected-text {
|
|
background-color: oklch(30% 0.04 160 / 50%) !important;
|
|
}
|
|
html[data-halo-theme="dark"] .monaco-editor.vs .find-widget,
|
|
html[data-halo-theme="dark"] .monaco-editor.vs .monaco-hover {
|
|
background-color: var(--halo-bg-dropdown) !important;
|
|
color: var(--halo-text-primary) !important;
|
|
}
|
|
|
|
/* ===== 编辑器链接（覆盖通用链接色规则） ===== */
|
|
html[data-halo-theme="dark"] .ProseMirror a,
|
|
html[data-halo-theme="dark"] .tiptap a {
|
|
color: var(--halo-text-link) !important;
|
|
} |