To override the primary colour setting on individual forms, you can place the following custom <style> code on your form’s Advanced Tab in the Code head block:
<style>
/* Change --primary-color to customize the base colour for links and buttons, etc */
/* Change --primary-contrast-color to black if your primary colour is very light, so you can read the text on buttons */
:root {
--primary-color: black;
--primary-contrast-color: white;
/* Leave everything below this line as is */
--link-hover-color: color-mix(in srgb, var(--primary-color) 80%, white 20%);
--btn-hover-bg-color: color-mix(in srgb, var(--primary-color) 85%, white 15%);
--btn-hover-border-color: color-mix(in srgb, var(--primary-color) 90%, white 10%);
--btn-focus-bg-color: color-mix(in srgb, var(--primary-color) 85%, white 15%);
--btn-focus-border-color: color-mix(in srgb, var(--primary-color) 90%, white 10%);
--btn-active-bg-color: color-mix(in srgb, var(--primary-color) 80%, white 20%);
--btn-active-border-color: color-mix(in srgb, var(--primary-color) 90%, white 10%);
--input-focus-border-color: color-mix(in srgb, var(--primary-color) 50%, white 50%);
--primary-rgba-25: color-mix(in srgb, var(--primary-color) 25%, transparent 75%);
--btn-focus-rgba-50: color-mix(in srgb, var(--btn-focus-bg-color) 50%, transparent 50%);
}
/* Fallback for browsers that don't support color-mix() (mainly Safari < 16.4) */
@supports not (color: color-mix(in srgb, red, blue)) {
:root {
--link-hover-color: hsl(from var(--primary-color) h s calc(max(l + 20, 20)));
--btn-hover-bg-color: hsl(from var(--primary-color) h s calc(max(l + 15, 15)));
--btn-hover-border-color: hsl(from var(--primary-color) h s calc(max(l + 10, 10)));
--btn-focus-bg-color: hsl(from var(--primary-color) h s calc(max(l + 15, 15)));
--btn-focus-border-color: hsl(from var(--primary-color) h s calc(max(l + 10, 10)));
--btn-active-bg-color: hsl(from var(--primary-color) h s calc(max(l + 20, 20)));
--btn-active-border-color: hsl(from var(--primary-color) h s calc(max(l + 10, 10)));
--input-focus-border-color: hsl(from var(--primary-color) h calc(s * 0.6) calc(max(l + 30, 50)));
--primary-rgba-25: hsl(from var(--primary-color) h s l / 0.25);
--btn-focus-rgba-50: hsl(from var(--primary-color) h s calc(max(l + 15, 15)) / 0.5);
}
}
/* Ultra-fallback for browsers without relative color syntax (IE, very old browsers) */
@supports not (color: hsl(from red h s l)) {
:root {
--link-hover-color: var(--primary-color);
--btn-hover-bg-color: var(--primary-color);
--btn-hover-border-color: var(--primary-color);
--btn-focus-bg-color: var(--primary-color);
--btn-focus-border-color: var(--primary-color);
--btn-active-bg-color: var(--primary-color);
--btn-active-border-color: var(--primary-color);
--input-focus-border-color: var(--primary-color);
--primary-rgba-25: var(--primary-color);
--btn-focus-rgba-50: var(--primary-color);
}
/* Apply brightness filters to simulate lightening for ultra-old browsers */
a:hover { filter: brightness(1.2); }
.btn-primary:hover { filter: brightness(1.15); }
.btn-primary:focus { filter: brightness(1.15); }
.btn-primary:active { filter: brightness(1.2); }
.btn-outline-primary:hover { filter: brightness(1.15); }
.btn-outline-primary:active { filter: brightness(1.2); }
.form-control:focus { filter: brightness(1.5); }
.form-check-input:focus { filter: brightness(1.5); }
.form-select:focus { filter: brightness(1.5); }
}
a {
color: var(--primary-color);
}
a:hover {
color: var(--link-hover-color);
}
.text-primary {
color: var(--primary-color) !important;
}
.bg-primary {
background-color: var(--primary-color) !important;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.btn-primary:hover {
background-color: var(--btn-hover-bg-color);
border-color: var(--btn-hover-border-color);
}
.btn-primary:focus {
background-color: var(--btn-focus-bg-color);
border-color: var(--btn-focus-border-color);
box-shadow: 0 0 0 .25rem var(--btn-focus-rgba-50);
}
.btn-primary:active {
background-color: var(--btn-active-bg-color);
border-color: var(--btn-active-border-color);
}
.btn-primary:active:focus {
box-shadow: 0 0 0 .25rem var(--btn-focus-rgba-50);
}
.btn-primary:disabled {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-outline-primary {
border-color: var(--primary-color);
color: var(--primary-color);
}
.btn-outline-primary:hover {
background-color: var(--btn-hover-bg-color);
border-color: var(--btn-hover-border-color);
color: var(--primary-contrast-color);
}
.btn-outline-primary:focus {
box-shadow: 0 0 0 .25rem var(--btn-focus-rgba-50);
}
.btn-outline-primary:active {
background-color: var(--btn-active-bg-color);
border-color: var(--btn-active-border-color);
color: var(--primary-contrast-color);
}
.btn-outline-primary:active:focus {
box-shadow: 0 0 0 .25rem var(--btn-focus-rgba-50);
}
.btn-outline-primary:disabled {
background-color: transparent;
color: var(--primary-color);
}
.btn-check:focus + .btn-primary-activated,
.btn-primary-activated:focus {
box-shadow: 0 0 0 .25rem var(--btn-focus-rgba-50);
}
.btn-check:checked + .btn-primary-activated,
.btn-check:active + .btn-primary-activated,
.btn-primary-activated:active,
.btn-primary-activated.active {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-check:checked + .btn-primary-activated.active-hover:hover,
.btn-primary-activated.active-hover:active:hover {
background-color: var(--btn-active-bg-color);
border-color: var(--btn-active-border-color);
}
.form-control:focus {
border-color: var(--input-focus-border-color);
box-shadow: 0 0 0 .25rem var(--primary-rgba-25);
}
.form-check-input:focus {
border-color: var(--input-focus-border-color);
box-shadow: 0 0 0 .25rem var(--primary-rgba-25);
}
.form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.form-select:focus {
border-color: var(--input-focus-border-color);
box-shadow: 0 0 0 .25rem var(--primary-rgba-25);
}
/* Ultra-fallback: Use opacity for shadow effects when RGBA isn't available */
@supports not (color: hsl(from red h s l)) {
.btn-primary:focus,
.btn-outline-primary:focus,
.btn-check:focus + .btn-primary-activated,
.btn-primary-activated:focus {
box-shadow: 0 0 0 .25rem var(--primary-color);
box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary-color) 50%, transparent);
}
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
box-shadow: 0 0 0 .25rem var(--primary-color);
box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary-color) 25%, transparent);
}
}
.nav-tabs .nav-link.active {
border-bottom-color: var(--primary-color);
}
</style>