Rand color css v-bind

Author: atomjoy

resources/js/components/utils/ChangeColor/ChangeColor.vue

@@ -1,13 +1,23 @@
 <script setup>
-let props = defineProps(['color', 'text'])
+let props = defineProps({
+	color: { type: String, default: '#0099ff' },
+	text: { type: String, default: 'Colored Text' },
+	size: { type: String, default: '25px' },
+})
 </script>
 
 <template>
-	<span class="color">{{ text }}</span>
+	<span class="colored-text">{{ text }}</span>
 </template>
 
-<style>
-.color {
-	color: v-bind('props.color') !important;
+<style scoped>
+.wrapp{
+	--color: v-bind(props.color);
+}
+
+.colored-text {
+	margin-right: 20px;
+	color: v-bind('props.color');
+	font-size: v-bind('props.size');
 }
 </style>

resources/js/utils/gsap.js

@@ -0,0 +1,6 @@
+import { gsap } from "gsap";
+import { Observer } from "gsap/Observer";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { ScrollToPlugin } from "gsap/ScrollToPlugin";
+
+gsap.registerPlugin(useGSAP,ScrollTrigger,Observer,ScrollToPlugin);

resources/js/utils/random-color.js

@@ -0,0 +1,14 @@
+function randomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+
+const changeRootColor = () => {
+  document.documentElement.style.setProperty('--root-color', randomColor());
+}
+
+export { randomColor as default, changeRootColor }

resources/js/views/demo/ColoredText.vue

@@ -0,0 +1,11 @@
+<script setup>
+import ChangeColor from '@/components/utils/ChangeColor/ChangeColor.vue';
+</script>
+
+<template>
+    <div class="section">
+        <ChangeColor color="#0099ff" text="Colored Text" />
+	    <ChangeColor color="#ff2233" text="Colored Text" size="20px" />
+	    <ChangeColor color="#55cc55" text="Colored Text" size="16px" />
+    </div>
+</template>