Plugins: Daily Note Outline & Multiple Notes Outline

Share & showcase
, ,
23

The appearance of Daily Note Outline basically respects your file explorer css. Therefore, I think that the note title and outline are often the same color. However, I think it may be easier to see the note title if you add a color to it.

In previous versions of Obsidian, it was easy to color the note title (equivalent to a folder in file explorer), but changes in Obsidian v1.3.1 make that difficult.

Below is a css snippet (slightly modified from) that I use.
If you want to add a bit more color contrast to your folder than the standard theme, give it a try.

  • This is adjusted to match the changes in the Obsidian v1.3.1 insider build. If you are using an earlier version of Obsidian or a theme other than the default theme, there may be a possibility that the display will be corrupted.
  • As is, it applies only to DNO, but if you remove all .workspace-leaf-content[data-type="daily-note-outline"], it also applies to file explorer. (The attached screenshot shows the file explorer part, not the DNO view)
.theme-light
{
  --folder-color: var(--color-base-25);
  --file-color: var(--color-base-20);
  --left-border-color: rgb(200,180,180);
  --left-border-color-hover: rgb(190,160,160);
}

.theme-dark {
  --folder-color: var(--color-base-30);
  --file-color: var(--color-base-20);
  --left-border-color: rgb(90,70,70);
  --left-border-color-hover: rgb(120,100,100);
}

.workspace-leaf-content[data-type="daily-note-outline"] .nav-folder {
  margin-top: 1px;
  background-color: var(--folder-color);
}

.workspace-leaf-content[data-type="daily-note-outline"] .nav-folder-children {
  background-color: var(--file-color);
}

.workspace-leaf-content[data-type="daily-note-outline"] .nav-folder.mod-root .nav-folder > .tree-item-children {
  padding-left: 1px;
  margin: 0 0 0 0;
  border-left: 18px solid var(--left-border-color);

  transition:all 0.5s ease-in-out;
}
.workspace-leaf-content[data-type="daily-note-outline"] .nav-folder.mod-root .nav-folder > .tree-item-children:hover {
  border-left-color: var(--left-border-color-hover);
}

If you have a better css, please tell me!

screenshot

1 Like