How to Change Bricks Preloader Background Color

Working on a dark-themed site like our friend Storm and getting blinded by the light background of Bricks’ preloader screen of the editor?

Here’s how we can change the loading screen to a dark one.

But first, a quick demo of the result:

Users of WPCodeBox: Refer to this tutorial.

Step 1

Create a directory named say, assets in your child theme directory.

Inside that create a directory named css.

Inside the above directory, create a file named builder.css having:

.brx-body.main #bricks-preloader {
  background-color: var(--builder-bg);
}

#bricks-preloader .title img {
  filter: invert(75%);
}

Step 2

Edit your child theme’s functions.php.

Change

add_action( 'wp_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
	}
} );

to

add_action( 'wp_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
	} else {
		wp_enqueue_style( 'builder', get_stylesheet_directory_uri() . '/assets/css/builder.css' );
	}
} );