Theming

import { mergeThemes, defaultLexKitTheme, LexKitTheme } from '@lexkit/editor'

// Start with default theme
const baseTheme = defaultLexKitTheme

// Override specific properties
const customOverrides: Partial<LexKitTheme> = {
  text: {
    bold: 'my-custom-bold-class',
    italic: 'my-custom-italic-class',
  },
  toolbar: {
    button: 'my-toolbar-button',
    buttonActive: 'my-toolbar-button-active',
  },
  container: 'my-editor-container',
}

// Merge themes
const finalTheme = mergeThemes(baseTheme, customOverrides)

// Use the merged theme
<Provider extensions={extensions} config={{ theme: finalTheme }}>
  <MyEditor />
</Provider>

"use client"

import { useState } from 'react'
import { LexKitTheme } from '@lexkit/editor'

const lightTheme: LexKitTheme = {
  container: 'bg-white border-gray-200',
  paragraph: 'text-gray-900',
  toolbar: {
    button: 'bg-gray-100 hover:bg-gray-200 text-gray-900',
  },
}

const darkTheme: LexKitTheme = {
  container: 'bg-gray-900 border-gray-700',
  paragraph: 'text-white',
  toolbar: {
    button: 'bg-gray-700 hover:bg-gray-600 text-white',
  },
}

function ThemeableEditor() {
  const [isDark, setIsDark] = useState(false)
  const currentTheme = isDark ? darkTheme : lightTheme

  return (
    <div>
      <button
        onClick={() => setIsDark(!isDark)}
        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded"
      >
        Toggle {isDark ? 'Light' : 'Dark'} Theme
      </button>

      <Provider extensions={extensions} config={{ theme: currentTheme }}>
        <MyEditor />
      </Provider>
    </div>
  )
}

/* CSS with custom properties */
:root {
  --editor-bg: #ffffff;
  --editor-text: #1f2937;
  --editor-border: #e5e7eb;
  --button-primary: #3b82f6;
  --button-hover: #2563eb;
}

.dark {
  --editor-bg: #1f2937;
  --editor-text: #f9fafb;
  --editor-border: #374151;
  --button-primary: #60a5fa;
  --button-hover: #3b82f6;
}

/* Theme using CSS variables */
const responsiveTheme: LexKitTheme = {
  container: 'border border-[var(--editor-border)] rounded-lg bg-[var(--editor-bg)]',
  paragraph: 'text-[var(--editor-text)] mb-4 leading-relaxed',
  text: {
    bold: 'font-bold text-[var(--editor-text)]',
  },
  toolbar: {
    button: 'px-3 py-2 bg-[var(--button-primary)] hover:bg-[var(--button-hover)] text-white rounded-md transition-colors',
  },
}

import { LexKitTheme } from '@lexkit/editor'

// Different themes for different editor instances
const minimalTheme: LexKitTheme = {
  container: 'border border-gray-200 rounded',
  paragraph: 'text-sm text-gray-700',
  toolbar: {
    button: 'w-6 h-6 text-xs',
  },
}

const richTheme: LexKitTheme = {
  container: 'border-2 border-blue-200 rounded-lg shadow-lg',
  paragraph: 'text-base text-gray-900 leading-relaxed',
  heading: {
    h1: 'text-3xl font-bold text-blue-900',
  },
  toolbar: {
    button: 'px-4 py-2 text-sm font-medium bg-blue-50 hover:bg-blue-100',
    buttonActive: 'bg-blue-200',
  },
}

function MultiEditorApp() {
  return (
    <div className="space-y-8">
      {/* Minimal editor for comments */}
      <div>
        <h3 className="text-lg font-semibold mb-2">Comment Editor</h3>
        <Provider extensions={basicExtensions} config={{ theme: minimalTheme }}>
          <CommentEditor />
        </Provider>
      </div>

      {/* Rich editor for content creation */}
      <div>
        <h3 className="text-lg font-semibold mb-2">Content Editor</h3>
        <Provider extensions={richExtensions} config={{ theme: richTheme }}>
          <ContentEditor />
        </Provider>
      </div>
    </div>
  )
}