ColorModes Config Module

The ColorModes Config Module holds your application's default/prototypal Tailwind CSS classes and color codes for the foundation of the dark and light mode options throughout VueVentus and for use in end applications.

app.vv.ts Use

You'll usually work with the ColorModes Config Module after it's already been merged into VueVentus VvConfig data.

Here's what that generally looks like in practice in a real world app context:

// ./src/app.vv.ts

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

let appVv: ConfigVv = VvConfig

appVv.colorModes.someProperty = 'some-value'

// ...

export default appVv

Import

However, if you need to import the compiled library version of the ColorModes Config Module, you can use:

import { ColorModes } from '@obewds/vueventus'

ColorModes.dark.ground

Type: String
Default: "dark:bg-gray-900"

The ColorModes.dark.ground parameter is meant to isolate the CSS ground (background) color class for an application's dark mode color state.

Example

// ./src/app.vv.ts
appVv.colorModes.dark.ground = '...'

ColorModes.dark.hex

Type: String
Default: "#242426"

The ColorModes.dark.hex parameter is meant to isolate the CSS ground (background) hex color code value for an application's dark mode mode state.

Example

// ./src/app.vv.ts
appVv.colorModes.dark.hex = '...'

ColorModes.dark.text

Type: String
Default: "dark:text-gray-100"

The ColorModes.dark.text parameter is meant to isolate the CSS text color class for an application's dark mode color state.

Example

// ./src/app.vv.ts
appVv.colorModes.dark.text = '...'

ColorModes.dark.title

Type: String
Default: "Enable Dark Mode"

The ColorModes.dark.title parameter is meant to describe the color mode state to an end user for accessibility reasons (which can often be as simple as a title HTML attribute)

Example

// ./src/app.vv.ts
appVv.colorModes.dark.title = '...'

ColorModes.light.ground

Type: String
Default: "bg-gray-100"

The ColorModes.light.ground parameter is meant to isolate the CSS ground (background) color class for an application's light mode color state.

Example

// ./src/app.vv.ts
appVv.colorModes.light.ground = '...'

ColorModes.light.hex

Type: String
Default: "#e1e1e3"

The ColorModes.light.hex parameter is meant to isolate the CSS ground (background) hex color code value for an application's light mode mode state.

Example

// ./src/app.vv.ts
appVv.colorModes.light.hex = '...'

ColorModes.light.text

Type: String
Default: "text-gray-900"

The ColorModes.light.text parameter is meant to isolate the CSS text color class for an application's light mode color state.

Example

// ./src/app.vv.ts
appVv.colorModes.light.text = '...'

ColorModes.light.title

Type: String
Default: "Enable Light Mode"

The ColorModes.light.title parameter is meant to describe the color mode state to an end user for accessibility reasons (which can often be as simple as a title HTML attribute)

Example

// ./src/app.vv.ts
appVv.colorModes.light.title = '...'

ColorModes.base()

Returns: String
Default: "bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100"

The ColorModes.base() method returns a joined String of the atomic classes within the various base properties of the ColorModes Config Module object.

Example

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'

    const someVar = appVv.colorModes.base()
    
</script>

<template>

    <div :class="someVar">
        This div now has all of the base color mode classes!
    </div>

</template>

Module Code

// ./src/configs/ColorModes.ts

import type { ConfigColorMode } from '../types/ConfigColorMode'

export default <ConfigColorMode>{
    dark: {
        ground: 'dark:bg-gray-900',
        hex: '#242426',
        text: 'dark:text-gray-100',
        title: 'Enable Dark Mode',
    },
    light: {
        ground: 'bg-gray-100',
        hex: '#e1e1e3',
        text: 'text-gray-900',
        title: 'Enable Light Mode',
    },
    base: function () {
        return [
            this.light.ground,
            this.light.text,
            this.dark.ground,
            this.dark.text,
        ].join(' ').replace(/\s+/g,' ').trim()
    },
}

Current Version:

v0.61.7