在 Naive-UI 和打字稿中更改原色

Question

我是 Naive 的新手，我想覆盖我的应用程序的主题，使主色为橙色。我最初使用 vuestic 来更改它，所以我不确定我在更改它时做错了什么。这是我的 main.ts 文件，我最初在其中进行了 vuestic 覆盖（注释掉以显示它是如何实现的）。我应该把 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

您需要将 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>

干杯:)

在 Naive-UI 和打字稿中更改原色

Changing primary color in Naive-UI and typescript

themes

colors

typescript

vuestic