Electron+Vue3 MAC 版日历开发记录(26)——FullCalendar Event 配色

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

当我们开始调整主题时，发现最大的问题来自，FullCalendar 和 Naive UI 拥有两套不同风格的样式，至少颜色上面有所区别，看下面这个截图：

其中我们发现一个特别显眼的地方就是：Event 事件的显示颜色和界面显得不搭。而且如果改变主题，显示的颜色基本不会跟着改变：

这就需要我们自己寻找 FullCalendar 有没有可以配置的地方，能让我们使用 Naive UI 的样式。

FullCalendar 配置

具体我们查看 FullCalendar 官网，看看有哪些可以配置的：

原来在 FullCalendar 官网文档 中已提供了有关 Event 显示的配色可自定义：

如：eventTextColor, Sets the text color for all events on the calendar.

所以我们可以开始配置这些参数，让整个效果看起来和 Naive UI 比较协同。

Naive UI 配置

有了 Event 可自定义显示，那我们也需要找到 Naive UI 的主题配置参数：

好在于 Naive UI 提供了 useThemeVars，它包含了常见的主题变量：

{
  "name": "common",
  "fontFamily": "v-sans, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
  "fontFamilyMono": "v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace",
  "fontWeight": "400",
  "fontWeightStrong": "500",
  "cubicBezierEaseInOut": "cubic-bezier(.4, 0, .2, 1)",
  "cubicBezierEaseOut": "cubic-bezier(0, 0, .2, 1)",
  "cubicBezierEaseIn": "cubic-bezier(.4, 0, 1, 1)",
  "borderRadius": "3px",
  "borderRadiusSmall": "2px",
  "fontSize": "14px",
  "fontSizeTiny": "12px",
  "fontSizeSmall": "14px",
  "fontSizeMedium": "14px",
  "fontSizeLarge": "15px",
  "fontSizeHuge": "16px",
  "lineHeight": "1.6",
  "heightTiny": "22px",
  "heightSmall": "28px",
  "heightMedium": "34px",
  "heightLarge": "40px",
  "heightHuge": "46px",
  "transformDebounceScale": "scale(1)",
  "baseColor": "#FFF",
  "primaryColor": "#18a058",
  "primaryColorHover": "#36ad6a",
  "primaryColorPressed": "#0c7a43",
  "primaryColorSuppl": "#36ad6a",
  "infoColor": "#2080f0",
  "infoColorHover": "#4098fc",
  "infoColorPressed": "#1060c9",
  "infoColorSuppl": "#4098fc",
  "successColor": "#18a058",
  "successColorHover": "#36ad6a",
  "successColorPressed": "#0c7a43",
  "successColorSuppl": "#36ad6a",
  "warningColor": "#f0a020",
  "warningColorHover": "#fcb040",
  "warningColorPressed": "#c97c10",
  "warningColorSuppl": "#fcb040",
  "errorColor": "#d03050",
  "errorColorHover": "#de576d",
  "errorColorPressed": "#ab1f3f",
  "errorColorSuppl": "#de576d",
  "textColorBase": "#000",
  "textColor1": "rgb(31, 34, 37)",
  "textColor2": "rgb(51, 54, 57)",
  "textColor3": "rgb(158, 164, 170)",
  "textColorDisabled": "rgba(194, 194, 194, 1)",
  "placeholderColor": "rgba(194, 194, 194, 1)",
  "placeholderColorDisabled": "rgba(209, 209, 209, 1)",
  "iconColor": "rgba(194, 194, 194, 1)",
  "iconColorHover": "rgba(146, 146, 146, 1)",
  "iconColorPressed": "rgba(175, 175, 175, 1)",
  "iconColorDisabled": "rgba(209, 209, 209, 1)",
  "opacity1": "0.82",
  "opacity2": "0.72",
  "opacity3": "0.38",
  "opacity4": "0.24",
  "opacity5": "0.18",
  "dividerColor": "rgb(239, 239, 245)",
  "borderColor": "rgb(224, 224, 230)",
  "closeColor": "rgba(122, 122, 122, 1)",
  "closeColorHover": "rgba(89, 89, 89, 1)",
  "closeColorPressed": "rgba(149, 149, 149, 1)",
  "closeColorDisabled": "rgba(194, 194, 194, 1)",
  "clearColor": "rgba(194, 194, 194, 1)",
  "clearColorHover": "rgba(146, 146, 146, 1)",
  "clearColorPressed": "rgba(175, 175, 175, 1)",
  "scrollbarColor": "rgba(0, 0, 0, 0.25)",
  "scrollbarColorHover": "rgba(0, 0, 0, 0.4)",
  "progressRailColor": "rgba(235, 235, 235, 1)",
  "railColor": "rgb(219, 219, 223)",
  "popoverColor": "#fff",
  "tableColor": "#fff",
  "cardColor": "#fff",
  "modalColor": "#fff",
  "bodyColor": "#fff",
  "tagColor": "rgb(250, 250, 252)",
  "avatarColor": "rgba(204, 204, 204, 1)",
  "invertedColor": "rgb(0, 20, 40)",
  "inputColor": "rgba(255, 255, 255, 1)",
  "codeColor": "rgb(244, 244, 248)",
  "tabColor": "rgb(250, 250, 252)",
  "actionColor": "rgb(250, 250, 252)",
  "tableHeaderColor": "rgb(250, 250, 252)",
  "hoverColor": "rgb(243, 243, 245)",
  "tableColorHover": "rgba(0, 0, 100, 0.02)",
  "pressedColor": "rgb(237, 237, 239)",
  "opacityDisabled": "0.5",
  "inputColorDisabled": "rgb(250, 250, 252)",
  "boxShadow1": "0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)",
  "boxShadow2": "0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)",
  "boxShadow3": "0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)"
}

下面我根据这些参数，随便设置看看效果：

// FullcalendarSub.vue
import { useThemeVars } from 'naive-ui';

...

calendarOptions: {
  ...
  eventColor: this.themeVars.primaryColor,

具体看显示效果：

小结

有了 FullCalendar 和 Naive UI 相互提供可以协同的参数配置，剩下的就是交给我们自己多花时间好好调整，让界面更加好看和一致。

由于时间关系，我没在改变主题时，触发颜色变化的代码的完善，明天继续！