Obsidianでノートのタイプごとに色を変える
倉下さんの投稿を見たのをきっかけに以前からやってみたいと思っていたのでやってみた
https://bsky.app/profile/rashita.bsky.social/post/3kwsowguvi42e
/rashitamemo/Obsidianでファイルごとに背景色を変えるとAIの力を借りたら簡単に出来た
自分では何一つ書いていない
とりあえずデイリー、ウィークリー、プロジェクトで色分けをしてみることにした
https://gyazo.com/70732f4a43a13aad88d42c3287b69bf1
code: cssのコード
/* weeklyノートのスタイリング */
.is-focused .workspace-leaf.mod-active:has(.weekly) .view-header,
.workspace-leaf-content:has(.weekly) .view-header,
.workspace-split.mod-root .view-content:has(.weekly) {
background-color: #f0f8ff !important; /* 薄い青色 */
}
.workspace-leaf-contentdata-type="markdown" .view-content .weekly,
.workspace-split.mod-root .workspace-leaf.mod-active .view-content .weekly,
.markdown-source-view.weekly,
.markdown-preview-view.weekly,
.workspace-leaf.mod-active .view-header.weekly,
.workspace-leaf.mod-active .view-header-title-container.weekly,
.nav-file-title.weekly {
background-color: #f0f8ff !important;
}
body:has(.weekly) .workspace-tabs,
body:has(.weekly) .workspace-tab-header-container,
body:has(.weekly) .workspace-tab-container,
body:has(.weekly) .workspace-split.mod-root,
body:has(.weekly) .workspace-ribbon.side-dock-ribbon,
body:has(.weekly) .status-bar {
background-color: #f0f8ff !important;
}
.weekly {
color: #333333;
}
.weekly h1, .weekly h2, .weekly h3, .weekly h4, .weekly h5, .weekly h6 {
color: #4169e1 !important; /* ロイヤルブルー */
}
.weekly a {
color: #1e90ff !important; /* ドジャーブルー */
}
/* projectノートのスタイリング */
.is-focused .workspace-leaf.mod-active:has(.project) .view-header,
.workspace-leaf-content:has(.project) .view-header,
.workspace-split.mod-root .view-content:has(.project) {
background-color: #fff0f5 !important; /* ラベンダーブラッシュ */
}
.workspace-leaf-contentdata-type="markdown" .view-content .project,
.workspace-split.mod-root .workspace-leaf.mod-active .view-content .project,
.markdown-source-view.project,
.markdown-preview-view.project,
.workspace-leaf.mod-active .view-header.project,
.workspace-leaf.mod-active .view-header-title-container.project,
.nav-file-title.project {
background-color: #fff0f5 !important;
}
body:has(.project) .workspace-tabs,
body:has(.project) .workspace-tab-header-container,
body:has(.project) .workspace-tab-container,
body:has(.project) .workspace-split.mod-root,
body:has(.project) .workspace-ribbon.side-dock-ribbon,
body:has(.project) .status-bar {
background-color: #fff0f5 !important;
}
.project {
color: #333333;
}
.project h1, .project h2, .project h3, .project h4, .project h5, .project h6 {
color: #8b008b !important; /* ダークマゼンタ */
}
.project a {
color: #ff1493 !important; /* ディープピンク */
}
/* dailyノートのスタイリング */
.is-focused .workspace-leaf.mod-active:has(.daily) .view-header,
.workspace-leaf-content:has(.daily) .view-header,
.workspace-split.mod-root .view-content:has(.daily) {
background-color: #ffffd4 !important; /* 薄い黄色 */
}
.workspace-leaf-contentdata-type="markdown" .view-content .daily,
.workspace-split.mod-root .workspace-leaf.mod-active .view-content .daily,
.markdown-source-view.daily,
.markdown-preview-view.daily,
.workspace-leaf.mod-active .view-header.daily,
.workspace-leaf.mod-active .view-header-title-container.daily,
.nav-file-title.daily {
background-color: #ffffd4 !important;
}
body:has(.daily) .workspace-tabs,
body:has(.daily) .workspace-tab-header-container,
body:has(.daily) .workspace-tab-container,
body:has(.daily) .workspace-split.mod-root,
body:has(.daily) .workspace-ribbon.side-dock-ribbon,
body:has(.daily) .status-bar {
background-color: #ffffd4 !important;
}
.daily {
color: #333333;
}
.daily h1, .daily h2, .daily h3, .daily h4, .daily h5, .daily h6 {
color: #b8860b !important; /* ダークゴールデンロッド */
border-bottom: 1px solid #b8860b;
padding-bottom: 5px;
}
.daily a {
color: #8b4513 !important; /* サドルブラウン */
}
/* 共通のスタイリング */
.weekly ul, .weekly ol, .project ul, .project ol, .daily ul, .daily ol {
color: #333333;
}
.weekly pre, .weekly code, .project pre, .project code, .daily pre, .daily code {
background-color: rgba(0, 0, 0, 0.05) !important;
color: #333333;
}
.weekly blockquote {
border-left-color: #4169e1 !important;
background-color: rgba(65, 105, 225, 0.1) !important;
}
.project blockquote {
border-left-color: #8b008b !important;
background-color: rgba(139, 0, 139, 0.1) !important;
}
.daily blockquote {
border-left-color: #b8860b !important;
background-color: rgba(184, 134, 11, 0.1) !important;
}
#Obsidian