Electron+Vue3 MAC 版日历开发记录(27)——FullCalendar 主题样式统一

这是我参与更文挑战的第27天，活动详情查看：更文挑战

感谢这 100 位关注这个系列专栏的各位伙伴们，有人关注就意味着我写的还是有那么一丝丝价值。可能随着这个活动的结束，我不会继续这么高频的做记录，但这个项目我肯定还会继续优化和记录下去。

FullCalendar 主题样式统一

继续昨天的代码：

  setup() {
    const themeVars = ref(useThemeVars());
    return {
      themeVars,
    };
  },
  computed: {
    themeValue(): any {
      this.updateColors();
      return this.store.state.themeValue == 'darkTheme' ? darkTheme : null;
    },
  },
  methods: {
    updateColors() {
      this.calendarOptions.eventColor = this.themeVars.primaryColor;
    },

在当我们监听到因为主题的变化，引起 useThemeVars() 里面自定义的颜色等样式的变化，继而给我们的 calendarOptions.eventColor 重新赋值，这样就能保证我们的 eventColor 和 Naive UI 同步了：

有了 FullCalendar 第一个颜色的变化，那我们继续把剩下的做个调整。

看这两个的区别，发现下一个就是背景色的修改了。

使用 NElement 组件

我们利用 Naive UI 提供的 Element 组件：

在之前的代码基础之上，裹一层 NCard 和 NElement：

// FullcalendarSub

<template>
  <n-config-provider :theme="themeValue">
    <n-card>
      <n-el
        style="color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);"
      >
        <full-calendar
          ref="fullcalendar"
          :options="calendarOptions"
          style="color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);"
        >
          <template #eventContent="arg">
            <i>{{ arg.event.title }}</i>
          </template>
        </full-calendar>
      </n-el>
    </n-card>
  </n-config-provider>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { darkTheme, NElement as NEl, useThemeVars, NConfigProvider } from 'naive-ui';

我们极端的将颜色都用：var(--primary-color)，我们切换主题看看效果：

这样基本达到切换主题以后，整体风格统一了。

剩下的就是因为多了一层 NCard，把之前的样式和布局重新调整下，接下来的就是微调了。

小结

到目前为止，基本完成了核心功能的开发，样式主题的设定，自动打包流程的 Github Action 的部署。

接下来就是花大量的时间在各种细节的优化，以及 Logo 的设计，这个应用的 SKetch 设计重构。

未完待续！

代码已同步到 github 上了：github.com/fanly/fanly…