listStyles

Category: Style Management

Namespace: web.styles.listStyles

Description

Gets a list of all VCL styles embedded in the application. These are the styles that can be activated with setStyle(). Returns an empty string if the style cannot be determined.

Syntax

const styles = await web.styles.listStyles();

Parameters

None

Returns

Promise<string[]> - Returns a promise that resolves with an array of available style names

Examples

Simple example

const styles = await web.styles.listStyles();
console.log('Available styles:', styles);
// Output: ["Windows10", "Glow", "Amakrits", ...]

Create style selector dropdown

const styles = await web.styles.listStyles();
const currentStyle = await web.styles.getStyle();

// Create dropdown options
const select = document.getElementById('styleSelector');
styles.forEach(style => {
    const option = document.createElement('option');
    option.value = style;
    option.textContent = style;
    option.selected = (style === currentStyle);
    select.appendChild(option);
});

// Handle style change
select.addEventListener('change', async (e) => {
    await web.styles.setStyle(e.target.value);
});

Filter dark themes

const styles = await web.styles.listStyles();

// Find dark themes (usually contain "Dark" in name)
const darkThemes = styles.filter(style => 
    style.toLowerCase().includes('dark')
);

console.log('Dark themes available:', darkThemes);

Use Cases

• Build theme selection UI
• Display available themes to users
• Validate style names before applying
• Show theme preview gallery
• Filter themes by type (light/dark)

Notes

• Returns only styles embedded in the application at compile time
• Style names are returned as resource names (typically uppercase, may contain underscores — e.g., MIDNIGHT_EXPRESS_GREEN or MIDNIGHTEXPRESSGREEN)
• Name format differs from getStyle(): listStyles() returns resource names, while getStyle() returns the internal VCL style name (may have different casing/spacing). To compare them, normalize both by stripping spaces and underscores, then compare uppercase.
• Returns empty array if an error occurs
• The list is static — determined at compile time by the WebExeBuilder project settings
• Use this to validate style names before calling setStyle()
• Pass the exact name from this list to setStyle() for reliable results