Obsidian 学习笔记

Appearance

深色模式优化 ​

Obsidian 默认深色模式的配色可以进一步优化，提升夜间使用体验和可读性。

自定义深色配色 ​

css
/* === 深色模式配色 === */
.theme-dark {
  /* 背景色系 */
  --background-primary: #1a1b26;
  --background-secondary: #16161e;
  --background-secondary-alt: #1f2335;
  --background-modifier-border: #292e42;
  --background-modifier-border-hover: #3b4261;

  /* 文字色系 */
  --text-normal: #c0caf5;
  --text-muted: #565f89;
  --text-faint: #3b4261;

  /* 强调色 */
  --interactive-accent: #7c3aed;
  --interactive-accent-hover: #6d28d9;

  /* 选中文本 */
  --text-selection: rgba(124, 58, 237, 0.3);

  /* 高亮 */
  --text-highlight-bg: rgba(255, 215, 0, 0.15);
}

背景渐变 ​

css
/* 深色渐变背景 */
.theme-dark .workspace {
  background: linear-gradient(180deg, #1a1b26 0%, #16161e 100%);
}

/* 主内容区渐变 */
.theme-dark .markdown-preview-view {
  background: linear-gradient(135deg, #1a1b26 0%, #1f2335 100%);
}

更暗的纯黑模式 ​

css
/* AMOLED 纯黑模式 */
.theme-dark.amoled {
  --background-primary: #000000;
  --background-secondary: #0a0a0a;
  --background-secondary-alt: #111111;
  --background-modifier-border: #1a1a1a;
  --text-normal: #e0e0e0;
  --text-muted: #666666;
}

/* 边框几乎不可见 */
.theme-dark.amoled .workspace-leaf-content {
  border: none !important;
}

高对比度深色 ​

css
/* 高对比度深色 */
.theme-dark.high-contrast {
  --text-normal: #ffffff;
  --text-muted: #b0b0b0;
  --text-faint: #808080;
  --background-primary: #000000;
  --background-secondary: #1a1a1a;
  --background-modifier-border: #404040;
  --interactive-accent: #ffff00;
}

自动深色模式 ​

css
/* 跟随系统切换 */
@media (prefers-color-scheme: dark) {
  :root {
    --background-primary: #1a1b26;
    --background-secondary: #16161e;
    --text-normal: #c0caf5;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --text-normal: #1f2937;
  }
}

侧边栏深色优化 ​

css
/* 侧边栏毛玻璃 */
.theme-dark .workspace-ribbon,
.theme-dark .nav-files-container {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

/* 深色侧边栏文字 */
.theme-dark .nav-file-title {
  color: #a9b1d6;
}

.theme-dark .nav-file-title:hover {
  color: #c0caf5;
  background: rgba(255, 255, 255, 0.05);
}

代码块深色优化 ​

css
/* 深色代码块 */
.theme-dark .markdown-preview-view pre {
  background: #11111b !important;
  border: 1px solid #313244;
}

/* 语法高亮 */
.theme-dark .cm-keyword { color: #cba6f7; }
.theme-dark .cm-string { color: #a6e3a1; }
.theme-dark .cm-number { color: #fab387; }
.theme-dark .cm-comment { color: #6c7086; }

相关内容 ​