// This is a recipe for dynamic, client-side theming // All Carbon themes are included (White, Gray 10, Gray 90, Gray 100) $feature-flags: ( // Custom CSS properties must be enabled to dynamically switch themes enable-css-custom-properties: true, ui-shell: true, grid-columns-16: true ); $css--font-face: true; $css--helpers: true; $css--body: true; $css--use-layer: true; $css--reset: true; $css--default-type: true; $css--plex: true; // Use all Carbon themes @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; @import "carbon-components/scss/globals/scss/component-tokens"; @import "carbon-components/src/components/tag/tag"; @import "carbon-components/src/components/notification/inline-notification"; @import "carbon-components/src/components/notification/toast-notification"; @import "./popover"; // The default theme is "white" (White) :root { @include carbon--theme($carbon--theme--white, true) { @include emit-component-tokens($tag-colors); @include emit-component-tokens($notification-colors); } } // Set the theme attribute to "g10" to use the Gray 10 theme // :root[theme="g10"] { @include carbon--theme($carbon--theme--g10, true) { @include emit-component-tokens($tag-colors); @include emit-component-tokens($notification-colors); } } // Set the theme attribute to "g80" to use the Gray 80 theme // :root[theme="g80"] { @include carbon--theme($carbon--theme--g80, true) { @include emit-component-tokens($tag-colors); @include emit-component-tokens($notification-colors); } } // Set the theme attribute to "g90" to use the Gray 90 theme // :root[theme="g90"] { @include carbon--theme($carbon--theme--g90, true) { @include emit-component-tokens($tag-colors); @include emit-component-tokens($notification-colors); } } // Set the theme attribute to "g100" to use the Gray 100 theme // :root[theme="g100"] { @include carbon--theme($carbon--theme--g100, true) { @include emit-component-tokens($tag-colors); @include emit-component-tokens($notification-colors); } } // Programmatically update the theme in JavaScript: // document.documentElement.setAttribute("theme", "g90"); @import "carbon-components/scss/globals/scss/_css--reset"; @import "carbon-components/scss/globals/scss/_css--font-face"; @import "carbon-components/scss/globals/scss/_css--helpers"; @import "carbon-components/scss/globals/scss/_css--body"; @import "carbon-components/scss/globals/grid/grid"; // Import all component styles @import "carbon-components/scss/globals/scss/styles";