Theme Palette (Default)

You can find all available palette keys here:
{ primaryColor: "#7e3bd0", primaryTextColor: "#ffffff", /** * Body Style Keys */ bodyBackgroundColor: "#f5f7f7", bodyGridColor: "rgba(221, 221, 221, 0.5)", // Sidebar Sticky Panel Style stickyPanelBackgroundColor: "#7e3bd0", stickyPanelBackgroundColorInActive: "#fff", stickyPanelTextColor: "rgba(255, 255, 255, 0.7)", stickyPanelTextColorInHover: "#ffffff", stickyPanelTextColorInActive: "#7e3bd0", stickyPanelDividerColor: "rgba(255, 255, 255, 0.2)", /** * Main Sidebar Style Keys */ sidebarBackgroundColor: "#fff", sidebarBorderColor: "#f5f7f7", sidebarTitleColor: "#1e4148", sidebarTitleBorderColor: "#ebefef", /** * Element Configuration Sidebar Style Keys */ sidebarHeaderBackgroundColor: "#6c2fb9", sidebarHeaderTextColor: "#ffffff", sidebarHeaderTabBackgroundColor: "#7e3bd0", sidebarHeaderTabTextColor: "#ffffff", // Active state Keys sidebarHeaderTabBackgroundColorInActive: "#6c2fb9", sidebarHeaderTabTextColorInActive: "#ffffff", // Toggle Style Keys sidebarHeaderToggleTextColor: "#ebefef", sidebarHeaderToggleTextColorInHover: "#ffffff", // Vertical Toggle Style Keys sidebarVerticalToggleColor: "#C0CACC", sidebarVerticalToggleColorInHover: "#1E4148", // Tabs Style Keys sidebarHeaderTabsBackgroundColor: "#7e3bd0", sidebarHeaderTabsItemTextColor: "#ffffff", sidebarHeaderTabsItemBackgroundColor: "transparent", sidebarHeaderTabsItemTextColorInActive: "#ffffff", sidebarHeaderTabsItemBackgroundColorInActive: "#8e42eb", /** * Sidebar Elements Style */ sidebarElementCardBackgroundColor: "#f1f5f9", sidebarElementCardTextColor: "#305056", sidebarElementCardBorderColor: "#cbd5e1", // HOVER State sidebarElementCardBackgroundColorInHover: "#f1f5f9", sidebarElementCardTextColorInHover: "#305056", sidebarElementCardBorderColorInHover: "#e2e8f0", /** * Layout Column Style Keys */ columnsBackgroundColor: "#cbd5e1", columnsTextColorInHover: "#ffffff", columnsBackgroundColorInHover: "#7e3bd0", columnsBackgroundColorInActive: "#7e3bd0", columnsBackgroundColorInInactive: "#cbd5e1", /** * Input Style Keys */ inputLabelColor: "#64748b", inputBackgroundColor: "#f1f5f9", inputTextColor: "#4b686d", inputBorderColor: "#f1f5f9", inputBackgroundColorInHover: "#f1f5f9", inputTextColorInHover: "#4b686d", inputBorderColorInHover: "", inputBackgroundColorInDisabled: "#f1f5f9", inputTextColorInDisabled: "#4b686d", inputBorderColorInDisabled: "#f1f5f9", inputPlaceholderColor: "#94a3b8", inputInvalidColor: "#ef4444", inputDividerColor: "#d7dddf", inputWheelerColor: "#ccd5df", // Clear Button Style Keys inputClearButtonTextColor: "#95A6A8", inputClearButtonTextColorInHover: "#1E4148", // Control Button Style Keys inputControlButtonTextColor: "#4B686D", inputControlButtonBackgroundColor: "#ffffff", inputControlButtonTextColorInHover: "#1E4148", inputControlButtonBackgroundColorInHover: "#DEE4E4", inputControlButtonDividerColor: "#EBEFEF", // Range Input Color rangeInputColor: "rgba(30,41,59,.1)", // Color Input Style Keys colorPickerBackgroundColor: "#ffffff", colorPalettesBorderColor: "#C0CACC", // Checkbox Input Style Keys checkboxBorderColor: "#dee4e4", checkboxBackgroundColor: "transparent", checkboxTextColor: "#1e4148", checkboxBorderColorInHover: "#dee4e4", checkboxBackgroundColorInHover: "transparent", checkboxTextColorInHover: "#1e4148", checkboxBorderColorInActive: "#7e3bd0", checkboxBackgroundColorInActive: "transparent", checkboxTextColorInActive: "#7e3bd0", // Grid Input Style Keys gridInputInHover: "#7e3bd0", gridInputInActive: "#7e3bd0", /** * Drag Style Keys */ dragHandlerColor: "#022A31", /** * Device Style Keys */ deviceControlGroupBackgroundColor: "#ffffff", deviceControlTextColor: "#1E4148", deviceControlTextColorInHover: "#34d399", deviceControlTextColorInActive: "#34d399", // With Input inputDeviceControlTextColor: "#3C5B60", inputDeviceControlTextColorInHover: "#34d399", inputDeviceControlTextColorInActive: "#34d399", /** * Tabs Style Keys */ // Bottom border Line Tab Style Keys bottomLineTabsBackgroundColor: "#ffffff", bottomLineTabsItemTextColor: "#1E4148", bottomLineTabsItemBorderColor: "#f5f7f7", bottomLineTabsItemBorderColorInActive: "#7e3bd0", // Button Group Tab Style Keys buttonGroupTabsItemTextColor: "#B1BDBF", buttonGroupTabsItemBackgroundColor: "#f1f5f9", buttonGroupTabsItemTextColorInActive: "#7e3bd0", // Radio Button Group Tab Style Keys radioButtonGroupTabsItemTextColor: "#B1BDBF", radioButtonGroupTabsItemBackgroundColor: "#f1f5f9", radioButtonGroupTabsCircleColor: "#DEE4E4", radioButtonGroupTabsItemTextColorInActive: "#7e3bd0", radioButtonGroupTabsCircleColorInActive: "#7e3bd0", // Base Tabs Style Keys tabsBackgroundColor: "#f1f5f9", tabsItemTextColor: "#B1BDBF", tabsItemBorderColor: "#ffffff", tabsItemTextColorInActive: "#7e3bd0", tabsItemBackgroundColorInActive: "#e2e8f0", // Input Tabs Style Keys inputTabsBackgroundColor: "#f1f5f9", inputTabsItemTextColor: "#B1BDBF", inputTabsItemBackgroundColor: "transparent", inputTabsItemTextColorInActive: "#7e3bd0", inputTabsItemBackgroundColorInActive: "#e2e8f0", /** * Compatibility Alert Style Keys */ compatibilityAlertBackgroundColor: "transparent", compatibilityAlertBorderColor: "#e2e8f0", compatibilityAlertIconColor: "#f87171", compatibilityAlertTitleColor: "#292524", compatibilityAlertTextColor: "#292524", /** * Empty Message Style Keys */ emptyMessageTextColor: "rgb(220, 230, 241)", emptyMessageIconColor: "rgb(149, 166, 168, 0.6)", /** * Message Box Style Keys */ messageBoxBackgroundColor: "rgba(245, 245, 245, 0.85)", messageBoxTextColor: "#000", /** * Accordion Style Keys */ accordionBackgroundColor: "#f1f5f9", accordionTextColor: "#1E4148", accordionBackgroundColorInHover: "#e2e8f0", accordionTextColorInHover: "#1E4148", // Bottom Line Accordion Style Keys lineAccordionBorderColor: "#F5F7F7", lineAccordionTextColor: "#a3b0c2", lineAccordionTextColorInHover: "#a3b0c2", lineAccordionTextColorInActive: "#7e3bd0", /** * Columns Style Keys */ columnPropertyBorderColor: "#F5F7F7", columnPropertyBorderColorInActive: "#7e3bd0", /** * Vertical, Horizontal Alignment Property Style Keys */ alignmentTextColor: "#becbcc", alignmentTextColorInHover: "#95A6A8", alignmentTextColorInActive: "#7e3bd0", /** * Lock Property Style Keys */ lockPropertyTextColor: "#1E4148", lockPropertyTextColorInHover: "#1E4148", lockPropertyTextColorInActive: "#7e3bd0", // Small Size Lock smallLockPropertyTextColor: "#95A6A8", smallLockPropertyTextColorInHover: "#95A6A8", smallLockPropertyTextColorInActive: "#7e3bd0", // Button Type Lock buttonLockPropertyBackgroundColor: "#f1f5f9", buttonLockPropertyTextColor: "#95A6A8", buttonLockPropertyBackgroundColorInHover: "#f1f5f9", buttonLockPropertyTextColorInHover: "#95A6A8", buttonLockPropertyBackgroundColorInActive: "transparent", buttonLockPropertyTextColorInActive: "#95A6A8", /** * Quick Preview Style Keys */ quickPreviewLayer1BackgroundColor: "#f1f5f9", quickPreviewLayer2BackgroundColor: "#ffffff", quickPreviewLayer3BackgroundColor: "#e5f4ff", quickPreviewLayer4BackgroundColor: "#ffffff", quickPreviewBorderColor: "#1E4148", quickPreviewTextColor: "#1E4148", /** * Buttons Style Keys */ // Add Button Style Keys addButtonTextColor: "#768C90", addButtonIconBackgroundColor: "#94a3b8", addButtonIconTextColor: "#ffffff", addButtonTextColorInHover: "#768C90", addButtonIconBackgroundColorInHover: "#7e3bd0", addButtonIconTextColorInHover: "#ffffff", // Icon Button Style Keys iconButtonTextColor: "#95A6A8", iconButtonTextColorInHover: "#1E4148", iconButtonTextColorInActive: "#7e3bd0", // Primary Button Style Keys primaryButtonTextColor: "#ffffff", primaryButtonBackgroundColor: "#7e3bd0", primaryButtonTextColorInHover: "#ffffff", primaryButtonBackgroundColorInHover: "#6c2fb9", // Secondary Button Style Keys secondaryButtonTextColor: "#1E4148", secondaryButtonBackgroundColor: "#ffffff", secondaryButtonBorderColor: "#EBEFEF", secondaryButtonTextColorInHover: "#1E4148", secondaryButtonBackgroundColorInHover: "#F5F7F7", secondaryButtonBorderColorInHover: "#EBEFEF", /** * Top Customize Bar Style Keys */ topToolbarBackgroundColor: "#ffffff", topToolbarButtonDividerColor: "#EBEFEF", // Button Style Keys topToolbarButtonBackgroundColor: "transparent", topToolbarButtonTextColor: "#1E4148", topToolbarButtonBackgroundColorInHover: "#f1f5f9", topToolbarButtonTextColorInHover: "#1E4148", topToolbarButtonBackgroundColorInActive: "#f1f5f9", topToolbarButtonTextColorInActive: "#1E4148", // Outline Button Style Keys topToolbarOutlineButtonBackgroundColor: "transparent", topToolbarOutlineButtonBorderColor: "#f1f5f9", topToolbarOutlineButtonTextColor: "#1E4148", topToolbarOutlineButtonBackgroundColorInHover: "#f1f5f9", topToolbarOutlineButtonBorderColorInHover: "#f1f5f9", topToolbarOutlineButtonTextColorInHover: "#1E4148", topToolbarOutlineButtonBackgroundColorInActive: "#f1f5f9", topToolbarOutlineButtonBorderColorInActive: "#f1f5f9", topToolbarOutlineButtonTextColorInActive: "#1E4148", /** * Dropdown Menu Style Keys */ dropdownMenuBackgroundColor: "#ffffff", dropdownMenuBorderColor: "#DEE4E4", dropdownMenuGroupTitleColor: "#B1BDBF", dropdownMenuLinkBackgroundColor: "transparent", dropdownMenuLinkIconColor: "#7e3bd0", dropdownMenuLinkTextColor: "#1E4148", dropdownMenuLinkBackgroundColorInHover: "#F5F7F7", dropdownMenuLinkIconColorInHover: "#7e3bd0", dropdownMenuLinkTextColorInHover: "#7e3bd0", dropdownMenuLinkBackgroundColorInActive: "transparent", dropdownMenuLinkIconColorInActive: "#7e3bd0", dropdownMenuLinkTextColorInActive: "#7e3bd0", dropdownMenuLinkCheckColor: "#34d399", dropdownMenuDividerColor: "#EBEFEF", /** * Modal Style Keys */ modalBodyBackgroundColor: "#ffffff", modalBackdropColor: "rgba(28,38,55,0.5)", modalDividerColor: "#EBEFEF", modalTitleColor: "#1E4148", modalTextColor: "#1E4148", // Toggle Style Keys modalToggleBackgroundColor: "rgba(239,68,68,0.25)", modalToggleBorderColor: "rgba(239,68,68,0.25)", modalToggleTextColor: "#dc2626", modalToggleBackgroundColorInHover: "rgba(239,68,68,0.25)", modalToggleBorderColorInHover: "rgba(239,68,68,0.25)", modalToggleTextColorInHover: "#dc2626", /** * Tooltip Style Keys */ tooltipBackgroundColor: "rgba(51, 65, 85, 0.95)", tooltipTextColor: "#ffffff", /** * Uploader Style Keys */ uploaderBackgroundColor: "transparent", uploaderBorderColor: "#f7f7ff", uploaderTitleColor: "#4b556a", uploaderTextColor: "#929498", uploaderBackgroundColorInHover: "transparent", uploaderBorderColorInHover: "#f7f7ff", uploaderTitleColorInHover: "#4b556a", uploaderTextColorInHover: "#929498", uploaderDragIndicatorBackgroundColor: "#eceef3", uploaderDragIndicatorTextColor: "#7a7b7d", /** * Layout Tree Style Keys */ layoutTreeBackgroundColor: "#ffffff", layoutTreeItemBackgroundColor: "#F5F7F7", layoutTreeItemTextColor: "#1E4148", layoutTreeItemArrowColor: "#F5F7F7", layoutTreeItemBackgroundColorInHover: "#F5F7F7", layoutTreeItemBackgroundColorInActive: "#7e3bd0", }

Explore Our Email Builder