这是我参与更文挑战的第26天,活动详情查看: 更文挑战
当我们开始调整主题时,发现最大的问题来自,FullCalendar 和 Naive UI 拥有两套不同风格的样式,至少颜色上面有所区别,看下面这个截图:
其中我们发现一个特别显眼的地方就是:Event 事件的显示颜色和界面显得不搭。而且如果改变主题,显示的颜色基本不会跟着改变:
这就需要我们自己寻找 FullCalendar 有没有可以配置的地方,能让我们使用 Naive UI 的样式。
这里,我可不想自己再写 css 样式,因为自己写的容易和 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 相互提供可以协同的参数配置,剩下的就是交给我们自己多花时间好好调整,让界面更加好看和一致。
由于时间关系,我没在改变主题时,触发颜色变化的代码的完善,明天继续!
代码已同步到 github 上了:https://github.com/fanly/fanlymenu
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 叶梅树 原文链接:https://juejin.im/post/6978129692528214024