getStyleColors

Category: Style Management

Namespace: web.styles.getStyleColors

Description

Returns the current VCL style's color palette as a JSON object of CSS-compatible hex color strings. This allows your HTML/CSS to dynamically match the native Delphi VCL theme, keeping the web content visually consistent with the application window chrome.

Syntax

const colors = await web.styles.getStyleColors();

Parameters

None

Returns

Promise<object|null> - Returns a promise that resolves with a color object, or null if an error occurs.

Color Object Properties

All color values are returned as 7-character hex strings (e.g., #3E3E3E).

Examples

Basic usage — apply theme colors to the page

const colors = await web.styles.getStyleColors();

document.body.style.backgroundColor = colors.windowBackground;
document.body.style.color = colors.windowText;

Style an entire page to match the VCL theme

async function applyThemeColors() {
    const colors = await web.styles.getStyleColors();
    if (!colors) return;

    const root = document.documentElement;
    root.style.setProperty('--bg-window', colors.windowBackground);
    root.style.setProperty('--bg-panel', colors.panelBackground);
    root.style.setProperty('--bg-input', colors.editBackground);
    root.style.setProperty('--bg-button', colors.buttonFace);
    root.style.setProperty('--bg-highlight', colors.highlight);
    root.style.setProperty('--text-primary', colors.windowText);
    root.style.setProperty('--text-disabled', colors.windowTextDisabled);
    root.style.setProperty('--text-button', colors.buttonText);
    root.style.setProperty('--text-highlight', colors.highlightText);
    root.style.setProperty('--border-color', colors.border);
}

applyThemeColors();

Then in your CSS:

:root {
    --bg-window: #ffffff;
    --bg-panel: #f0f0f0;
    --text-primary: #000000;
    --border-color: #cccccc;
}

body {
    background-color: var(--bg-window);
    color: var(--text-primary);
}

.panel {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
}

input, textarea {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

button {
    background-color: var(--bg-button);
    color: var(--text-button);
    border: 1px solid var(--border-color);
}

button:hover {
    background-color: var(--bg-highlight);
    color: var(--text-highlight);
}

Detect dark vs light theme

const colors = await web.styles.getStyleColors();

// Parse the window background to determine brightness
function isColorDark(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    return luminance < 0.5;
}

if (isColorDark(colors.windowBackground)) {
    document.body.classList.add('dark-theme');
    console.log('Dark theme detected:', colors.styleName);
} else {
    document.body.classList.add('light-theme');
    console.log('Light theme detected:', colors.styleName);
}

Re-apply colors after a style change

// After calling setStyle, re-fetch colors to update the UI
async function switchTheme(styleName) {
    const result = await web.styles.setStyle(styleName);
    
    // Note: setStyle triggers an app restart, so this code
    // would run on the next launch. Instead, call getStyleColors
    // on page load to always pick up the current theme:
}

// Always apply on load
window.addEventListener('DOMContentLoaded', async () => {
    const colors = await web.styles.getStyleColors();
    if (colors) {
        applyThemeColors(colors);
        console.log('Applied style:', colors.styleName);
    }
});

Build a themed navigation menu

async function buildThemedNav() {
    const colors = await web.styles.getStyleColors();

    const nav = document.getElementById('sidebar');
    nav.style.backgroundColor = colors.menuBackground;
    nav.style.color = colors.menuText;
    nav.style.borderRight = `1px solid ${colors.border}`;

    // Style menu items
    document.querySelectorAll('.nav-item').forEach(item => {
        item.style.color = colors.menuText;
        
        item.addEventListener('mouseenter', () => {
            item.style.color = colors.menuTextHot;
            item.style.backgroundColor = colors.highlight;
        });
        
        item.addEventListener('mouseleave', () => {
            item.style.color = colors.menuText;
            item.style.backgroundColor = 'transparent';
        });
    });
}

Example Response

{
    "windowBackground": "#3E3E3E",
    "panelBackground": "#3E3E3E",
    "windowText": "#C0C0C0",
    "windowTextDisabled": "#808080",
    "buttonFace": "#282828",
    "buttonText": "#A3A3A3",
    "buttonTextDisabled": "#808080",
    "buttonTextHot": "#FFFFFF",
    "buttonTextPressed": "#FFFFFF",
    "editBackground": "#232323",
    "editText": "#C0C0C0",
    "editTextDisabled": "#808080",
    "listItemNormal": "#C0C0C0",
    "listItemSelected": "#FFFFFF",
    "listItemHot": "#FFFFFF",
    "menuBackground": "#3E3E3E",
    "menuText": "#C0C0C0",
    "menuTextHot": "#FFFFFF",
    "menuTextDisabled": "#939393",
    "categoryText": "#C0C0C0",
    "border": "#282828",
    "highlight": "#1F1F1F",
    "highlightText": "#FFFFFF",
    "styleName": "Charcoal Dark Slate"
}

Use Cases

• Match your HTML UI to the native VCL application theme
• Build dark/light mode detection without hardcoding colors
• Create theme-aware custom controls in HTML
• Dynamically style navigation, sidebars, and toolbars
• Ensure consistent look between native window chrome and web content
• Apply CSS custom properties from the VCL palette for easy theming

Notes

• Colors are derived from Delphi's TStyleServices at the moment of the call
• All hex values use uppercase letters (e.g., #3E3E3E, not #3e3e3e)
• The styleName property is included for reference and matches getStyle() output
• Returns null if the style system is unavailable or an error occurs
• Colors update immediately when a new style is applied — call this after setStyle() completes (on the next app launch since setStyle triggers a restart)
• Works with all embedded VCL styles and styles loaded from file via loadStyleFromFile()
• The color values reflect the current state of StyleServices — if no custom style is loaded, they reflect the Windows default theme