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 they appear in the resources
• Returns empty array if an error occurs
• The list is static - determined at compile time
• Use this to validate style names before calling setStyle()