Themes

/**
 * Collection of built-in syntax highlighting themes
 * Each theme follows the PrismTheme interface with consistent styling
 */
declare const themes: {
  /** Dracula theme - dark theme with purple and pink accents */
  dracula: PrismTheme;
  /** Duotone dark theme - minimalist dark theme with two-tone color scheme */
  duotoneDark: PrismTheme;
  /** Duotone light theme - minimalist light theme with two-tone color scheme */
  duotoneLight: PrismTheme;
  /** GitHub theme - light theme matching GitHub's syntax highlighting */
  github: PrismTheme;
  /** Night Owl theme - dark theme optimized for nighttime coding */
  nightOwl: PrismTheme;
  /** Night Owl Light theme - light variant of Night Owl */
  nightOwlLight: PrismTheme;
  /** Oceanic Next theme - dark theme with ocean-inspired colors */
  oceanicNext: PrismTheme;
  /** Okaidia theme - dark theme with vibrant colors */
  okaidia: PrismTheme;
  /** Palenight theme - dark theme with soft purple tones */
  palenight: PrismTheme;
  /** Shades of Purple theme - dark theme with various purple shades */
  shadesOfPurple: PrismTheme;
  /** Synthwave '84 theme - neon-inspired retro theme */
  synthwave84: PrismTheme;
  /** Ultramin theme - minimal high-contrast theme */
  ultramin: PrismTheme;
  /** VS Dark theme - default dark theme matching VSCode (default) */
  vsDark: PrismTheme;
  /** VS Light theme - light theme matching VSCode */
  vsLight: PrismTheme;
  /** Jettwave Dark theme - dark theme with blue accents */
  jettwaveDark: PrismTheme;
  /** Jettwave Light theme - light theme with blue accents */
  jettwaveLight: PrismTheme;
  /** One Dark theme - dark theme from Atom editor */
  oneDark: PrismTheme;
  /** One Light theme - light theme from Atom editor */
  oneLight: PrismTheme;
  /** Gruvbox Material Dark theme - dark variant of Material Gruvbox */
  gruvboxMaterialDark: PrismTheme;
  /** Gruvbox Material Light theme - light variant of Material Gruvbox */
  gruvboxMaterialLight: PrismTheme;
};

import { Highlight, themes } from "prism-react-renderer";

// Using different themes
const DarkCodeBlock = ({ code, language }) => (
  <Highlight theme={themes.vsDark} code={code} language={language}>
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      <pre className={className} style={style}>
        {/* render implementation */}
      </pre>
    )}
  </Highlight>
);

const LightCodeBlock = ({ code, language }) => (
  <Highlight theme={themes.github} code={code} language={language}>
    {/* render implementation */}
  </Highlight>
);

// Theme switching
function ThemedCodeBlock({ code, language, isDark }) {
  const theme = isDark ? themes.dracula : themes.vsLight;
  
  return (
    <Highlight theme={theme} code={code} language={language}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={style}>
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ line })}>
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  );
}

// Accessing specific theme properties
const customStyle = {
  ...themes.oceanicNext.plain,
  fontSize: '14px',
  lineHeight: '1.5'
};

import { PrismTheme } from "prism-react-renderer";

const customTheme: PrismTheme = {
  plain: {
    color: "#393A34",
    backgroundColor: "#f6f8fa"
  },
  styles: [
    {
      types: ["comment", "prolog", "doctype", "cdata"],
      style: {
        color: "#999988",
        fontStyle: "italic"
      }
    },
    {
      types: ["namespace"],
      style: {
        opacity: 0.7
      }
    },
    {
      types: ["string", "attr-value"],
      style: {
        color: "#e3116c"
      }
    },
    {
      types: ["punctuation", "operator"],
      style: {
        color: "#393A34"
      }
    },
    {
      types: ["entity", "url", "symbol", "number", "boolean", "variable", "constant", "property", "regex", "inserted"],
      style: {
        color: "#36acaa"
      }
    },
    {
      types: ["atrule", "keyword", "attr-name", "selector"],
      style: {
        color: "#00a4db"
      }
    },
    {
      types: ["function", "deleted", "tag"],
      style: {
        color: "#d73a49"
      }
    },
    {
      types: ["function-variable"],
      style: {
        color: "#6f42c1"
      }
    },
    {
      types: ["tag", "selector", "keyword"],
      style: {
        color: "#00009f"
      }
    }
  ]
};

// Language-specific styling
const customThemeWithLanguageSupport: PrismTheme = {
  plain: {
    color: "#393A34",
    backgroundColor: "#f6f8fa"
  },
  styles: [
    {
      types: ["tag"],
      style: {
        color: "#d73a49"
      }
    },
    {
      types: ["tag"],
      languages: ["markup"],
      style: {
        color: "#22863a"  // Different color for HTML tags
      }
    }
  ]
};

interface PrismTheme {
  /** Base styling applied to the root container */
  plain: PrismThemeEntry;
  /** Array of styling rules for different token types */
  styles: Array<{
    /** Token types this style applies to */
    types: string[];
    /** CSS properties for these token types */
    style: PrismThemeEntry;
    /** Optional: restrict this style to specific languages */
    languages?: Language[];
  }>;
}

interface PrismThemeEntry {
  /** Text color */
  color?: string;
  /** Cursor style */
  cursor?: string;
  /** Background color (shorthand) */
  background?: string;
  /** Background image */
  backgroundImage?: string;
  /** Background color (explicit) */
  backgroundColor?: string;
  /** Text shadow effect */
  textShadow?: string;
  /** Font style (normal or italic) */
  fontStyle?: "normal" | "italic";
  /** Font weight */
  fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
  /** Text decoration */
  textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through";
  /** Opacity level */
  opacity?: number;
}