Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
changeCss('.app__body .attachment__content, .app__body .attachment-actions button', 'background:' + theme.centerChannelBg);
changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg);
changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg);
changeCss('.app__body .shortcut-key, .app__body .post-list__new-messages-below', 'color:' + theme.centerChannelBg);
changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
changeCss('.app__body .nav-tabs, .app__body .nav-tabs > li.active > a', 'background:' + theme.centerChannelBg);
changeCss('.app__body .post .file-view--single', `background:${theme.centerChannelBg}`);
changeCss('.app__body .modal-tabs .nav-tabs > li', `background:${theme.centerChannelBg}`);
changeCss('.app__body .modal-tabs .nav-tabs > li > a', `background:${theme.centerChannelBg}`);
// Fade out effect for collapsed posts (not hovered, not from current user)
changeCss(
'.app__body .post-list__table .post:not(.current--user) .post-collapse__gradient, ' +
'.app__body .post-list__table .post.post--compact .post-collapse__gradient, ' +
'.app__body .sidebar-right__body .post.post--compact .post-collapse__gradient',
`background:linear-gradient(${changeOpacity(theme.centerChannelBg, 0)}, ${theme.centerChannelBg})`,
);
changeCss(
'.app__body .post-list__table .post-attachment-collapse__gradient, ' +
'.app__body .sidebar-right__body .post-attachment-collapse__gradient',
`background:linear-gradient(${changeOpacity(theme.centerChannelBg, 0)}, ${theme.centerChannelBg})`,
);
changeCss(
'.app__body .post-list__table .post:not(.current--user) .post-collapse__show-more, ' +
'.app__body .post-list__table .post.post--compact .post-collapse__show-more, ' +
'.app__body .sidebar-right__body .post:not(.post--root) .post-collapse__show-more',
`background-color:${theme.centerChannelBg}`,
);
changeCss(
'.app__body .post-list__table .post-attachment-collapse__show-more, ' +
'.app__body .sidebar-right__body .post-attachment-collapse__show-more',
changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.app__body .channel-header__info .status .offline--icon', 'fill:' + theme.centerChannelColor);
changeCss('.app__body .navbar .status .offline--icon', 'fill:' + theme.centerChannelColor);
changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.25));
changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.7));
changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor);
changeCss('.app__body .emoji-picker', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.app__body .emoji-picker__search-icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
changeCss('.app__body .emoji-picker__preview, .app__body .emoji-picker__items, .app__body .emoji-picker__search-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.emoji-picker__category .fa:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
changeCss('.app__body .emoji-picker__category, .app__body .emoji-picker__category:focus, .app__body .emoji-picker__category:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.3));
changeCss('.app__body .emoji-picker__category--selected, .app__body .emoji-picker__category--selected:focus, .app__body .emoji-picker__category--selected:hover', 'color:' + theme.centerChannelColor);
changeCss('.app__body .emoji-picker__item-wrapper:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8));
changeCss('.app__body .emoji-picker-items__container .emoji-picker__item.selected', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.07));
changeCss('.app__body .icon__postcontent_picker:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
changeCss('.app__body .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07));
changeCss('.app__body .emoji-picker .nav-tabs li a', 'fill:' + theme.centerChannelColor);
changeCss('.app__body .post .post-collapse__show-more-button', `border-color:${changeOpacity(theme.centerChannelColor, 0.1)}`);
changeCss('.app__body .post .post-collapse__show-more-line', `background-color:${changeOpacity(theme.centerChannelColor, 0.1)}`);
if (theme.centerChannelBg) {
const ownPostBg = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.05);
const hoveredPostBg = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.08);
const hoveredPostBgLight = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.05);
// Fade out effect for collapsed posts made by the current user
changeCss(
'.app__body .post-list__table .post.current--user:not(.post--compact):not(:hover):not(.post--hovered):not(.post--highlight) .post-collapse__gradient, ' +
'.app__body .sidebar-right__body .post.current--user:not(.post--compact):not(:hover):not(.post--hovered):not(.post--highlight) .post-collapse__gradient, ' +
'.app__body .post--root .post-collapse__gradient',
`background:linear-gradient(${changeOpacity(ownPostBg, 0)}, ${ownPostBg})`,
);
'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
'new-message-separator': theme.newMessageSeparator,
'link-color': theme.linkColor,
'button-bg': theme.buttonBg,
'button-color': theme.buttonColor,
'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
'button-color-90': changeOpacity(theme.buttonColor, 0.9),
'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
'button-color-80': changeOpacity(theme.buttonColor, 0.8),
'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
'button-color-60': changeOpacity(theme.buttonColor, 0.6),
'button-bg-50': changeOpacity(theme.buttonBg, 0.5),
'button-color-50': changeOpacity(theme.buttonColor, 0.5),
'button-bg-40': changeOpacity(theme.buttonBg, 0.4),
'button-color-40': changeOpacity(theme.buttonColor, 0.4),
'button-bg-30': changeOpacity(theme.buttonBg, 0.3),
'button-color-30': changeOpacity(theme.buttonColor, 0.3),
'button-bg-20': changeOpacity(theme.buttonBg, 0.2),
'button-color-20': changeOpacity(theme.buttonColor, 0.2),
'button-bg-15': changeOpacity(theme.buttonBg, 0.15),
'button-color-15': changeOpacity(theme.buttonColor, 0.15),
'button-bg-10': changeOpacity(theme.buttonBg, 0.1),
'button-color-10': changeOpacity(theme.buttonColor, 0.1),
'button-bg-05': changeOpacity(theme.buttonBg, 0.05),
'button-color-05': changeOpacity(theme.buttonColor, 0.05),
'error-text': theme.errorTextColor,
'error-text-08': changeOpacity(theme.errorTextColor, 0.08),
'mention-highlight-bg': theme.mentionHighlightBg,
'mention-highlight-link': theme.mentionHighlightLink,
},
'new-message-separator': theme.newMessageSeparator,
'link-color': theme.linkColor,
'button-bg': theme.buttonBg,
'button-color': theme.buttonColor,
'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
'button-color-90': changeOpacity(theme.buttonColor, 0.9),
'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
'button-color-80': changeOpacity(theme.buttonColor, 0.8),
'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
'button-color-60': changeOpacity(theme.buttonColor, 0.6),
'button-bg-50': changeOpacity(theme.buttonBg, 0.5),
'button-color-50': changeOpacity(theme.buttonColor, 0.5),
'button-bg-40': changeOpacity(theme.buttonBg, 0.4),
'button-color-40': changeOpacity(theme.buttonColor, 0.4),
'button-bg-30': changeOpacity(theme.buttonBg, 0.3),
'button-color-30': changeOpacity(theme.buttonColor, 0.3),
'button-bg-20': changeOpacity(theme.buttonBg, 0.2),
'button-color-20': changeOpacity(theme.buttonColor, 0.2),
'button-bg-15': changeOpacity(theme.buttonBg, 0.15),
'button-color-15': changeOpacity(theme.buttonColor, 0.15),
'button-bg-10': changeOpacity(theme.buttonBg, 0.1),
'button-color-10': changeOpacity(theme.buttonColor, 0.1),
'button-bg-05': changeOpacity(theme.buttonBg, 0.05),
'button-color-05': changeOpacity(theme.buttonColor, 0.05),
'error-text': theme.errorTextColor,
'error-text-08': changeOpacity(theme.errorTextColor, 0.08),
'mention-highlight-bg': theme.mentionHighlightBg,
'mention-highlight-link': theme.mentionHighlightLink,
},
});
}
'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
'new-message-separator': theme.newMessageSeparator,
'link-color': theme.linkColor,
'button-bg': theme.buttonBg,
'button-color': theme.buttonColor,
'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
'button-color-90': changeOpacity(theme.buttonColor, 0.9),
'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
'button-color-80': changeOpacity(theme.buttonColor, 0.8),
'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
'button-color-60': changeOpacity(theme.buttonColor, 0.6),
'button-bg-50': changeOpacity(theme.buttonBg, 0.5),
'button-color-50': changeOpacity(theme.buttonColor, 0.5),
'button-bg-40': changeOpacity(theme.buttonBg, 0.4),
'button-color-40': changeOpacity(theme.buttonColor, 0.4),
'button-bg-30': changeOpacity(theme.buttonBg, 0.3),
'button-color-30': changeOpacity(theme.buttonColor, 0.3),
'button-bg-20': changeOpacity(theme.buttonBg, 0.2),
'button-color-20': changeOpacity(theme.buttonColor, 0.2),
'button-bg-15': changeOpacity(theme.buttonBg, 0.15),
'button-color-15': changeOpacity(theme.buttonColor, 0.15),
'button-bg-10': changeOpacity(theme.buttonBg, 0.1),
'button-color-10': changeOpacity(theme.buttonColor, 0.1),
'button-bg-05': changeOpacity(theme.buttonBg, 0.05),
'button-color-05': changeOpacity(theme.buttonColor, 0.05),
'error-text': theme.errorTextColor,
'error-text-08': changeOpacity(theme.errorTextColor, 0.08),
'mention-highlight-bg': theme.mentionHighlightBg,
'mention-highlight-link': theme.mentionHighlightLink,
},
});
'center-channel-bg': theme.centerChannelBg,
'center-channel-color': theme.centerChannelColor,
'center-channel-bg-90': changeOpacity(theme.centerChannelBg, 0.9),
'center-channel-color-90': changeOpacity(theme.centerChannelColor, 0.9),
'center-channel-bg-80': changeOpacity(theme.centerChannelBg, 0.8),
'center-channel-color-80': changeOpacity(theme.centerChannelColor, 0.8),
'center-channel-bg-60': changeOpacity(theme.centerChannelBg, 0.6),
'center-channel-color-60': changeOpacity(theme.centerChannelColor, 0.6),
'center-channel-bg-50': changeOpacity(theme.centerChannelBg, 0.5),
'center-channel-color-50': changeOpacity(theme.centerChannelColor, 0.5),
'center-channel-bg-40': changeOpacity(theme.centerChannelBg, 0.4),
'center-channel-color-40': changeOpacity(theme.centerChannelColor, 0.4),
'center-channel-bg-30': changeOpacity(theme.centerChannelBg, 0.3),
'center-channel-color-30': changeOpacity(theme.centerChannelColor, 0.3),
'center-channel-bg-20': changeOpacity(theme.centerChannelBg, 0.2),
'center-channel-color-20': changeOpacity(theme.centerChannelColor, 0.2),
'center-channel-bg-15': changeOpacity(theme.centerChannelBg, 0.15),
'center-channel-color-15': changeOpacity(theme.centerChannelColor, 0.15),
'center-channel-bg-10': changeOpacity(theme.centerChannelBg, 0.1),
'center-channel-color-10': changeOpacity(theme.centerChannelColor, 0.1),
'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
'new-message-separator': theme.newMessageSeparator,
'link-color': theme.linkColor,
'button-bg': theme.buttonBg,
'button-color': theme.buttonColor,
'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
'button-color-90': changeOpacity(theme.buttonColor, 0.9),
'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
'button-color-80': changeOpacity(theme.buttonColor, 0.8),
'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
'center-channel-color': theme.centerChannelColor,
'center-channel-bg-90': changeOpacity(theme.centerChannelBg, 0.9),
'center-channel-color-90': changeOpacity(theme.centerChannelColor, 0.9),
'center-channel-bg-80': changeOpacity(theme.centerChannelBg, 0.8),
'center-channel-color-80': changeOpacity(theme.centerChannelColor, 0.8),
'center-channel-bg-60': changeOpacity(theme.centerChannelBg, 0.6),
'center-channel-color-60': changeOpacity(theme.centerChannelColor, 0.6),
'center-channel-bg-50': changeOpacity(theme.centerChannelBg, 0.5),
'center-channel-color-50': changeOpacity(theme.centerChannelColor, 0.5),
'center-channel-bg-40': changeOpacity(theme.centerChannelBg, 0.4),
'center-channel-color-40': changeOpacity(theme.centerChannelColor, 0.4),
'center-channel-bg-30': changeOpacity(theme.centerChannelBg, 0.3),
'center-channel-color-30': changeOpacity(theme.centerChannelColor, 0.3),
'center-channel-bg-20': changeOpacity(theme.centerChannelBg, 0.2),
'center-channel-color-20': changeOpacity(theme.centerChannelColor, 0.2),
'center-channel-bg-15': changeOpacity(theme.centerChannelBg, 0.15),
'center-channel-color-15': changeOpacity(theme.centerChannelColor, 0.15),
'center-channel-bg-10': changeOpacity(theme.centerChannelBg, 0.1),
'center-channel-color-10': changeOpacity(theme.centerChannelColor, 0.1),
'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
'new-message-separator': theme.newMessageSeparator,
'link-color': theme.linkColor,
'button-bg': theme.buttonBg,
'button-color': theme.buttonColor,
'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
'button-color-90': changeOpacity(theme.buttonColor, 0.9),
'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
'button-color-80': changeOpacity(theme.buttonColor, 0.8),
'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
'button-color-60': changeOpacity(theme.buttonColor, 0.6),
'center-channel-color-90': changeOpacity(theme.centerChannelColor, 0.9),
'center-channel-bg-80': changeOpacity(theme.centerChannelBg, 0.8),
'center-channel-color-80': changeOpacity(theme.centerChannelColor, 0.8),
'center-channel-bg-60': changeOpacity(theme.centerChannelBg, 0.6),
'center-channel-color-60': changeOpacity(theme.centerChannelColor, 0.6),
'center-channel-bg-50': changeOpacity(theme.centerChannelBg, 0.5),
'center-channel-color-50': changeOpacity(theme.centerChannelColor, 0.5),
'center-channel-bg-40': changeOpacity(theme.centerChannelBg, 0.4),
'center-channel-color-40': changeOpacity(theme.centerChannelColor, 0.4),
'center-channel-bg-30': changeOpacity(theme.centerChannelBg, 0.3),
'center-channel-color-30': changeOpacity(theme.centerChannelColor, 0.3),
'center-channel-bg-20': changeOpacity(theme.centerChannelBg, 0.2),
'center-channel-color-20': changeOpacity(theme.centerChannelColor, 0.2),
'center-channel-bg-15': changeOpacity(theme.centerChannelBg, 0.15),
'center-channel-color-15': changeOpacity(theme.centerChannelColor, 0.15),
'center-channel-bg-10': changeOpacity(theme.centerChannelBg, 0.1),
'center-channel-color-10': changeOpacity(theme.centerChannelColor, 0.1),
'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
'new-message-separator': theme.newMessageSeparator,
'link-color': theme.linkColor,
'button-bg': theme.buttonBg,
'button-color': theme.buttonColor,
'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
'button-color-90': changeOpacity(theme.buttonColor, 0.9),
'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
'button-color-80': changeOpacity(theme.buttonColor, 0.8),
'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
'button-color-60': changeOpacity(theme.buttonColor, 0.6),
'button-bg-50': changeOpacity(theme.buttonBg, 0.5),
'button-color-50': changeOpacity(theme.buttonColor, 0.5),
'away-indicator': theme.awayIndicator,
'dnd-indicator': theme.dndIndicator,
'mention-bg': theme.mentionBg,
'mention-color': theme.mentionColor,
'center-channel-bg': theme.centerChannelBg,
'center-channel-color': theme.centerChannelColor,
'center-channel-bg-90': changeOpacity(theme.centerChannelBg, 0.9),
'center-channel-color-90': changeOpacity(theme.centerChannelColor, 0.9),
'center-channel-bg-80': changeOpacity(theme.centerChannelBg, 0.8),
'center-channel-color-80': changeOpacity(theme.centerChannelColor, 0.8),
'center-channel-bg-60': changeOpacity(theme.centerChannelBg, 0.6),
'center-channel-color-60': changeOpacity(theme.centerChannelColor, 0.6),
'center-channel-bg-50': changeOpacity(theme.centerChannelBg, 0.5),
'center-channel-color-50': changeOpacity(theme.centerChannelColor, 0.5),
'center-channel-bg-40': changeOpacity(theme.centerChannelBg, 0.4),
'center-channel-color-40': changeOpacity(theme.centerChannelColor, 0.4),
'center-channel-bg-30': changeOpacity(theme.centerChannelBg, 0.3),
'center-channel-color-30': changeOpacity(theme.centerChannelColor, 0.3),
'center-channel-bg-20': changeOpacity(theme.centerChannelBg, 0.2),
'center-channel-color-20': changeOpacity(theme.centerChannelColor, 0.2),
'center-channel-bg-15': changeOpacity(theme.centerChannelBg, 0.15),
'center-channel-color-15': changeOpacity(theme.centerChannelColor, 0.15),
'center-channel-bg-10': changeOpacity(theme.centerChannelBg, 0.1),
'center-channel-color-10': changeOpacity(theme.centerChannelColor, 0.1),
'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
'new-message-separator': theme.newMessageSeparator,
'link-color': theme.linkColor,
'button-bg': theme.buttonBg,
'button-color': theme.buttonColor,
'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
'center-channel-bg-80': changeOpacity(theme.centerChannelBg, 0.8),
'center-channel-color-80': changeOpacity(theme.centerChannelColor, 0.8),
'center-channel-bg-60': changeOpacity(theme.centerChannelBg, 0.6),
'center-channel-color-60': changeOpacity(theme.centerChannelColor, 0.6),
'center-channel-bg-50': changeOpacity(theme.centerChannelBg, 0.5),
'center-channel-color-50': changeOpacity(theme.centerChannelColor, 0.5),
'center-channel-bg-40': changeOpacity(theme.centerChannelBg, 0.4),
'center-channel-color-40': changeOpacity(theme.centerChannelColor, 0.4),
'center-channel-bg-30': changeOpacity(theme.centerChannelBg, 0.3),
'center-channel-color-30': changeOpacity(theme.centerChannelColor, 0.3),
'center-channel-bg-20': changeOpacity(theme.centerChannelBg, 0.2),
'center-channel-color-20': changeOpacity(theme.centerChannelColor, 0.2),
'center-channel-bg-15': changeOpacity(theme.centerChannelBg, 0.15),
'center-channel-color-15': changeOpacity(theme.centerChannelColor, 0.15),
'center-channel-bg-10': changeOpacity(theme.centerChannelBg, 0.1),
'center-channel-color-10': changeOpacity(theme.centerChannelColor, 0.1),
'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
'new-message-separator': theme.newMessageSeparator,
'link-color': theme.linkColor,
'button-bg': theme.buttonBg,
'button-color': theme.buttonColor,
'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
'button-color-90': changeOpacity(theme.buttonColor, 0.9),
'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
'button-color-80': changeOpacity(theme.buttonColor, 0.8),
'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
'button-color-60': changeOpacity(theme.buttonColor, 0.6),
'button-bg-50': changeOpacity(theme.buttonBg, 0.5),
'button-color-50': changeOpacity(theme.buttonColor, 0.5),
'button-bg-40': changeOpacity(theme.buttonBg, 0.4),