I am a beginner with Naive and I want to change the primary color of my app theme to orange. Initially, I used vuestic for this purpose but now I am struggling to implement it. Below is my main.ts file where I had the vuestic override (commented out). Can anyone guide me on how to use themeOverride? Thanks in advance!
import { createApp } from "vue";
import App from "./app/App.vue";
import router from "./router";
import { store, key } from "./store";
import { use } from "echarts/core";
import ECharts from "vue-echarts";
// Importing ECharts modules manually to reduce bundle size
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, LineChart, GaugeChart } from "echarts/charts";
import {
GridComponent,
TooltipComponent,
TitleComponent,
MarkLineComponent,
ToolboxComponent,
BrushComponent,
} from "echarts/components";
import "vuestic-ui/dist/vuestic-ui.css";
import naive from "naive-ui";
import { NConfigProvider, GlobalThemeOverrides } from 'naive-ui'
use([
CanvasRenderer,
BarChart,
LineChart,
GaugeChart,
BrushComponent,
MarkLineComponent,
GridComponent,
TooltipComponent,
TitleComponent,
ToolboxComponent,
]);
const themeOverride: GlobalThemeOverrides = {
common: {
primaryColor: "ff6700"
}
}
createApp(App)
.use(store, key)
.use(router)
// .use(VuesticPlugin, {
// colors: {
// primary: "#ff6700",
// },
// })
.use(naive)
.component("v-chart", ECharts)
.mount("#AppMount");