Skip to content

Change toolbar background color from IFrame API #16468 fixed #16585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+26 −4
Open

Change toolbar background color from IFrame API #16468 fixed #16585

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d98d6ce
Change toolbar background color from IFrame API #16468 fixed
vishal2005025 Oct 23, 2025
52e46eb
fix(toolbar #16468): implement toolbar background color via configOve…
vishal2005025 Oct 24, 2025
c04fcc8
keep toolbarConfig defaults commented in config.js
vishal2005025 Oct 28, 2025
09f94b1
add trailing comma to commented toolbarConfig.backgroundColor
vishal2005025 Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -904,6 +904,8 @@ var config = {
// alwaysVisible: false,
// // Indicates whether the toolbar should still autohide when chat is open
// autoHideWhileChatIsOpen: false,
// // Default background color for the main toolbar. Accepts any valid CSS color.
// // backgroundColor: '#ffffff'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a trailing comma please.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I have added the trailing comma as suggested

// },

// Overrides the buttons displayed in the main toolbar. Depending on the screen size the number of displayed
Expand Down
1 change: 1 addition & 0 deletions modules/API/API.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,7 @@ function initCommands() {

APP.store.dispatch(setAssumedBandwidthBps(value));
},

'set-blurred-background': blurType => {
const tracks = APP.store.getState()['features/base/tracks'];
const videoTrack = getLocalVideoTrack(tracks)?.jitsiTrack;
Expand Down
4 changes: 4 additions & 0 deletions react/features/base/config/configType.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -617,6 +617,10 @@ export interface IConfig {
alwaysVisible?: boolean;
autoHideWhileChatIsOpen?: boolean;
initialTimeout?: number;
/**
* Background color for the main toolbar. Accepts any valid CSS color.
*/
backgroundColor?: string;
timeout?: number;
};
transcribeWithAppLanguage?: boolean;
Expand Down
6 changes: 6 additions & 0 deletions react/features/toolbox/components/native/Toolbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ function Toolbox(props: IProps) {

const { clientWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
const { customToolbarButtons } = useSelector((state: IReduxState) => state['features/base/config']);
const toolbarBackgroundColor = useSelector((state: IReduxState) => state['features/base/config'].toolbarConfig?.backgroundColor);
const {
mainToolbarButtonsThresholds,
toolbarButtons
Expand All @@ -79,6 +80,11 @@ function Toolbox(props: IProps) {
const { buttonStylesBorderless, hangupButtonStyles } = _styles;
const style = { ...styles.toolbox };

// Allow overriding the toolbox background color from config (configOverwrite/overwriteConfig).
if (toolbarBackgroundColor) {
style.backgroundColor = toolbarBackgroundColor as any;
}

// We have only hangup and raisehand button in _iAmVisitor mode
if (_iAmVisitor) {
style.justifyContent = 'center';
Expand Down
17 changes: 13 additions & 4 deletions react/features/toolbox/components/web/Toolbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ interface IProps {
* Explicitly passed array with the buttons which this Toolbox should display.
*/
toolbarButtons?: Array<string>;

/**
* Optional toolbar background color passed as a prop.
*/
toolbarBackgroundColor?: string;
}

const useStyles = makeStyles()(() => {
Expand All @@ -65,7 +70,8 @@ const useStyles = makeStyles()(() => {
* @returns {ReactElement}
*/
export default function Toolbox({
toolbarButtons
toolbarButtons,
toolbarBackgroundColor: toolbarBackgroundColorProp
}: IProps) {
const { classes, cx } = useStyles();
const { t } = useTranslation();
Expand All @@ -92,7 +98,10 @@ export default function Toolbox({
const localParticipant = useSelector(getLocalParticipant);
const transcribing = useSelector(isTranscribing);
const _isCCTabEnabled = useSelector(isCCTabEnabled);

// Read toolbar background color from config (if provided) or from props.
const toolbarBackgroundColorFromConfig = useSelector((state: IReduxState) =>
state['features/base/config'].toolbarConfig?.backgroundColor);
const toolbarBackgroundColor = toolbarBackgroundColorProp || toolbarBackgroundColorFromConfig;
// Do not convert to selector, it returns new array and will cause re-rendering of toolbox on every action.
const jwtDisabledButtons = getJwtDisabledButtons(transcribing, _isCCTabEnabled, localParticipant?.features);

Expand Down Expand Up @@ -141,7 +150,6 @@ export default function Toolbox({
dispatch(setOverflowMenuVisible(visible));
dispatch(setToolbarHovered(visible));
}, [ dispatch ]);

useEffect(() => {

// On mobile web we want to keep both toolbox and hang up menu visible
Expand Down Expand Up @@ -242,7 +250,8 @@ export default function Toolbox({
return (
<div
className = { cx(rootClassNames, shiftUp && 'shift-up') }
id = 'new-toolbox'>
id = 'new-toolbox'
style = { toolbarBackgroundColor ? { backgroundColor: toolbarBackgroundColor } : undefined }>
<div className = { containerClassName }>
<div
className = 'toolbox-content-wrapper'
Expand Down