search

gregzuro / obsidian-kroki

MIT License
45 stars 27 forks source link

Change background color? #2

Open luckman212 opened 3 years ago

luckman212 commented 3 years ago

Is it possible to change or specify the background color used for the graphs?

With a dark theme, it becomes impossible to read them unfortunately. It would be cool if we could specify a bgcolor. Maybe it's possible with CSS, not sure

image

luckman212 commented 3 years ago

I found a CSS hack that seems to work...

.markdown-preview-view div[class^="block-language"] {
  background-color: #cfcfcf;
}

image

gregzuro commented 3 years ago

I found a CSS hack that seems to work...

This is great! Thanks.

I'll look into incorporating something like this.

netthier commented 2 years ago

Any updates on this? I'm having problems viewing some of my diagrams in dark mode.

subsonicpulse commented 1 year ago

Any updates on this? I'm having problems viewing some of my diagrams in dark mode.

Add dest.style.backgroundColor = 'white'; after const dest = document.createElement('div'); on line 6883 in installed plugin: folder: Obsidian Vault\.obsidian\plugins\obsidian-kroki, file: main.js

Original Source main.ts: after line 54.

Some setting would be nice. But currently I have no time to find out how to do it.

Hope that helps you. For me, it's fine now with Dark Mode.

julianmueller commented 1 year ago

maybe there is an even nicer way to just flip the colors and leave the background transparent? But I guess this is a core of th kroki engine?

I created my own css snippet which does the major work (but will mess up some colored diagrams!):

/* for adjusting to light/dark theme */

div[class^="block-language-"] svg {
    /* background: var(--background-primary) !important; */
    background: none !important;
}

div[class^="block-language-"] svg text {
    fill: var(--text-normal) !important;
}

div[class^="block-language-"] svg path {
    stroke: var(--text-normal) !important;
}

div[class^="block-language-"] svg rect {
    fill: var(--background-primary) !important;
    stroke: var(--text-normal) !important;
}

div[class^="block-language-"] svg circle {
    fill: var(--background-primary) !important;
    stroke: var(--text-normal) !important;
}

div[class^="block-language-"] svg polygon {
    fill: var(--background-primary) !important;
    stroke: var(--text-normal) !important;
}

svg[id^="mermaid-"] {
    /* font-size: var(--font-text-size); */
    /* font-family: var(--font-text); */
    color: var(--text-normal) !important;
}
julianmueller commented 1 year ago

Here two example pictures how it shows up, with an image of the original rendering below:

light theme:

grafik

dark theme:

grafik

the different orientations of the words in this vega example depend on a random seed. https://kroki.io/examples.html#word-cloud