195 lines
4.4 KiB
CSS
195 lines
4.4 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* 启用 class-based dark mode for Tailwind v4 */
|
|
@variant dark (.dark &);
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
/* 主题色渐变 */
|
|
--theme-color-1: rgb(88, 192, 252);
|
|
--theme-color-2: rgb(189, 69, 251);
|
|
}
|
|
|
|
/* class-based dark mode - 应用到 html.dark */
|
|
html.dark,
|
|
:root.dark {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
|
|
/* 同时支持系统偏好 */
|
|
/* @media (prefers-color-scheme: dark) {
|
|
html:not(.light),
|
|
:root:not(.light) {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
} */
|
|
|
|
/* 添加 Tailwind 自定义颜色 */
|
|
@theme {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
/* 确保文档页面标题在暗色模式下可见 - 只针对 prose 内的标题 */
|
|
.prose h1,
|
|
.prose h2,
|
|
.prose h3,
|
|
.prose h4,
|
|
.prose h5,
|
|
.prose h6 {
|
|
color: rgba(23, 23, 23, 0.85);
|
|
}
|
|
|
|
.dark .prose h1,
|
|
.dark .prose h2,
|
|
.dark .prose h3,
|
|
.dark .prose h4,
|
|
.dark .prose h5,
|
|
.dark .prose h6 {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
table,
|
|
th,
|
|
td {
|
|
color: #171717;
|
|
}
|
|
|
|
.dark table,
|
|
.dark th,
|
|
.dark td {
|
|
color: #ededed;
|
|
}
|
|
|
|
/* 文档页深色模式优化 */
|
|
.dark .prose {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root:not(.light) .prose {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
} */
|
|
|
|
.dark .dark\:prose-invert {
|
|
--tw-prose-body: rgba(255, 255, 255, 0.7);
|
|
--tw-prose-headings: rgba(255, 255, 255, 0.95);
|
|
--tw-prose-lead: rgba(255, 255, 255, 0.7);
|
|
--tw-prose-links: rgba(147, 197, 253, 0.9);
|
|
--tw-prose-bold: rgba(255, 255, 255, 0.9);
|
|
--tw-prose-counters: rgba(255, 255, 255, 0.6);
|
|
--tw-prose-bullets: rgba(255, 255, 255, 0.5);
|
|
--tw-prose-hr: rgba(255, 255, 255, 0.2);
|
|
--tw-prose-quotes: rgba(255, 255, 255, 0.8);
|
|
--tw-prose-quote-borders: rgba(255, 255, 255, 0.3);
|
|
--tw-prose-captions: rgba(255, 255, 255, 0.6);
|
|
--tw-prose-code: rgba(255, 255, 255, 0.9);
|
|
--tw-prose-pre-code: rgba(255, 255, 255, 0.95);
|
|
--tw-prose-pre-bg: rgba(0, 0, 0, 0.5);
|
|
--tw-prose-th-borders: rgba(255, 255, 255, 0.3);
|
|
--tw-prose-td-borders: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root:not(.light) .dark\:prose-invert {
|
|
--tw-prose-body: rgba(255, 255, 255, 0.7);
|
|
--tw-prose-headings: rgba(255, 255, 255, 0.95);
|
|
--tw-prose-lead: rgba(255, 255, 255, 0.7);
|
|
--tw-prose-links: rgba(147, 197, 253, 0.9);
|
|
--tw-prose-bold: rgba(255, 255, 255, 0.9);
|
|
--tw-prose-counters: rgba(255, 255, 255, 0.6);
|
|
--tw-prose-bullets: rgba(255, 255, 255, 0.5);
|
|
--tw-prose-hr: rgba(255, 255, 255, 0.2);
|
|
--tw-prose-quotes: rgba(255, 255, 255, 0.8);
|
|
--tw-prose-quote-borders: rgba(255, 255, 255, 0.3);
|
|
--tw-prose-captions: rgba(255, 255, 255, 0.6);
|
|
--tw-prose-code: rgba(255, 255, 255, 0.9);
|
|
--tw-prose-pre-code: rgba(255, 255, 255, 0.95);
|
|
--tw-prose-pre-bg: rgba(0, 0, 0, 0.5);
|
|
--tw-prose-th-borders: rgba(255, 255, 255, 0.3);
|
|
--tw-prose-td-borders: rgba(255, 255, 255, 0.2);
|
|
}
|
|
} */
|
|
|
|
/* 标题更清晰 */
|
|
.dark .prose h1,
|
|
.dark .prose h2,
|
|
.dark .prose h3,
|
|
.dark .prose h4 {
|
|
color: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root:not(.light) .prose h1,
|
|
:root:not(.light) .prose h2,
|
|
:root:not(.light) .prose h3,
|
|
:root:not(.light) .prose h4 {
|
|
color: rgba(255, 255, 255, 0.95);
|
|
}
|
|
} */
|
|
|
|
/* 链接更清晰 */
|
|
.dark .prose a {
|
|
color: rgba(147, 197, 253, 0.9);
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root:not(.light) .prose a {
|
|
color: rgba(147, 197, 253, 0.9);
|
|
}
|
|
} */
|
|
|
|
/* 代码块背景更黑 */
|
|
.dark .prose pre {
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root:not(.light) .prose pre {
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
} */
|
|
|
|
/* 表格样式 */
|
|
.dark .prose table {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root:not(.light) .prose table {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
} */
|
|
|
|
.dark .prose thead {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
border-bottom-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root:not(.light) .prose thead {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
border-bottom-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
} */
|
|
|
|
.dark .prose tbody tr {
|
|
border-bottom-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root:not(.light) .prose tbody tr {
|
|
border-bottom-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
} */
|