I totally get your frustration—having to write hundreds of lines of code to style every single chart element one by one is tedious, and it's way too easy to miss small details. The good news is there's a smarter way to create reusable, custom themes using just a handful of core control colors, without having to manually define every single Theme property.

Here's a step-by-step solution tailored to your needs: #

1. Define your core control colors

Start with a small, focused set of base colors that represent your theme (e.g., background, text, primary series, accents). This keeps maintenance simple and ensures consistency across all your charts.

const customControlColors = {
    background: ColorHEX("#d3c8ffff"),
    seriesBackground: ColorHEX("#a994ffff"),
    text: ColorHEX("#ffffff"),
    primarySeries: ColorHEX("#fff200ff"),
    gridTicks: ColorHEX("#ffffff")
}

2. Create a reusable theme generator function

Instead of building a Theme object from scratch, start with an existing base theme (like Themes.light) and override only the color-related properties using your control colors. This leverages the default Theme structure so you don't have to define hundreds of properties manually.

We'll use a deep merge approach to replace just the color values we care about:

const createCustomTheme = (controlColors) => {
    // Start with a base theme (disable default effects if needed)
    const baseTheme = disableThemeEffects(Themes.light)
    
    // Override color properties with our control colors
    const customTheme = {
        ...baseTheme,
        chartBackgroundFillStyle: new SolidFill({ color: controlColors.background }),
        seriesBackgroundFillStyle: new SolidFill({ color: controlColors.seriesBackground }),
        title: {
            ...baseTheme.title,
            fillStyle: new SolidFill({ color: controlColors.text })
        },
        axis: {
            ...baseTheme.axis,
            tick: {
                ...baseTheme.axis.tick,
                labelFillStyle: new SolidFill({ color: controlColors.text }),
                strokeStyle: new SolidLine({ 
                    thickness: 1, 
                    fillStyle: new SolidFill({ color: controlColors.gridTicks }) 
                })
            },
            grid: {
                ...baseTheme.axis.grid,
                strokeStyle: new SolidLine({ 
                    thickness: 1, 
                    fillStyle: new SolidFill({ color: controlColors.gridTicks }) 
                })
            }
        },
        lineSeries: {
            ...baseTheme.lineSeries,
            strokeStyle: new SolidLine({ 
                thickness: 2, 
                fillStyle: new SolidFill({ color: controlColors.primarySeries }) 
            })
        }
    }
    
    return customTheme
}

3. Use your custom theme across all charts

Now you can use this theme generator in any project—just import your control colors and theme function, then pass the generated theme to your chart constructor. No more repetitive styling code!

const { AxisTickStrategies, ColorHEX, disableThemeEffects, lightningChart, SolidFill, SolidLine, Themes } = lcjs 

// Import your control colors and theme generator (can be in a shared module)
const customControlColors = {
    background: ColorHEX("#d3c8ffff"),
    seriesBackground: ColorHEX("#a994ffff"),
    text: ColorHEX("#ffffff"),
    primarySeries: ColorHEX("#fff200ff"),
    gridTicks: ColorHEX("#ffffff")
}

const createCustomTheme = (controlColors) => {
    const baseTheme = disableThemeEffects(Themes.light)
    return {
        ...baseTheme,
        chartBackgroundFillStyle: new SolidFill({ color: controlColors.background }),
        seriesBackgroundFillStyle: new SolidFill({ color: controlColors.seriesBackground }),
        title: {
            ...baseTheme.title,
            fillStyle: new SolidFill({ color: controlColors.text })
        },
        axis: {
            ...baseTheme.axis,
            tick: {
                ...baseTheme.axis.tick,
                labelFillStyle: new SolidFill({ color: controlColors.text }),
                strokeStyle: new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: controlColors.gridTicks }) })
            },
            grid: {
                ...baseTheme.axis.grid,
                strokeStyle: new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: controlColors.gridTicks }) })
            }
        },
        lineSeries: {
            ...baseTheme.lineSeries,
            strokeStyle: new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: controlColors.primarySeries }) })
        }
    }
}

// Create chart with custom theme
const lc = lightningChart(); 
const chart = lc.ChartXY({ 
    theme: createCustomTheme(customControlColors), 
    defaultAxisX: { type: "linear-highPrecision" }, 
}); 

const trend = chart.addLineSeries({ 
    schema: { x: { pattern: "progressive" }, y: { pattern: null } }, 
}); 

trend.appendSamples({ 
    x: new Array(100).fill(0).map((_, i) => i), 
    y: new Array(100).fill(0).map(Math.random), 
}); 

Key Benefits: #

• Minimal maintenance: Only update your core control colors to change the entire theme
• Universal reuse: Export the theme generator and control colors as a shared module for all your projects
• Complete coverage: By extending a base theme, you ensure all chart elements (even ones you might forget) inherit your custom colors
• Cleaner code: No more hundreds of lines of repetitive styling calls

You can expand this generator to include more control colors (e.g., secondary series colors, hover states) as needed—just add them to your control color object and map them to the corresponding Theme properties.

内容的提问来源于stack exchange，提问作者Ella Martin