JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    #controls {
      margin-bottom: 20px;
    }
    label {
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div id="controls">
    <label>
      <input type="radio" name="theme" value="system" checked> System Default
    </label>
    <label>
      <input type="radio" name="theme" value="light"> Light
    </label>
    <label>
      <input type="radio" name="theme" value="dark"> Dark
    </label>
  </div>

  <!-- Chart container -->
  <div id="container" style="width: 600px; height: 400px;"></div>

JavaScript

// Define custom theme objects for light and dark mode.
    const lightTheme = {
      // Colors for the series. For two columns we set pink and yellow.
      colors: ['pink', 'yellow'],
      chart: {
        backgroundColor: '#ffffff', // white background for light mode
        style: {
          fontFamily: 'Arial, sans-serif',
          color: '#000000'
        }
      },
      title: {
        style: {
          color: '#000000'
        }
      }
    };

    const darkTheme = {
      // Colors for the series. For two columns we set blue and purple.
      colors: ['blue', 'purple'],
      chart: {
        backgroundColor: '#333333', // dark background
        style: {
          fontFamily: 'Arial, sans-serif',
          color: '#ffffff'
        }
      },
      title: {
        style: {
          color: '#ffffff'
        }
      }
    };

    let chart; // Will hold our chart instance

    // This function returns the appropriate theme object based on the user's choice.
    function getTheme(selectedTheme) {
      if (selectedTheme === 'light') {
        return lightTheme;
      } else if (selectedTheme === 'dark') {
        return darkTheme;
      } else { // 'system'
        // Check system setting using prefers-color-scheme
        const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        return isDark ? darkTheme : lightTheme;
      }
    }

    // Function to render (or re-render) the chart
    function renderChart() {
      // Get the currently selected theme from the radio buttons
      const selectedTheme = document.querySelector('input[name="theme"]:checked').value;
      const theme = getTheme(selectedTheme);

      // If a chart exists, destroy it before re-creating
      if (chart) {
        chart.destroy();
      }

      // Create a new Highcharts chart using the theme options.
      chart = Highcharts.chart('container', {
        chart: Object.assign({}, theme.chart, { type: 'column' }),
       ...