@inkline/inkline/composables/useComponentColor.mjs

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

import { computed } from "vue";
import { useInkline } from "@inkline/inkline/composables/useInkline";
export function useComponentColor(props) {
  const inkline = useInkline();
  const color = computed(() => {
    let colorClass = props.currentColor.value || "light";
    if (!props.currentColor.value && inkline?.options) {
      if (inkline.options.componentOptions[props.componentName]?.color) {
        colorClass = inkline.options.componentOptions[props.componentName]?.color;
      } else if (inkline.options.color) {
        colorClass = inkline.options.color;
      } else if (inkline.options.colorMode === "system") {
        colorClass = typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
      } else {
        colorClass = inkline.options.colorMode;
      }
    }
    return colorClass;
  });
  return { color };
}