Skip to content

Question: Difference between --color-brand and e.g. --color-dark in web components #1148

Description

@ThRintelen

Setup: web component with lit (3.3.2) based on flowbite (4.0.2) with tailwind (4.3.0)

In my web component i import css with ?inline.

@import 'tailwindcss';
@import 'flowbite/src/themes/default';

If i look the source code of this, i see some variables defined in the :host of the shadow dom from the web component. I see the --color-dark or --font-sans but not the --color-brand.

Because of this i can overwrite in document root of the outer the variable --color-brand in :root, but not --color-dark.

Workaround: I need to define my own variables and set them in the web component shadow dom like this

@theme {
    --font-sans: var(--my-font-family);
    --color-dark: var(--my-color-dark);
}

Why can i overwrite some variables in root and other not? Is this a bug or a feature?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    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