vuetify-coloring
Gives SPA users ability to change colors of Vuetify interface elements
Features
- Works directly with css variables
- Stores user settings in browser
localStorage
- Integrated lightweight developer tool
Setup
- Install package
npm install vuetify-coloring # or yarn add vuetify-coloring
- Enable Vuetify customProperties feature
theme:options: customProperties: true
- Define custom colors for groups of elements
theme: options: customProperties: true dark: true themes: dark: primary: "#001122" header: "#334455" panel: "#667788" background: "#99aabb" light: primary: "#001122" header: "#334455" panel: "#667788" background: "#99aabb" ;
- Import
VColoring
component to your app
; components: VColoring colors: 'primary' 'header' 'panel' 'background' ;
- Add
VColoring
to your template
Usage
Assign colors to elements
The easiest way to assign a color to an element is to use the color
prop
If the element does not have such a prop, then you can add the class
If none of the methods worked,
then you need to directly add the css rule to your <style>
section.
Integrated tool will help you.
Background on demo page has been set in this way
Presets
; components: VColoring colors: 'primary' 'header' 'panel' 'background' presets: Presets ;
Example
presets.json
file located innode_modules/vuetify-coloring/src/lib
Developer tool
To enable developer tool feature add tools
prop to template
or separately
To see how it works, go to tool demo page
VColoring props list
Name | Type | Default | Description |
---|---|---|---|
colors | Array | [] | List of custom colors |
presets | Object | {} | Presets |
tool | Boolean | false | Enables tool feature |
disable-picker | Boolean | false | Disables color picker |
Copyright (c) Sergey Demidov sergey.k.demidov@gmail.com