Allow Beaver Builder to Inherit Colors from Kadence Theme

bb-kadence-styles.css

/*
* Add these to a stylesheet to allow Beaver Builder Modules to inherit colors
* from Kadence Theme's global color palette
*/

/* Let's start with Buttons */
.fl-builder-content a.fl-button *,
.fl-builder-content a.fl-button:visited * {
    color:unset;
}

.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button:visited {
    background-color:var(--global-palette-btn-bg);
    color:var(--global-palette-btn);
}

/* Add a .primary-button utility class */
.primary-button-light a:hover,
.primary-button-light a:active,
.fl-builder-content a.fl-button:hover,
.fl-builder-content a.fl-button:active {
    background-color:var(--global-palette2);
    color:var(--global-palette-btn-hover);
}

/* Add a .transparent-button-light class */
.fl-builder-content .transparent-button-light a.fl-button,
.fl-builder-content .transparent-button-light a.fl-button:visited {
    background-color:transparent;
    border:2px solid var(--global-palette-btn-bg);
    color:var(--global-palette-btn-bg);
}

.transparent-button-light span {
    color:var(--global-palette-btn-bg);
}

.fl-builder-content .transparent-button-light a.fl-button:hover {
    background-color:var(--global-palette2);
    background-color:var(--global-palette-btn-bg-hover);
    border-color:var(--global-palette2);
    border-color:var(--global-palette-btn-bg-hover);
    color:#ffffff;
    color:var(--global-palette9);
    color:var(--global-palette-btn-hover);
}

.transparent-button-light a:hover span {
    color:var(--global-palette-btn-hover);
}

/* Add a .button-link-light class for a button that looks like a normal link (text with no background) */
.button-link-light a.fl-button {
    background-color:transparent;
    border:none;
    color:var(--global-palette-btn-bg);
}

.button-link-light a.fl-button:hover {
    background-color:transparent;
    border:none;
    color:var(--global-palette-btn-bg-hover);
}

.button-link-light span,
.button-link-light i.fl-button-icon-after {
    color:var(--global-palette1);
}

.button-link-light span:hover,
.button-link-light .fl-button-icon-after i:hover {
    color:var(--global-palette2);
}

/* Add a .button-group-light class for button groups */
.button-group-light a,
.button-group-light a:visited {
    background:var(--global-palette-btn-bg);
}

.button-group-light a.fl-button:hover {
    background:var(--global-palette-btn-bg-hover);
}

/* Add a .button-group-dark class for button groups over dark backgrounds */
.button-group-dark a.fl-button,
.button-group-dark a.fl-button:visited {
    background:var(--global-palette-btn-bg);
}

.button-group-dark a.fl-button:hover {
    background:var(--global-palette-btn-bg-hover);
}

/* Accordions */
.fl-builder-content .fl-accordion-button {
    background-color:var(--global-palette8);
}

.fl-builder-content .fl-accordion .fl-accordion-content {
    background-color:var(--global-palette8);
}

/* Add an .accordion-dark class for accordions over dark backgrounds */
.fl-builder-content .accordion-dark .fl-accordion-button {
    background-color:var(--global-palette4);
}

.fl-builder-content .accordion-dark .fl-accordion .fl-accordion-content {
    background-color:var(--global-palette4);
}

/* PowerPack DotNav */
.brand-page-dotnav .pp-dotnav .pp-dot a:hover .pp-dot-circle {
    background-color: var(--global-palette1);
}

/* BB Tabs */
a.fl-tab-active {
    color:var(--global-palette1);
}

.fl-tabs-panels,
.fl-tabs-label.fl-tab-active {
    background-color:var(--global-palette8);
}

/* Class for Tabs on Dark Background */
.fl-builder-content .tabs-dark .fl-tabs-panels,
.fl-builder-content .tabs-dark .fl-tabs-label.fl-tab-active {
    background-color:var(--global-palette4);
}

/* Class for rows with Lighter Background */
.lighter-bg > .fl-row-content-wrap {
    background-color:var(--global-palette8);
}

/* Class for rows with Subtle Background */
.subtle-bg > .fl-row-content-wrap {
    background-color:var(--global-palette7);
}

/* Class for Text that uses Primary Brand Color */
.fl-builder-content .primary-brand-text :not(input):not(textarea):not(select):not(a):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fl-menu-mobile-toggle) span.fl-heading-text {
    color: var(--global-palette1);
}

/* Class that highlights the text with the Primary Brand Color as the Background */
.fl-builder-content .highlight-text :not(input):not(textarea):not(select):not(a):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fl-menu-mobile-toggle) span.fl-heading-text {
    background: var(--global-palette1);
    padding:4px;
}

Is this snippet still working with the latest versions of Kadence and Beaver Builder?

Is this snippet still working with the latest versions of Kadence and Beaver Builder?

As far as I know. I haven't tested it specifically, but I use it often and haven't seen any issues with it. This is only the CSS, so you'll need to implement it somehow. I have it in a custom plugin.