Quick custom theming 🎨
You can now quickly setup custom themes by leveraging the getVueDataUiConfig and mergeConfigs utilities:
import { getVueDataUiConfig, mergeConfigs } from "vue-data-ui";
// Get the default config and set color options
const customTheme = getVueDataUiConfig("vue_ui_xy", {
colorBackground: "#1A1A1A",
colorTextPrimary: "#CD9077",
colorTextSecondary: "#825848",
colorGrid: "#CD9077",
colorBorder: "#CD9077",
});
const config = computed(() => {
// Use the `mergeConfigs` utility to set additional configurations while preserving your theme
return mergeConfigs({
defaultConfig: customTheme,
userConfig: {
chart: {
title: {
text: "Title",
subtitle: {
text: "Subtitle",
},
},
},
},
});
});🍿 Check out how it's done and what it looks like on this page