observable plot background color via css

Community Help
1

Is there a way to change background color and the color of the font of this chart via css? https://observablehq.com/embed/b148b6e87a01be8f?cells=chart%2Cviewof+contcheck%2Cviewof+years%2Cviewof+wert%2Clabel%2Ctitle%2Cviewof+toggleanzeige%2Cviewof+togglepop%2Ccredits%2CmyStyles

I want to replace these lines of code:

    style: {
      backgroundColor: '#293845',
      color: '#ffffff',
    },

this is the link to the notebook: Emissionen (dark) / RND / Observable

1 Like
2

I’m a bit confused by the question because, when you write:

It sounds like you know exactly what to do - simply change the color strings in those lines to, perhaps

    style: {
      backgroundColor: 'white',
      color: 'black',
    },

If, for some reason, you wish to leave the notebook as is but modify the colors using CSS after embedding via the Runtime with Javascript, you could add the following lines to the head of your HTML document:

<style media="screen">
  svg {
    background-color: white !important;
    color: black !important;
  }
</style>

I don’t think that the Iframe embed URL, that you’ve linked in your question, allows you to do that, though.

1 Like
3

thank you, although my question was not really clear your answer was what I needed

1 Like
4

a new problem occurred with the background color. In dark mode I want the background color of the plot to be dark. This is my code:

@media (prefers-color-scheme: dark) {

svg {
background-color: #293845 !important;
color: white !important;
}

}

Unfortunately this affects the pin in the mapbox map, too. Can I style the background color of the plot in another way?

This is my notebook: Temperatur regional / RND / Observable

5

@jchrist Change your selector from svg to svg[class^="plot-"].

2 Likes
6

thank you, it works