Skip to content

DockManager: Theme broken #16978

@Timmeeeey

Description

@Timmeeeey

Description

I'm using the igniteui-fluent-light-word.css and igniteui-fluent-dark-word.css files for styling.
The prefix igc for igc-dockmanager variables is missing, so the variables are not applied.

igc-dockmanager {
    --active-color: var(--igx-dockmanager-active-color, var(--ig-dockmanager-active-color, var(--ig-primary-500)));
    --background-color: var(--igx-dockmanager-background-color, var(--ig-dockmanager-background-color, var(--ig-gray-50)));
    --border-color: var(--igx-dockmanager-border-color, var(--ig-dockmanager-border-color, var(--ig-gray-100)));
    --button-text: var(--igx-dockmanager-button-text, var(--ig-dockmanager-button-text, var(--ig-surface-500-contrast)));
    --context-menu-background-active: var(--igx-dockmanager-context-menu-background-active, var(--ig-dockmanager-context-menu-background-active, var(--ig-gray-50)));
    --dock-background: var(--igx-dockmanager-dock-background, var(--ig-dockmanager-dock-background, var(--ig-gray-50)));
    --drop-shadow-background: var(--igx-dockmanager-drop-shadow-background, var(--ig-dockmanager-drop-shadow-background, hsl(from var(--ig-primary-900) h s l/0.3)));
    --floating-pane-border-color: var(--igx-dockmanager-floating-pane-border-color, var(--ig-dockmanager-floating-pane-border-color, transparent));
    --flyout-shadow-color: var(--igx-dockmanager-flyout-shadow-color, var(--ig-dockmanager-flyout-shadow-color, hsl(from var(--ig-gray-50) h s l/0.3)));
    --joystick-background-active: var(--igx-dockmanager-joystick-background-active, var(--ig-dockmanager-joystick-background-active, var(--ig-gray-50)));
    --joystick-border-color: var(--igx-dockmanager-joystick-border-color, var(--ig-dockmanager-joystick-border-color, transparent));
    --joystick-icon-color: var(--igx-dockmanager-joystick-icon-color, var(--ig-dockmanager-joystick-icon-color, var(--ig-surface-500-contrast)));
    --joystick-icon-color-active: var(--igx-dockmanager-joystick-icon-color-active, var(--ig-dockmanager-joystick-icon-color-active, var(--ig-gray-800)));
    --pane-content-background: var(--igx-dockmanager-pane-content-background, var(--ig-dockmanager-pane-content-background, var(--ig-surface-500)));
    --pane-header-background: var(--igx-dockmanager-pane-header-background, var(--ig-dockmanager-pane-header-background, var(--ig-gray-50)));
    --pinned-header-background: var(--igx-dockmanager-pinned-header-background, var(--ig-dockmanager-pinned-header-background, var(--ig-gray-50)));
    --splitter-background: var(--igx-dockmanager-splitter-background, var(--ig-dockmanager-splitter-background, var(--ig-gray-100)));
    --splitter-handle: var(--igx-dockmanager-splitter-handle, var(--ig-dockmanager-splitter-handle, var(--ig-gray-50)));
    --tab-background-active: var(--igx-dockmanager-tab-background-active, var(--ig-dockmanager-tab-background-active, hsl(from var(--ig-gray-100) h s l/0.3)));
    --tab-background: var(--igx-dockmanager-tab-background, var(--ig-dockmanager-tab-background, hsl(from var(--ig-gray-100) h s l/0.3)));
    --tab-text: var(--igx-dockmanager-tab-text, var(--ig-dockmanager-tab-text, var(--ig-gray-700)));
    --text-color: var(--igx-dockmanager-text-color, var(--ig-dockmanager-text-color, var(--ig-gray-800)));
    --context-menu-color-active: var(--igx-dockmanager-context-menu-color-active, var(--ig-dockmanager-context-menu-color-active, var(--ig-gray-50-contrast)));
    --context-menu-color: var(--igx-dockmanager-context-menu-color, var(--ig-dockmanager-context-menu-color, var(--ig-surface-500-contrast)));
    --tab-border-color-active: var(--igx-dockmanager-tab-border-color-active, var(--ig-dockmanager-tab-border-color-active, var(--ig-gray-100)));
    --tab-border-color: var(--igx-dockmanager-tab-border-color, var(--ig-dockmanager-tab-border-color, var(--ig-surface-500)));
    --tab-text-active: var(--igx-dockmanager-tab-text-active, var(--ig-dockmanager-tab-text-active, var(--ig-primary-200)));
    --joystick-background: var(--igx-dockmanager-joystick-background, var(--ig-dockmanager-joystick-background, var(--ig-gray-100)));
    --context-menu-background: var(--igx-dockmanager-context-menu-background, var(--ig-dockmanager-context-menu-background, var(--ig-gray-100)));
    --ig-theme: fluent;
    --ig-theme-variant: dark
}
  • igniteui-angular version: 21.1.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions