✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Css transition for grid

Hi,
I am using React Plotly in a project which offers the possibility to change the theme color (light and dark). Theme changing goes along with css transitions.
Transitions work fine for colors in plot title, axis title, plot_bgcolor, plotPaper etc. but not for grid lines - color changes immediately.

.crisp {
transition: stroke .2s ease;
}

even

* {
transition: stroke .2s ease;
}

or !import has no effect.

config:

layout={{
  title: 'My title',
  font: {
    color: themes[theme].text
  },
  showlegend: false,
  plot_bgcolor: themes[theme].plotPaper,
  paper_bgcolor: themes[theme].plotPaper,
  xaxis: {
    gridcolor: themes[theme].grid,
    tickfont: {
      color: themes[theme].text
    }
  },
  yaxis: {
    gridcolor: themes[theme].grid,
    tickfont: {
      color: themes[theme].text
    }
  }
}}

and themes:

const themes = {
  light: {
    background: 'rgb(240,240,240)',
    plotPaper: 'rgb(255,255,255)',
    grid: 'rgb(230,230,230)',
    text: 'rgb(70,70,70)'
  },
  dark: {
    background: 'rgb(40,40,40)',
    plotPaper: 'rgb(30,30,30)',
    grid: 'rgb(60,60,60)',
    text: 'rgb(150,150,150)'
  }
}

Any Ideas?