@inkline/inkline
Version:
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.
54 lines (53 loc) • 1.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.onChangeColorMode = exports.colorModeLocalStorageKey = exports.ColorModePlugin = void 0;
var _vue = require("vue");
var _utils = require("@grozav/utils");
const onChangeColorMode = colorMode => {
let color;
if (colorMode === "system") {
color = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
} else {
color = colorMode;
}
(0, _utils.removeClass)(document.documentElement, "light-theme dark-theme");
(0, _utils.addClass)(document.documentElement, `${color}-theme`);
};
exports.onChangeColorMode = onChangeColorMode;
const colorModeLocalStorageKey = exports.colorModeLocalStorageKey = "inkline-color-mode";
const ColorModePlugin = exports.ColorModePlugin = {
install: (app, {
inkline,
renderMode
}) => {
if (typeof window !== "undefined") {
const onDarkModeMediaQueryChange = () => {
if (inkline.options.colorMode === "system") {
onChangeColorMode(inkline.options.colorMode);
}
};
const darkModeMediaQuery = matchMedia("(prefers-color-scheme: dark)");
if (darkModeMediaQuery.addEventListener) {
darkModeMediaQuery.addEventListener("change", onDarkModeMediaQueryChange);
} else {
darkModeMediaQuery.addListener(onDarkModeMediaQueryChange);
}
(0, _vue.watch)(() => inkline.options.colorMode, colorMode => {
onChangeColorMode(colorMode);
if (inkline.options.colorModeStrategy === "localStorage") {
localStorage.setItem(colorModeLocalStorageKey, colorMode);
}
});
if (inkline.options.colorModeStrategy === "localStorage" && renderMode === "client") {
const storedColorMode = localStorage.getItem(colorModeLocalStorageKey);
if (storedColorMode) {
inkline.options.colorMode = storedColorMode;
}
} else {
onChangeColorMode(inkline.options.colorMode);
}
}
}
};