Theme Dialog

The ThemeDialog component allows users to adjust appearance settings such as mode, contrast, color adjustment, and accent color.

Usage

import { useState } from 'react';
import { ThemeDialog } from '@harnessio/ui/components';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpenChange = (open: boolean) => {
    setIsOpen(open);
  };

  const handleChange = (theme: ThemeInterface) => {
    console.log(theme);
  };

  const handleSave = (theme: ThemeInterface) => {
    console.log(theme);
  };

  const handleCancel = () => {
    console.log('Cancelled');
    setIsOpen(false);
  };

  return (
      <ThemeDialog
        open={isOpen}
        onOpenChange={handleOpenChange}
        onChange={handleChange}
        onSave={handleSave}
        onCancel={handleCancel}
      >
        <button onClick={() => setIsOpen(true)}>Customize theme</button>
      </ThemeDialog>
  );
}

export default App;