Edit Colors
Is it possible to edit the colors my brand colors? I imagine i may be able to do this with css but wondering if there are any settings.
Currently no, but I bet this will be on the roadmap soon 🤞
Hope this will be possible for the emailnotifications too
When this will be added, please allow css variables. So I can use ACSS.
Wilco W, Agree, I believe it is possible. I am testing now, check out what i posted below. I havent tested it yet though.
Ok update on this, if you are using css vars, I believe we can update our global css with teh folloing and just replace the vars at the end of each with our own. See example below, but i am still testing this. I will post a video once i finish to show how i do it.
html body {
// Add the updated vars from your main site here using CSS variables you already have
--fcom-primary-bg: var(--primary);
--fcom-secondary-bg: var(--secondary);
--fcom-active-bg: var(--tertiary);
--fcom-light-bg: var(--light);
--fcom-deep-bg: var(--dark);
--fcom-menu-text: var(--text-body);
--fcom-primary-text: var(--text-title);
--fcom-secondary-text: var(--text-body);
--fcom-text-off: var(--text-muted); // Replace with appropriate variable
--fcom-text-link: var(--link-color); // Replace with your link color if you have one
--fcom-primary-button: var(--button-primary-bg); // Replace with appropriate button color
--fcom-primary-border: var(--primary-border);
--fcom-secondary-border: var(--secondary-border);
--fcom-highlight-bg: var(--highlight);
--fcom-skeleton-bg: var(--skeleton-bg); // For linear gradients, replace this if you have a gradient set
--el-color-primary: var(--primary);
}
.dark body {
// Update dark mode colors by referencing dark equivalents if you have those
--fcom-primary-bg: var(--dark-primary-bg);
--fcom-secondary-bg: var(--dark-secondary-bg);
--fcom-active-bg: var(--dark-active-bg);
--fcom-light-bg: var(--dark-light-bg);
--fcom-deep-bg: var(--light); // For contrast, using light in dark mode
--fcom-menu-text: var(--light);
--fcom-primary-text: var(--light);
--fcom-secondary-text: var(--dark-secondary-text);
--fcom-text-off: var(--dark-muted);
--fcom-text-link: var(--dark-link-color);
--fcom-primary-button: var(--button-light-bg); // Replace if you have a different button style for dark mode
--fcom-primary-border: var(--dark-border);
--fcom-secondary-border: var(--dark-secondary-border);
--fcom-highlight-bg: var(--dark-highlight);
--fcom-skeleton-bg: var(--dark-skeleton-bg);
--el-color-primary: var(--dark-primary-text);
--el-color-white: var(--dark-surface);
}
Nice. Once the video is done Will try if If my AutomaticCSS variables wil work
Wilco W,kk, Im actually struggling to get this to work, It should but Im not sure what i am doing wrong. Shahjahan Jewel