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

Live demo

Setup

• Install package

npm install vuetify-coloring # or yarn add vuetify-coloring

• Enable Vuetify customProperties feature

new Vuetify({
  theme: {
    options: { customProperties: true },
  },
})

• Define custom colors for groups of elements

new Vuetify({
  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

import VColoring from "vuetify-coloring";

export default {
  components: {
    VColoring
  },
  data: () => ({
    colors: [ 'primary', 'header', 'panel', 'background']
  })
};

• Add VColoring to your template

 <VColoring :colors="colors" />

Usage

Assign colors to elements

The easiest way to assign a color to an element is to use the color prop

 <v-app-bar color="header">

If the element does not have such a prop, then you can add the class

 <v-list-item-content class="panel">

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

import Presets from "./presets.json";

export default {
  components: {
    VColoring
  },
  data: () => ({
    colors: [ 'primary', 'header', 'panel', 'background'],
    presets: Presets
  })
};

 <VColoring
    :colors="colors"
    :presets="presets"
 />

Example presets.json file located in node_modules/vuetify-coloring/src/lib

Developer tool

To enable developer tool feature add tools prop to template

 <VColoring
    :colors="colors"
    :presets="presets"
    tool
 />

or separately

<VColoringTool :colors="colors" />

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 [email protected]