@scalar/api-client
Version:
the open source API testing client
86 lines (85 loc) • 3.01 kB
JavaScript
import { defineComponent as x, createElementBlock as y, openBlock as o, createVNode as l, unref as e, normalizeClass as s, withCtx as c, createElementVNode as i, createTextVNode as d, createBlock as u, createCommentVNode as f } from "vue";
import { cva as g, ScalarButton as m, cx as p, ScalarIcon as k } from "@scalar/components";
import { useColorMode as v } from "@scalar/use-hooks/useColorMode";
const C = { class: "flex flex-col gap-2" }, z = /* @__PURE__ */ x({
__name: "SettingsAppearance",
setup(h) {
const { colorMode: r, setColorMode: n } = v(), a = g({
base: "w-full shadow-none text-c-1 justify-start pl-2 gap-2 border",
variants: {
active: {
true: "bg-primary text-c-1 hover:bg-inherit",
false: "bg-b-1 hover:bg-b-2"
}
}
});
return (w, t) => (o(), y("div", C, [
l(e(m), {
class: s(e(p)(e(a)({ active: e(r) === "system" }))),
onClick: t[0] || (t[0] = (b) => e(n)("system"))
}, {
default: c(() => [
i("div", {
class: s(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", {
"bg-c-accent text-b-1 border-transparent": e(r) === "system"
}])
}, [
e(r) === "system" ? (o(), u(e(k), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : f("", !0)
], 2),
t[3] || (t[3] = d(" System Preference (default) ", -1))
]),
_: 1
}, 8, ["class"]),
l(e(m), {
class: s(e(p)(e(a)({ active: e(r) === "light" }))),
onClick: t[1] || (t[1] = (b) => e(n)("light"))
}, {
default: c(() => [
i("div", {
class: s(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", {
"bg-c-accent text-b-1 border-transparent": e(r) === "light"
}])
}, [
e(r) === "light" ? (o(), u(e(k), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : f("", !0)
], 2),
t[4] || (t[4] = d(" Light Mode Always ", -1))
]),
_: 1
}, 8, ["class"]),
l(e(m), {
class: s(e(p)(e(a)({ active: e(r) === "dark" }))),
onClick: t[2] || (t[2] = (b) => e(n)("dark"))
}, {
default: c(() => [
i("div", {
class: s(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", {
"bg-c-accent text-b-1 border-transparent": e(r) === "dark"
}])
}, [
e(r) === "dark" ? (o(), u(e(k), {
key: 0,
icon: "Checkmark",
size: "xs",
thickness: "3.5"
})) : f("", !0)
], 2),
t[5] || (t[5] = d(" Dark Mode Always ", -1))
]),
_: 1
}, 8, ["class"])
]));
}
});
export {
z as default
};