Color Mode Config Flavors

The VueVentus Color Mode Config maps to the .colorMode property of your app VvConfig object. Global values should be set in your app.vv file, to be both provided and/or imported for use at the component level as a single source of truth for color mode impacted element styling in your app.

Color Modes Config Default

Contributor:@oberocks

            
                // ./src/app.vv.ts

                import { VvConfig } from '@obewds/vueventus'
                import type { ConfigVv } from '@obewds/vueventus'

                let appVv: ConfigVv = VvConfig

                    
                        appVv.colorModes.dark.ground = 'dark:bg-coolGray-900'
                        appVv.colorModes.dark.hex    = '#2d303c'
                        appVv.colorModes.dark.text   = 'dark:text-coolGray-100'
                        appVv.colorModes.dark.title  = 'Enable Dark Mode'

                        appVv.colorModes.light.ground = 'bg-coolGray-100'
                        appVv.colorModes.light.hex    = '#d8dae4'
                        appVv.colorModes.light.text   = 'text-coolGray-900'
                        appVv.colorModes.light.title  = 'Enable Light Mode'

            
                export default appVv