Dark Mode and Theming

Modes and themes allow styles to easily change when used in different contexts or users' preferences.

This is documentation about how to Enable Dark Mode in your markup if you want to know how to display it to users….
Check our Pattern documentation!

Themes are only available on V4, if you wish to update to V4 consult our migration guide.

Applying different Themes and Modes on coded components

Legacy Theme

The theme that components will use can only be defined during the initialization of the components as a parameter like so:


                                                        
                                                        
                                                            import { registerSparkComponents } from 'genesys-spark';
                                                        
                                                        registerSparkComponents({theme: 'legacy'});

The only current theme we have is ‘legacy' .

Dark Mode

Dark mode is only available on the default Flare theme, not in Legacy.

You can apply Dark Mode to any element of the HTML(That is using Flare’s colors) using the flare-mode attribute, this will affect the element’s children also:


                                                        
                                                        
                                                            <gux-card flare-mode="dark">
                                                            I'm a Dark Mode card!
                                                            <gux-button>I'm a Dark Mode button too!</gux-button>
                                                        </gux-card>

Something looks broken on this site?

Report it to the Design System team here!