ScrollbarDefault Palette Config Module

A default palette of border colors with properties/values with the keys of default, error, primary, secondary, and success.

app.vv.ts Use

You'll usually work with the ScrollbarDefault Palette 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:

javascript

// ./src/app.vv.ts

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

let appVv: ConfigVv = VvConfig

// ...

// Override the default VvConfig borders palette colors individually
appVv.scrollbars.palettes.default.default = '...'
appVv.scrollbars.palettes.default.error = '...'
appVv.scrollbars.palettes.default.primary = '...'
appVv.scrollbars.palettes.default.secondary = '...'
appVv.scrollbars.palettes.default.success = '...'

// Add a new custom app anchor color name & value
// to the default VvConfig borders palette
appVv.scrollbars.palettes.default.newAppColor = '...'

// Add a new custom app anchor palette
appVv.scrollbars.palettes.newAppPalette = {
    default: '...',
    error: '...',
    primary: '...',
    secondary: '...',
    success: '...',
    // Add a new custom app anchor color name & value
    anotherAppColor: '...',
} as DefaultPaletteColors

// ...

export default appVv

Import

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

javascript

import { ScrollbarDefault } from '@obewds/vueventus'

Module Code

// ./src/configs/palettes/ScrollbarDefault.ts

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

export default <DefaultPaletteColors>{
    '': '',
    'default': 'scrollbar scrollbar-thumb-trueGray-100 scrollbar-track-trueGray-200 dark:scrollbar-thumb-trueGray-600 dark:scrollbar-track-trueGray-800',
    error: 'scrollbar scrollbar-thumb-rose-100 scrollbar-track-rose-200 dark:scrollbar-thumb-rose-600 dark:scrollbar-track-rose-800',
    primary: 'scrollbar scrollbar-thumb-blue-100 scrollbar-track-blue-200 dark:scrollbar-thumb-blue-600 dark:scrollbar-track-blue-800',
    secondary: 'scrollbar scrollbar-thumb-violet-100 scrollbar-track-violet-200 dark:scrollbar-thumb-violet-600 dark:scrollbar-track-violet-800',
    success: 'scrollbar scrollbar-thumb-green-100 scrollbar-track-green-200 dark:scrollbar-thumb-green-600 dark:scrollbar-track-green-800',
}

ScrollbarDefault Palette Config Module ​

app.vv.ts Use ​

Import ​

Module Code ​

ScrollbarDefault Palette Config Module

app.vv.ts Use

Import

Module Code