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?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions