This is the 25th day of my participation in Gwen Challenge

Today, we will talk about the Theme setting. It is impossible for an application not to have several themes to choose from, at least light and Dark to match the day and night Theme of the computer.

Before you say it, add the font you didn’t add before:

import {createApp} from 'vue'; import App from '/@/App.vue'; import router from '/@/router'; import { store, key } from '/@/store'; // import 'vfonts/ firacode.css '// import 'vfonts/ lato.css' const app = createApp(app); app .use(router) .use(store, key); app.mount('#app');Copy the code

Equal width font:

Common fonts:

Personally, I prefer monospaced fonts.

Theme Setting Demo

First, let’s set the DarkTheme theme to see how it looks:

// APP.vue

<template>
  <n-config-provider :theme="darkTheme">
    <router-view />
  </n-config-provider>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import { NConfigProvider, darkTheme } from 'naive-ui'

export default defineComponent({
  name: 'App',
  components: {
    NConfigProvider,
  },
  setup() {
    return {
      darkTheme
    }
  }
});
</script>
Copy the code

Here’s what it looks like:

Next we treat the Theme as a Setting item.

Setting

In General Settings, we added a set of radio button components: NRadioGroup Custom theme:

<n-tab-pane name="normalSetting" TAB =" general Settings "display-directive="show" > <n-space vertical> <n-radio-group v-model:value="themeValue" name="themeGroup" @update-value="updateTheme" > <n-radio-button key="lightTheme" Value ="lightTheme"> </n-radio-button key="darkTheme" value="darkTheme"> </n-radio-button> </n-radio-group>Copy the code

The @update-value event is used to obtain the value of the radio button:

  methods: {
    updateTheme(value: any): void {
      this.store.commit('changeThemeValue', value);
    },
Copy the code

Of course, we still need Vuex to save and pass the Theme value.

theme value store

export const store = createStore<State>({
  state: {
    themeValue: 'lightTheme',
  },
  mutations: {
    changeThemeValue(state, themeValue) {
      state.themeValue = themeValue;
    },
  },
  actions: {
    changeThemeValue({ commit }) {
      commit('changeThemeValue');
    },
  },
  plugins: [dataState],
});
Copy the code

This code is already pretty familiar, so I won’t explain it. Next look at the code we refer to at the main route.

App.vue

<template> <n-config-provider :theme="themeValue"> <router-view /> </n-config-provider> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { NConfigProvider, darkTheme } from 'naive-ui'; import { useStore } from '/@/store'; export default defineComponent({ name: 'App', components: { NConfigProvider, }, setup() { const store = useStore(); return { store, darkTheme }; }, computed: { themeValue(): any { return this.store.state.themeValue == 'darkTheme' ? darkTheme : null; }}}); </script>Copy the code

Here, I’m mainly trying to prevent asynchronous Store problems by using a computed method to obtain the value of themeValue and assign it to the N-config-provider :theme=”themeValue”.

That completes our global theme setup:

LightTheme:

DarkTheme:

summary

As for the next step, we still have a lot to do based on the Theme, such as:

  1. usingGlobalThemeOverridesMake the custom theme styles we need;
  2. Create a component for the theme;
  3. We found that the FullCalendar still kept its previous theme, and we need to look again at how this works together.

To be continued!

The code has been synced to Github: github.com/fanly/fanly…