@inkline/inkline/composables/useComponentColor.js

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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useComponentColor = useComponentColor;
var _vue = require("vue");
var _useInkline = require("@inkline/inkline/composables/useInkline");
function useComponentColor(props) {
  const inkline = (0, _useInkline.useInkline)();
  const color = (0, _vue.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
  };
}