Dark mode snippet

[smgabardo]

This block of code was originally posted by @Nigecat in https://github.com/Nigecat/obsidian-desmos/issues/59#issuecomment-1123065429

"The following css selectors should apply to all the current graph elements:

/* Set the graph background colour */
.desmos-graph .dcg-svg-background {
    fill: #272f34;
}

/* Set gridline colour */
.desmos-graph .dcg-svg-minor-gridline {
    stroke: #ffffff; 
}

/* Set axis colour */
.desmos-graph .dcg-svg-axis-line {
    stroke: #ffffff;
}

/* Set axis text border colour (you probably want this to be the same as the graph background colour) */
.desmos-graph .dcg-svg-axis-value :nth-child(1) {
    stroke: #ff0000;
}

/* Set axis text colour */
.desmos-graph .dcg-svg-axis-value :nth-child(2) {
    stroke: #00ff00;
}

/* Set label text colour */
.desmos-graph .dcg-svg-label :nth-child(2) > * :nth-child(1) {
    fill: #ff0000;
}

/* Set label text border colour (you probably want this to be the same as the graph background colour) */
.desmos-graph .dcg-svg-label :nth-child(1) > * :nth-child(1) {
    stroke: #000000;
}

[...]"

However, when applying the following snippet, this is the result.

Is there a css snippet which does not make the Desmos window like this? Thanks!

[gojzdar]

Here is my version of the snippet. The snippet you are using is intentionally ugly, so you can quickly find the colors you want to change. I did that and arrived at my (slightly modified) snippet. I also added .theme-dark rules which only apply when you are using the dark theme.

/* https://github.com/Nigecat/obsidian-desmos/issues/59#issuecomment-1123065429 */

/* Set the graph background colour */
.desmos-graph .dcg-svg-background {
     fill: var(--background-primary);
}

/* Set gridline colour */
.theme-dark .desmos-graph .dcg-svg-minor-gridline {
    stroke: #ffffff;
}

/* Set axis colour */
.theme-dark .desmos-graph .dcg-svg-axis-line {
    stroke: #ffffff;
}

/* Set axis text border colour (you probably want this to be the same as the graph background colour) */
.theme-dark .desmos-graph .dcg-svg-axis-value :nth-child(1) {
    stroke-width: 0;
}

/* Set axis text colour */

.theme-dark .desmos-graph .dcg-svg-axis-value :nth-child(2) {
    stroke: #ccc;
}

/* Set label text colour */
.desmos-graph .dcg-svg-label :nth-child(2) > * :nth-child(1) {
    /* fill: var(--text-accent); */
    stroke: transparent;
}

/* Set label text border colour (you probably want this to be the same as the graph background colour) */
.theme-dark .desmos-graph .dcg-svg-label :nth-child(1) > * :nth-child(1) {
    stroke-width: 0;
}

[gojzdar]

For reference, here is how it looks for me: I couldn't get the axis text to look nice, but most of the things looks ok

[gojzdar]

However, after you modify, or even look at the graph source, the HTML changes, which breaks the CSS style

before.txt after.txt

[kamyker]

+1 css breaks all the time