如何根据网站的配色方案绘制样式

Question

我正在使用Material-UI React框架在网站上工作，我们正在利用其主题功能来让用户动态更改外观。有没有一种方法可以轻松地为Plotly渲染的文本设置默认颜色，从而使其与网站的背景形成鲜明对比？

Answer 1

我目前正在这样做：

import React from 'react';
import PlotlyPlot from 'react-plotly.js';
import { useTheme } from '@material-ui/core';
import { merge } from '../lodash.custom';

const Plot = React.forwardRef((props, ref) => {
  const theme = useTheme();
  const layout = merge({
    paper_bgcolor: theme.palette.background.paper,
    plot_bgcolor: theme.palette.background.paper,
    xaxis: {
      color: theme.palette.text.primary
    },
    yaxis: {
      color: theme.palette.text.primary
    },
    legend: {
      font: {
        color: theme.palette.text.primary
      },
    },
    title: {
      font: {
        color: theme.palette.text.primary,
      }
    },
    scene: {
      xaxis: {
        color: theme.palette.text.primary
      },
      yaxis: {
        color: theme.palette.text.primary
      },
      zaxis: {
        color: theme.palette.text.primary
      },
    }
  }, props.layout);
  const data = props.data.map(plotData => merge({
    colorbar: {
      tickfont: {
        color: theme.palette.text.primary
      }
    }
  }, plotData));
  const customProps = {
    layout,
    data
  };
  return <PlotlyPlot ref={ref} {...customProps} />;
});