Vue 3 Example With Composition API and Custom CSS Variable

vue3-example.vue

<template>
  <div class="Example">
    <h1>JS IN CSS Reactive Example</h1>
    <div class="area">
      <div class="form">
        <label>Select Color</label>
        <input type="color" v-model="customTheme.bgColor" />
      </div>
      <div class="preview">
        <span>{{ customTheme.bgColor }}</span>
        <div class="customColor"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "JSinCSS",
  setup() {
    const customTheme = ref({
      bgColor: "",
    });

    return {
      customTheme
    };
  },
};
</script>

<style>
.Example {
  --custom-color: v-bind("customTheme.bgColor");
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 3rem;
}
.Example h1 {
  margin-bottom: 20px;
}
.Example .area {
  display: flex;
  align-items: baseline;
}
.Example .area .form {
  margin-right: 30px;
}
.Example .area .form label {
  display: block;
}
.Example .area .form input {
  width: 100px;
  height: 50px;
}
.Example .area .preview {
  font-weight: bold;
}
.customColor {
  background: var(--custom-color);
  width: 100px;
  height: 50px;
}

</style>