在朴素用户界面和类型记录中更改原色

Question

我刚开始使用朴素，我想要覆盖我的应用程序的主题，使主颜色为橙色。我原来是用vuestic来改变它的，所以我不确定我做错了什么来改变它。这里是我的main.ts文件，我最初使用了vuestic覆盖(注释掉了，以显示它是如何实现的)。我把themeOverride放在哪里？蒂娅！

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

您需要将themeOverrides作为工具发送到您的配置提供程序组件，如下所示：

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

干杯:)