Dark mode snippet

[kalmenn]

Is there a css property that can be used in a snippet to change the background color of charts? To make it play better with dark mode for instance.

Thanks a lot for the plugin btw!

[Nigecat]

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;
}

Alternatively, if you want to inherit it from your css theme the variables can be read directly (the specific variables used may need to be tweaked depending on your theme, these work for my theme but looks a bit off with the default theme):

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

/* Set gridline colour */
.desmos-graph .dcg-svg-minor-gridline {
    stroke: var(--background-modifier-border); 
}

/* Set axis colour */
.desmos-graph .dcg-svg-axis-line {
    stroke: var(--background-accent); 
}

/* Set axis text border colour */
.desmos-graph .dcg-svg-axis-value :nth-child(1) {
    stroke: var(--background-primary);
}

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

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

/* Set label text border colour */
.desmos-graph .dcg-svg-label :nth-child(1) > * :nth-child(1) {
    stroke: var(--background-primary);
}