Skip to content

vscode-tabs - CSS variables update #540

@wfabr

Description

@wfabr

Enhancement: Allow styling of default VSCode-Tabs (not panel type) using theme variables.

Current styles (non-specific to element state)

https://github.com/vscode-elements/elements/blob/main/src/vscode-tab-header/vscode-tab-header.styles.ts#L43

    .wrapper {
      color: var(--vscode-foreground, #cccccc);
    }

https://github.com/vscode-elements/elements/blob/main/src/vscode-tab-header/vscode-tab-header.styles.ts#L26

    :host([active]) .wrapper {
      border-bottom-color: var(--vscode-panelTitle-activeForeground, #cccccc);
      color: var(--vscode-panelTitle-activeForeground, #cccccc);
    }

proposed change (dedicated CSS variables)

    .wrapper {
      color: var(--vscode-panelTitle-inactiveForeground, #9d9d9d);
    }

    :host([active]) .wrapper {
      border-bottom-color: var(--vscode-panelTitle-activeBorder, #cccccc);
      color: var(--vscode-panelTitle-activeForeground, #cccccc);
    }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions