([]);
-
- // Load saved theme from localStorage on mount
- useEffect(() => {
- const savedTheme = localStorage.getItem(STORAGE_KEY);
- if (savedTheme) {
- try {
- const parsed = JSON.parse(savedTheme);
- if (parsed.themeName) setThemeName(parsed.themeName);
- if (parsed.colors) setColors(parsed.colors);
- if (parsed.selectedPresets) setSelectedPresets(parsed.selectedPresets);
- } catch (e) {
- console.error("Failed to load saved theme:", e);
- }
- }
- setIsLoaded(true);
- }, []);
-
- // Save theme to localStorage whenever it changes
- useEffect(() => {
- if (!isLoaded) return;
-
- const themeData = {
- themeName,
- colors,
- selectedPresets,
- };
- localStorage.setItem(STORAGE_KEY, JSON.stringify(themeData));
- }, [themeName, colors, selectedPresets, isLoaded]);
-
- useEffect(() => {
- const processLogs = () => {
- try {
- const tempThemeName = `logsdx-theme-preview`;
-
- const customTheme = createSimpleTheme(tempThemeName, colors, {
- mode: "dark",
- presets: selectedPresets,
- });
-
- registerTheme(customTheme);
-
- const htmlLogsDX = getLogsDX({
- theme: tempThemeName,
- outputFormat: "html",
- htmlStyleFormat: "css",
- escapeHtml: false,
- }) as unknown as { processLine: (line: string) => string };
-
- const processed = SAMPLE_LOGS.map((log) => {
- try {
- return htmlLogsDX.processLine(log.text);
- } catch (e) {
- console.error("LogsDX processing failed:", log.text, e);
- // Return styled fallback using all theme colors
- let styledText = log.text;
-
- // Apply colors based on selected presets
- if (selectedPresets.includes("logLevels")) {
- if (log.text.includes("[ERROR]") || log.text.includes("ERROR:")) {
- styledText = styledText.replace(
- /(\[ERROR\]|ERROR:)/g,
- `$1`,
- );
- }
- if (log.text.includes("[WARN]") || log.text.includes("WARN:")) {
- styledText = styledText.replace(
- /(\[WARN\]|WARN:)/g,
- `$1`,
- );
- }
- if (
- log.text.includes("[SUCCESS]") ||
- log.text.includes("SUCCESS:")
- ) {
- styledText = styledText.replace(
- /(\[SUCCESS\]|SUCCESS:)/g,
- `$1`,
- );
- }
- if (log.text.includes("[INFO]") || log.text.includes("INFO:")) {
- styledText = styledText.replace(
- /(\[INFO\]|INFO:)/g,
- `$1`,
- );
- }
- if (log.text.includes("[DEBUG]") || log.text.includes("DEBUG:")) {
- styledText = styledText.replace(
- /(\[DEBUG\]|DEBUG:)/g,
- `$1`,
- );
- }
- }
-
- // Highlight numbers
- if (selectedPresets.includes("numbers")) {
- styledText = styledText.replace(
- /\b(\d+\.?\d*)\b/g,
- `$1`,
- );
- }
-
- // Highlight strings
- if (selectedPresets.includes("strings")) {
- styledText = styledText.replace(
- /(['"])([^'"]*)\1/g,
- `$1$2$1`,
- );
- }
-
- // Highlight brackets
- if (selectedPresets.includes("brackets")) {
- styledText = styledText.replace(
- /[[\]{}()<>]/g,
- `$&`,
- );
- }
-
- // Highlight booleans and null
- if (selectedPresets.includes("booleans")) {
- styledText = styledText.replace(
- /\b(true|false|null|undefined)\b/g,
- `$1`,
- );
- }
-
- // URLs
- if (selectedPresets.includes("urls")) {
- styledText = styledText.replace(
- /(https?:\/\/[^\s]+)/g,
- `$1`,
- );
- }
-
- // Paths
- if (selectedPresets.includes("paths")) {
- styledText = styledText.replace(
- /(\/[\w\-./]+|[A-Z]:\\[\w\-.\\]+)/g,
- `$1`,
- );
- }
-
- // Timestamps
- if (selectedPresets.includes("timestamps")) {
- styledText = styledText.replace(
- /(\d{4}-\d{2}-\d{2}[T\s]\d{2}:\d{2}:\d{2}[\w.:]*)/g,
- `$1`,
- );
- }
-
- // Semantic versions
- if (selectedPresets.includes("semantic")) {
- styledText = styledText.replace(
- /\bv?(\d+\.\d+\.\d+)\b/g,
- `$&`,
- );
- }
-
- return `${styledText}`;
- }
- });
-
- setProcessedLogs(processed);
- } catch (error) {
- console.error("THEME CREATION ERROR:", error);
- // Styled fallback showing all colors
- const fallbackLogs = SAMPLE_LOGS.map((log) => {
- let styledText = log.text;
-
- // Apply all color categories
- if (log.category === "error" || log.text.includes("[ERROR]")) {
- styledText = `${log.text}`;
- } else if (
- log.category === "warning" ||
- log.text.includes("[WARN]")
- ) {
- styledText = `${log.text}`;
- } else if (
- log.category === "success" ||
- log.text.includes("[SUCCESS]")
- ) {
- styledText = `${log.text}`;
- } else if (log.category === "info" || log.text.includes("[INFO]")) {
- styledText = `${log.text}`;
- } else if (log.category === "debug" || log.text.includes("[DEBUG]")) {
- styledText = `${log.text}`;
- }
-
- // Apply pattern matching based on selected presets
- // Numbers
- if (selectedPresets.includes("numbers")) {
- styledText = styledText.replace(
- /\b(\d+\.?\d*)\b/g,
- `$1`,
- );
- }
-
- // Strings
- if (selectedPresets.includes("strings")) {
- styledText = styledText.replace(
- /(['"])([^'"]*)\1/g,
- `$1$2$1`,
- );
- }
-
- // Brackets
- if (selectedPresets.includes("brackets")) {
- styledText = styledText.replace(
- /[[\]{}()<>]/g,
- `$&`,
- );
- }
-
- // Booleans
- if (selectedPresets.includes("booleans")) {
- styledText = styledText.replace(
- /\b(true|false|null|undefined)\b/g,
- `$1`,
- );
- }
-
- // URLs
- if (selectedPresets.includes("urls")) {
- styledText = styledText.replace(
- /(https?:\/\/[^\s]+)/g,
- `$1`,
- );
- }
-
- // Paths
- if (selectedPresets.includes("paths")) {
- styledText = styledText.replace(
- /(\/[\w\-./]+|[A-Z]:\\[\w\-.\\]+)/g,
- `$1`,
- );
- }
-
- // Timestamps
- if (selectedPresets.includes("timestamps")) {
- styledText = styledText.replace(
- /(\d{4}-\d{2}-\d{2}[T\s]\d{2}:\d{2}:\d{2}[\w.:]*)/g,
- `$1`,
- );
- }
-
- // Dates
- if (selectedPresets.includes("dates")) {
- styledText = styledText.replace(
- /(\[\d{4}-\d{2}-\d{2}[\s\d:]*\])/g,
- `$1`,
- );
- }
-
- // Semantic versions
- if (selectedPresets.includes("semantic")) {
- styledText = styledText.replace(
- /\bv?(\d+\.\d+\.\d+)\b/g,
- `$&`,
- );
- }
-
- // JSON keys
- if (selectedPresets.includes("json")) {
- styledText = styledText.replace(
- /(\w+):/g,
- `$1:`,
- );
- }
-
- // Wrap in text color
- styledText = `${styledText}`;
-
- return styledText;
- });
- setProcessedLogs(fallbackLogs);
- }
- };
-
- processLogs();
- }, [colors, selectedPresets]);
-
- const handleColorChange = (key: keyof ThemeColors, value: string) => {
- setColors((prev) => ({ ...prev, [key]: value }));
- };
-
- const handlePresetToggle = (presetId: string) => {
- setSelectedPresets((prev) =>
- prev.includes(presetId)
- ? prev.filter((p) => p !== presetId)
- : [...prev, presetId],
- );
- };
-
- const resetColors = () => {
- setColors(DEFAULT_DARK_COLORS);
- // Clear saved theme from localStorage
- localStorage.removeItem(STORAGE_KEY);
- };
-
- const themeConfig: ThemeConfig = useMemo(() => {
- return {
- name: themeName,
- mode: "dark", // Default mode, colors determine actual appearance
- colors,
- presets: selectedPresets,
- };
- }, [themeName, colors, selectedPresets]);
-
- const copyCode = async () => {
- const code = generateThemeCode(themeName, "dark", colors, selectedPresets);
- await navigator.clipboard.writeText(code);
- setCopiedCode(true);
- setTimeout(() => setCopiedCode(false), 2000);
- };
-
- const copyConfig = async () => {
- await navigator.clipboard.writeText(JSON.stringify(themeConfig, null, 2));
- setCopiedConfig(true);
- setTimeout(() => setCopiedConfig(false), 2000);
- };
-
- const downloadTheme = () => {
- const code = generateThemeCode(themeName, "dark", colors, selectedPresets);
- const blob = new Blob([code], { type: "text/javascript" });
- const url = URL.createObjectURL(blob);
- const a = document.createElement("a");
- a.href = url;
- a.download = `${themeName}-theme.js`;
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- URL.revokeObjectURL(url);
- };
-
- return (
-
-
-
Create Your Custom Theme
-
- Design your own LogsDX theme with custom colors and presets. See
- real-time preview using the actual LogsDX engine.
-
-
-
-
-
-
-
Theme Basics
-
-
-
-
- setThemeName(
- e.target.value.toLowerCase().replace(/\s+/g, "-"),
- )
- }
- className="w-full px-3 py-2 border rounded-md dark:bg-slate-700 dark:border-slate-600"
- placeholder="my-awesome-theme"
- />
-
-
-
-
-
-
Colors
-
-
-
-
- {Object.entries(colors).map(([key, value]) => (
-
- ))}
-
-
-
-
-
Pattern Presets
-
- {PRESET_OPTIONS.map((preset) => (
-
- ))}
-
-
-
-
-
-
-
-
Live Preview
-
- Powered by LogsDX
-
-
-
-
-
- {processedLogs.length > 0 ? (
-
- {/* First set of logs */}
- {processedLogs.map((log, index) => (
-
- ))}
- {/* Duplicate set for seamless loop */}
- {processedLogs.map((log, index) => (
-
- ))}
-
- ) : (
-
-
- Processing logs...
-
-
- )}
-
-
-
-
-
-
Export Theme
-
-
-
-
-
-
-
-
-
-
-
-
-
Generated Code
-
-
-
- {showAdvanced && (
-
-
-
- {generateThemeCode(
- themeName,
- "dark",
- colors,
- selectedPresets,
- )}
-
-
-
- )}
-
-
-
-
Test with Custom Input
-
-
-
-
-
-