adding brand colors with the Theme component #1387
Answered
by
metonym
acivitillo
asked this question in
Q&A
-
|
I am trying to add brand colors with Theme but I cannot find the right tokens. I have read a bit around, I wrote the below component expecting a change of the background color of the header bar, but it remains black. However, the button color has changed but this code I copied from carbon components svelte docs. <Theme
theme="g10"
tokens={{
"background-01": "#9684E5",
"layer-selected-inverse": "#9684E5",
"icon-primary": "#9684E5",
"field-01": "#9684E5",
"layer-01": "#9684E5",
"background": "#9684E5",
"background-active": "#9684E5",
"interactive-01": "#9684E5",
}}
/>
<Header company="eventflow" platformName="Integration Layer" bind:isSideNavOpen>
<svelte:fragment slot="skip-to-content">
<SkipToContent />
</svelte:fragment>
<SideNav bind:isOpen={isSideNavOpen} rail>
<SideNavItems>
<SideNavLink icon={DirectionStraightRight} text="Incoming Events" href="/table" />
<SideNavLink icon={Table} text="Master Data" href="/masterdata" />
<SideNavLink icon={Catalog} text="Consumers Catalog" href="/consumerscatalog" />
</SideNavItems>
</SideNav>
</Header>
<Content>
<slot />
</Content>
<Button>Primary button</Button> |
Beta Was this translation helpful? Give feedback.
Answered by
metonym
Jul 12, 2022
Replies: 3 comments 2 replies
-
|
Here's a list of CSS variables with default values for the Gray 10 theme. They were copied from the Chrome DevTools when inspecting the styles of the |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
I have updated all of them to purple and the header is still black:
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Currently, the UI Shell is not themeable. You'll need to manually override the CSS. |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
thanks, makes a lot of sense now, is there some documentation on overriding the css? I am currently importing the |
Beta Was this translation helpful? Give feedback.
-
|
Through the :global(.bx--header) {
background: red;
}Or plain CSS if importing a separate StyleSheet: <!-- __layout.svelte -->
<script>
import "./overrides.css";
</script>I prefer the latter to avoid having to write |
Beta Was this translation helpful? Give feedback.
Answer selected by
acivitillo
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Currently, the UI Shell is not themeable. You'll need to manually override the CSS.