Changing primary button color or primary color in theme?

[brianmweis]

I added this to a custom css. Is this the way to change the primary blue or how can i do it for each component or globally in theme? (also not sure what the hover css name is. Took a guess.)

It did not work.

button--standard.button--primary {
  background-color: var(--sl-color-primary-800);
  border-color: var(--sl-color-primary-800);
  color: var(--sl-color-neutral-0);
}

button--standard.button--primary:hover {
  background-color: var(--sl-color-primary-900);
  border-color: var(--sl-color-primary-900);
  color: var(--sl-color-neutral-0);
}

My installation is

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace-autoloader.js"></script>

I have a separate CSS file hosted called shoelacecustom.css

I believe another work around would be to style a button in custom css like the example. Seems easier if did it as above.

.tomato-button::part(base) {
    background: var(--sl-color-neutral-0);
    border: solid 1px tomato;
  }

  .tomato-button::part(base):hover {
    background: rgba(255, 99, 71, 0.1);
  }

  .tomato-button::part(base):active {
    background: rgba(255, 99, 71, 0.2);
  }

  .tomato-button::part(base):focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.33);
  }

  .tomato-button::part(label) {
    color: tomato;
  }

Now I searched the discussions. I read all the items on styling and theme but the base understanding is not there hence my question.

[claviska]

Is this the way to change the primary blue or how can i do it for each component or globally in theme?

It looks like you're targeting the component's internals. What you see in the shadow root in the web inspector isn't typically useful because, by design, those parts are encapsulated and you can't target them with CSS. You need to stick with the components' public APIs.

Please check out this section of the docs. The whole page is a good read, but specifically look at the sections about Component Parts and Custom Properties.

https://shoelace.style/getting-started/customizing

There's also an example of custom styling a button here, which I think you'll find helpful.

https://shoelace.style/components/button?id=styling-buttons