Themes — WPT Feature

💻 Implementation Code

<!DOCTYPE html>
<html>
<head>
  <title>WebPivotTable Themes</title>
  <script src="https://cdn.webpivottable.com/wpt/latest/wpt.js"></script>
</head>
<body>
  <h1>Themes Demo</h1>

  <!-- Built-in Theme Presets -->
  <div>
    <h3>Built-in Presets</h3>
    <button onclick="setTheme('default')">Default</button>
    <button onclick="setTheme('dark')">Dark</button>
    <button onclick="setTheme('ocean')">Ocean</button>
    <button onclick="setTheme('forest')">Forest</button>
  </div>

  <!-- Custom Theme Examples -->
  <div>
    <h3>Custom Themes</h3>
    <button onclick="setCustomBrand()">Brand Colors</button>
    <button onclick="setCustomCompact()">Compact Style</button>
  </div>

  <web-pivot-table id="wpt" style="width:100%;height:600px"></web-pivot-table>

  <script>
    const wpt = document.getElementById('wpt')

    // Built-in theme presets
    function setTheme(preset) {
      wpt.setOptions({ theme: { preset } })
    }

    // Custom brand theme with company colors
    function setCustomBrand() {
      wpt.setOptions({
        theme: {
          preset: 'default',
          colors: {
            primary: '#7c3aed',
            primaryText: '#ffffff',
            background: '#f9fafb',
            backgroundPanel: '#ffffff',
            border: '#e5e7eb',
            text: '#111827',
            textSecondary: '#6b7280',
            gridHeaderBackground: '#f3f4f6',
            gridHeaderText: '#111827'
          }
        }
      })
    }

    // Compact theme with smaller font sizes
    function setCustomCompact() {
      wpt.setOptions({
        theme: {
          preset: 'default',
          typography: {
            fontSize: '11px',
            lineHeight: 1.3
          },
          shape: {
            borderRadius: '3px'
          }
        }
      })
    }

    // Load data
    wpt.setWptFromCsvUrl('https://cdn.webpivottable.com/samples/sales.csv')
  </script>
</body>
</html>
Themes & Styling

🎯 Live Demo

Built-in Presets

Custom Theme

💻 Implementation Code
