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

When we started to adjust the theme, we found that the biggest problem is that FullCalendar and Naive UI have two different styles, at least the colors are different. See the screenshot below:

One of the most obvious things we found was that the display color of the Event Event did not match the interface. And if you change the theme, the display color basically doesn’t change:

This requires us to find out if there is a place that can be configured for FullCalendar, so that we can use Naive UI style.

Here, I don’t want to write CSS styles myself, because it doesn’t match Naive UI’s two themes.

FullCalendar configuration

For details, let’s check the official website of FullCalendar to see what can be configured:

Originally, the FullCalendar official website documents have provided the Event display color can be customized:

For example, eventTextColor, Sets the text color for all events on the calendar.

So we can start to configure these parameters to make the whole effect look more compatible with Naive UI.

Naive UI configuration

With Event customizable display, we also need to find Naive UI theme configuration parameters:

The good news is that Naive UI provides useThemeVars, which contain common theme variables:

{ "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(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)" }Copy the code

Here I set the parameters randomly to see the effect:

// FullcalendarSub.vue import { useThemeVars } from 'naive-ui'; . calendarOptions: { ... eventColor: this.themeVars.primaryColor,Copy the code

See the specific display effect:

summary

With FullCalendar and Naive UI providing a synergistic configuration of parameters, what’s left is for us to spend a lot of time adjusting the interface to make it more beautiful and consistent.

Due to time constraints, I have not improved the code triggering color changes when changing the theme, continue tomorrow!

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