Changing primary color in Naive-UI and typescript

Question

I am new to using Naive and I want to override the theme of my app to have the primary color be orange. I was using vuestic to change it originally, so I am unsure on what I am doing wrong to change it. Here is my main.ts file where I originally had the vuestic override (commented out to show how it was implemented). Where do I put themeOverride? TIA!

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";

// import 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");

Answer 1

You need to send the themeOverrides as a prop to your config provider component, like this:

<script lang="ts">
  import { NConfigProvider, GlobalThemeOverrides } from 'naive-ui'

  const themeOverrides: GlobalThemeOverrides = {
    common: {
      primaryColor: '#FF8C00'
    }
  }
</script>

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <my-app />
  </n-config-provider>
</template>

Cheers :)