Accent Bacground Directive

The v-accent-background directive is used to add hover and active background color to any element. It is useful when you want to add hover and active background color to any element without writing any css. Furthermore, you can also customize the background color.

Usage

<template>
  <button
    class="px-4 py-2 rounded-full bg-red-600 text-white"
    v-accent-background
  >
    Click me
  </button>
</template>

Automatically set the background color of the element to the accent color.

You can also set the background color to a different color by passing the color name as a parameter.

View Code

<script setup></script>
<template>
  <div class="p-5 rounded-2xl bg-zinc-50 dark:bg-zinc-800 space-y-2">
    <p>
      Automatically set the background color of the element to the accent color.
    </p>
    <div class="space-x-1">
      <button
        class="px-4 py-2 rounded-full bg-red-600 text-white"
        v-accent-background
      >
        Red
      </button>
      <button
        class="px-4 py-2 rounded-full bg-blue-600 text-white"
        v-accent-background
      >
        Blue
      </button>
      <button
        class="px-4 py-2 rounded-full bg-green-600 text-white"
        v-accent-background
      >
        Green
      </button>
    </div>
    <p>
      You can also set the background color to a different color by passing the
      color name as a parameter.
    </p>
    <div class="space-x-1">
      <button
        class="px-4 py-2 rounded-full bg-red-400 text-white"
        v-accent-background="{
          hover: 'rgb(220,38,38)',
          active: 'rgb(127,29,29)',
        }"
      >
        Red
      </button>
      <button
        class="px-4 py-2 rounded-full bg-blue-400 text-white"
        v-accent-background="{
          hover: 'rgb(37,99,235)',
          active: 'rgb(30,58,138)',
        }"
      >
        Blue
      </button>
      <button
        class="px-4 py-2 rounded-full bg-green-400 text-white"
        v-accent-background="{
          hover: '#16A34A',
          active: '#14532D',
        }"
      >
        Green
      </button>
    </div>
  </div>
</template>
<style scoped></style>

Customization

You can customize the background color of both hover and active state by passing the colors in an object to the directive.

<template>
  <div v-accent-background="{ hover: 'red', active: 'blue' }">Click me</div>
  <button
    v-accent-background="{
      hover: '#16A34A', // you can use any valid css color value
      active: '#14532D', // you can use any valid css color value
    }"
  >
    Click me
  </button>
</template>

Arguments

The v-accent-background directive does not accept any arguments.

Modifiers

The v-accent-background directive does not accept any modifiers.

Source Code

function shades(rgbSplit) {
  let rgb = rgbSplit.replace(/[^\d,]/g, "").split(",");
  console.log(rgb);
  let r = rgb[0];
  let g = rgb[1];
  let b = rgb[2];
  let shade = [];

  for (let i = 0; i < 5; i++) {
    shade.push(`rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`);
    r = Math.round(r / 1.5);
    g = Math.round(g / 1.5);
    b = Math.round(b / 1.5);
  }

  return shade;
}

export const vAccentBackground = {
  mounted(el, binding) {
    let bgColor = window.getComputedStyle(el).backgroundColor;
    console.log(bgColor);
    // Create shade color: 20% darker than bgColor, closer to black
    const shade = shades(bgColor);
    console.log(shade);
    // Colors for hover and active states
    const hoverColor = binding.value
      ? binding.value.hover
        ? binding.value.hover
        : shade[1]
      : shade[1];
    const activeColor = binding.value
      ? binding.value.active
        ? binding.value.active
        : shade[2]
      : shade[2];

    // Add hover listener
    el.addEventListener("mouseenter", () => {
      el.style.backgroundColor = hoverColor;
    });

    // Remove hover listener
    el.addEventListener("mouseleave", () => {
      el.style.backgroundColor = bgColor;
    });

    // Add active listener
    el.addEventListener("mousedown", () => {
      el.style.backgroundColor = activeColor;
    });

    // Remove active listener
    el.addEventListener("mouseup", () => {
      el.style.backgroundColor = bgColor;
    });
  },
};