Change color of Timeline Items

[Alby407]

Is there a way to change the colors of timeline items? I'm mostly working with a light theme, in which it is difficult to read the items in the timeline, as the text is colored black and the timeline items are dark-colored.

[mitchallain]

You can redefine the event block colors and text colors in a CSS snippet.

The file obsidian-day-planner/examples/timeline-example.css in this repo shows some examples of redefining the event block colors.

Using the web inspector (Ctrl + Shift + i) I was able to find the text styles and copy a CSS rule to turn them black

.header_title.svelte-e43ld1.svelte-e43ld1, .ei_Copy.svelte-e43ld1.svelte-e43ld1, .ei_Title.svelte-e43ld1.svelte-e43ld1, .ce_title.svelte-e43ld1.svelte-e43ld1 {
     color: #000 !important;
}

I do think it would be nice to add an optional light color scheme to the timeline view for this project, so that users without CSS experience can quickly select a theme that matches their vault settings.

Until then, here is my entire CSS snippet for the timeline view, including a white to green gradient for the event blocks.

.event_item:hover{
    background-color: var(--interactive-accent-hover) !important;
}

.event_item_color1 {
  background-color: #FFFFFFff !important;
}

.event_item_color2 {
  background-color: #F3F8F1ff !important;
}

.event_item_color3 {
  background-color: #E7F0E3ff !important;
}

.event_item_color4 {
  background-color: #DBE9D6ff !important;
}

.event_item_color5 {
  background-color: #CFE1C8ff !important;
}

.event_item_color6 {
  background-color: #C2DABAff !important;
}

.event_item_color7 {
  background-color: #B6D2ACff !important;
}

.event_item_color8 {
  background-color: #AACB9Fff !important;
}

.event_item_color9 {
  background-color: #9EC391ff !important;
}

.event_item_color10 {
  background-color: #92BC83ff !important;
}

.header_title.svelte-e43ld1.svelte-e43ld1, .ei_Copy.svelte-e43ld1.svelte-e43ld1, .ei_Title.svelte-e43ld1.svelte-e43ld1, .ce_title.svelte-e43ld1.svelte-e43ld1 {
     color: #000 !important;
}

This works well with my minimal theme.

[feedhopper]

@mitchallain This is VERY cool

It kills my main grief with this really great but sadly abandoned plugin: readibility

Is there any chance to change the color that pops into the fields upon mouse hover? In my case it's light blue.

[feedhopper]

@mitchallain Oh, and there is one more thing: Adjusting the colors, I have added some more than just 10 and realised that anything above ten defaults back to the beginning of the row. So 11 uses the color of 1 and so forth.

Is there any chance to change that?

[ivan-lednev]

Closing this as stale.