Help with dynamic switching of Carbon Themes #8272
-
|
Hello Team, Could someone please share a codesandbox or resources on how to achieve the dynamic switching between different carbon themes from the UI. Thanks in advance. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
Hi 👋🏽 when you say dynamic switching, do you mean how we have a dropdown for our component demo that switches the specific zone theme? If so, we utilize css custom properties. We have a feature flag that you can turn on that will allow you to use custom properties. Then you can set different themes within certain zones. In your $feature-flags: (
enable-css-custom-properties: true,
);
@import "carbon-components/scss/globals/scss/styles.scss";Then you can create themed "zones" like this: //form page styles
.g90 {
@include carbon--theme(
$theme: $carbon--theme--g100,
$emit-custom-properties: true
);
}And rather than using our regular tokens, use our custom property tokens, like this: .color-block-header {
padding: 2rem;
background: var(--cds-ui-background);
color: var(--cds-text-01);
}Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @jnm2377 for your response. Here is my use case: I would like to present a drop down with the list of carbon themes that are natively available like White, G10, G90, G100 and upon changing the themes within the drop down, that particular theme should apply on the fly. Wondering how to change the theme based on the drop down components 'onChange' event? Thanks in advance. |
Beta Was this translation helpful? Give feedback.
-
|
Based on @jnm2377 's suggestions above, would you then be able to toggle the specific class that was selected ( |
Beta Was this translation helpful? Give feedback.
-
|
Great. Thanks a lot @tw15egan. Appreciate it. |
Beta Was this translation helpful? Give feedback.
Hi 👋🏽 when you say dynamic switching, do you mean how we have a dropdown for our component demo that switches the specific zone theme? If so, we utilize css custom properties. We have a feature flag that you can turn on that will allow you to use custom properties. Then you can set different themes within certain zones.
In your
index.scssyou'd have this:Then you can create themed "zones" like this:
And rather than using our regular tokens, use o…