From de025c10590bdc8d45d0514c39ab3111a065fea7 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <mikhaelatapia@gmail.com>
Date: Thu, 9 Oct 2025 15:19:47 +0800
Subject: [PATCH 1/5] remove color scheme styles in editor if there are no
 color schemes

---
 .../global-settings/color-schemes/editor-loader.js   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/plugins/global-settings/color-schemes/editor-loader.js b/src/plugins/global-settings/color-schemes/editor-loader.js
index 800319b617..00952ac9f9 100644
--- a/src/plugins/global-settings/color-schemes/editor-loader.js
+++ b/src/plugins/global-settings/color-schemes/editor-loader.js
@@ -69,6 +69,15 @@ export const renderGlobalColorSchemeStyles = (
 		css += bgcss
 	}
 
+	// This fixes the issue wherein if there is a background scheme and no container/base scheme, the container inherits the background scheme which may cause the text to be unreadable
+	const addContainerSchemeDefaultColors = containerModeColorScheme in colorSchemes && ! schemeHasValue( colorSchemes[ containerModeColorScheme ] ) &&
+		(
+			// Add default container scheme if background scheme has value
+			( backgroundModeColorScheme in colorSchemes && schemeHasValue( colorSchemes[ backgroundModeColorScheme ] ) ) ||
+			// Add default container scheme if there are color schemes other than the default scheme and background scheme
+			( colorSchemesArray.length !== 2 )
+		)
+
 	if ( containerModeColorScheme in colorSchemes && schemeHasValue( colorSchemes[ containerModeColorScheme ] ) ) {
 		decls = getCSS( colorSchemes[ containerModeColorScheme ], currentHoverState, 'container' )
 		let containercss = ''
@@ -79,8 +88,7 @@ export const renderGlobalColorSchemeStyles = (
 			containercss += `.stk-container:where(:not(.stk--no-background):hover), :where(.stk-hover-parent:hover) .stk-container:where(:not(.stk--no-background)){ ${ decls.desktopParentHover.join( '' ) } }\n`
 		}
 		css += containercss
-	// This fixes the issue wherein if there is a background scheme and no container/base scheme, the container inherits the background scheme which may cause the text to be unreadable
-	} else if ( containerModeColorScheme in colorSchemes && ! schemeHasValue( colorSchemes[ containerModeColorScheme ] ) ) {
+	} else if ( addContainerSchemeDefaultColors	) {
 		const containercss = `.stk-container:where(:not(.stk--no-background)){ ${ getDefaultColors() } }\n`
 
 		css += applyFilters( 'stackable.global-settings.global-color-schemes.default-container-scheme', containercss )

From 31bc3d808c65a47d690d5c93cac68259bde0746e Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <mikhaelatapia@gmail.com>
Date: Thu, 9 Oct 2025 19:02:07 +0800
Subject: [PATCH 2/5] update selectors for color schemes

---
 src/block/countdown/style.scss                |  4 +-
 src/block/divider/style.scss                  |  2 +-
 src/block/icon-list/style.scss                |  4 +-
 src/block/number-box/style.scss               |  2 +-
 src/block/price/style.scss                    |  4 +-
 src/block/progress-bar/style.scss             |  2 +-
 src/block/progress-circle/style.scss          |  2 +-
 src/block/table-of-contents/style.scss        |  4 +-
 src/block/timeline/style.scss                 |  2 +-
 .../color-schemes/editor-loader.js            | 61 +++++++++++++------
 .../global-settings/color-schemes/index.php   | 28 +++++++--
 src/styles/block-design-system-blocks.scss    | 38 ++++++------
 src/styles/cssvars.scss                       |  7 +++
 src/styles/editor-block-design-system.scss    | 22 ++++---
 14 files changed, 121 insertions(+), 61 deletions(-)

diff --git a/src/block/countdown/style.scss b/src/block/countdown/style.scss
index 6f781b2db7..f107312481 100644
--- a/src/block/countdown/style.scss
+++ b/src/block/countdown/style.scss
@@ -1,3 +1,5 @@
+@import "common";
+
 .stk-block.stk-block-countdown {
 	text-align: center;
 	&.stk-block-countdown--aligned {
@@ -61,7 +63,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-countdown__digit {
 		color: var(--stk-accent-color);
 		&:where(:hover) {
diff --git a/src/block/divider/style.scss b/src/block/divider/style.scss
index 20088c59a5..ad44535e3c 100644
--- a/src/block/divider/style.scss
+++ b/src/block/divider/style.scss
@@ -8,7 +8,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block.stk-block-divider {
 		hr.stk-block-divider__hr,
 		.stk-block-divider__dot {
diff --git a/src/block/icon-list/style.scss b/src/block/icon-list/style.scss
index 658443d3eb..3032a06b9d 100644
--- a/src/block/icon-list/style.scss
+++ b/src/block/icon-list/style.scss
@@ -1,3 +1,5 @@
+@import "common";
+
 // Important, we can't use flex since it causes issues with columns.
 .stk-block-icon-list {
 	.stk-block-icon-list--grid:is(ul, ol) {
@@ -88,7 +90,7 @@
 	}
 }
 
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-icon-list {
 		--stk-icon-list-marker-color: var(--stk-accent-color);
 		:where(.stk-block-icon-list-item) {
diff --git a/src/block/number-box/style.scss b/src/block/number-box/style.scss
index fb9adb1ed3..35f1b1c505 100644
--- a/src/block/number-box/style.scss
+++ b/src/block/number-box/style.scss
@@ -21,7 +21,7 @@ div.stk-block-number-box__text {
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) .stk-block-number-box.stk--has-shape {
+:where(#{$stk-has-color-schemes-selector}) .stk-block-number-box.stk--has-shape {
 	.stk-block-number-box__container,
 	div.stk-block-number-box__text {
 		color: var(--stk-button-text-color, #fff);
diff --git a/src/block/price/style.scss b/src/block/price/style.scss
index a41bfde198..87765aa8ac 100644
--- a/src/block/price/style.scss
+++ b/src/block/price/style.scss
@@ -1,3 +1,5 @@
+@import "common";
+
 .stk-block-price {
 	line-height: 1;
 	.stk-block-text {
@@ -12,6 +14,6 @@
 	line-height: 0.7;
 }
 
-:where(.stk-has-color-schemes .stk-block-price) .stk-block-text {
+:where(#{$stk-has-color-schemes-selector}) :where(.stk-block-price) .stk-block-text {
 	color: var(--stk-text-color);
 }
diff --git a/src/block/progress-bar/style.scss b/src/block/progress-bar/style.scss
index d7e894ac5a..1c6d3f044c 100644
--- a/src/block/progress-bar/style.scss
+++ b/src/block/progress-bar/style.scss
@@ -47,7 +47,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-progress-bar {
 		--progress-color-1: var(--stk-accent-color);
 	}
diff --git a/src/block/progress-circle/style.scss b/src/block/progress-circle/style.scss
index b0dd2899e3..332b2701d9 100644
--- a/src/block/progress-circle/style.scss
+++ b/src/block/progress-circle/style.scss
@@ -55,7 +55,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-progress-circle {
 		--progress-color-1: var(--stk-accent-color);
 	}
diff --git a/src/block/table-of-contents/style.scss b/src/block/table-of-contents/style.scss
index a15edf1c7e..6a3112e565 100644
--- a/src/block/table-of-contents/style.scss
+++ b/src/block/table-of-contents/style.scss
@@ -1,3 +1,5 @@
+@import "common";
+
 // Important, we can't use flex since it causes issues with columns.
 .stk-block-table-of-contents {
 	.stk-table-of-contents__table {
@@ -40,7 +42,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-table-of-contents {
 		// Add this so that it inherits the color from global color schemes.
 		::marker {
diff --git a/src/block/timeline/style.scss b/src/block/timeline/style.scss
index 5bb8adac93..276de72d29 100644
--- a/src/block/timeline/style.scss
+++ b/src/block/timeline/style.scss
@@ -21,7 +21,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-timeline {
 		--line-accent-bg-color: var(--stk-accent-color, #000);
 	}
diff --git a/src/plugins/global-settings/color-schemes/editor-loader.js b/src/plugins/global-settings/color-schemes/editor-loader.js
index 00952ac9f9..fa12c62096 100644
--- a/src/plugins/global-settings/color-schemes/editor-loader.js
+++ b/src/plugins/global-settings/color-schemes/editor-loader.js
@@ -161,29 +161,52 @@ export const GlobalColorSchemeStyles = () => {
 	// Adds a class to the editor body DOM to indicate that there are global styles for `color schemes`.
 	useEffect( () => {
 		if ( editorEl ) {
-			if ( styles !== '' && editorEl.classList.contains( 'stk-has-color-schemes' ) === false ) {
-				editorEl.classList.add( 'stk-has-color-schemes' )
-				addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
-					classnames.push( 'stk-has-color-schemes' )
-					return classnames
-				} )
-			}
-			if ( styles === '' ) {
-				editorEl.classList.remove( 'stk-has-color-schemes' )
-			}
+			const addClassNames = editor => {
+				const classNamesToAdd = []
+				const classNamesToRemove = []
+				if ( styles === '' ) {
+					editor.classList.remove( 'stk--has-base-scheme', 'stk--has-background-scheme', 'stk--has-container-scheme' )
+				} else {
+					if ( ! styles.includes( ':root' ) ) {
+						classNamesToRemove.push( 'stk--has-base-scheme' )
+					} else if ( editor.classList.contains( 'stk--has-base-scheme' ) === false ) {
+						classNamesToAdd.push( 'stk--has-base-scheme' )
+					}
+
+					if ( ! styles.includes( '.stk-block-background' ) ) {
+						classNamesToRemove.push( 'stk--has-background-scheme' )
+					} else if ( editor.classList.contains( 'stk--has-background-scheme' ) === false ) {
+						classNamesToAdd.push( 'stk--has-background-scheme' )
+					}
+
+					if ( ! styles.includes( '.stk-container:where(:not(.stk--no-background))' ) ) {
+						classNamesToRemove.push( 'stk--has-container-scheme' )
+					} else if ( editor.classList.contains( 'stk--has-container-scheme' ) === false ) {
+						classNamesToAdd.push( 'stk--has-container-scheme' )
+					}
+
+					editor.classList.add( ...classNamesToAdd )
+					editor.classList.remove( ...classNamesToRemove )
 
-			// At first load of the editor, the `stk-has-color-schemes` is removed, so we have to re-add it.
-			const mo = onClassChange( editorEl, () => {
-				if ( styles !== '' && editorEl?.classList.contains( 'stk-has-color-schemes' ) === false ) {
-					editorEl?.classList.add( 'stk-has-color-schemes' )
 					addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
-						classnames.push( 'stk-has-color-schemes' )
-						return classnames
+					// Remove any classNamesToRemove from classnames
+						const updatedClassnames = classnames.filter( name => ! classNamesToRemove.includes( name ) )
+						// Add classNamesToAdd if not already present
+						classNamesToAdd.forEach( name => {
+							if ( ! updatedClassnames.includes( name ) ) {
+								updatedClassnames.push( name )
+							}
+						} )
+						return updatedClassnames
 					} )
 				}
-				if ( styles === '' ) {
-					editorEl?.classList.remove( 'stk-has-color-schemes' )
-				}
+			}
+
+			addClassNames( editorEl )
+
+			// At first load of the editor, the color scheme classnames removed, so we have to re-add it.
+			const mo = onClassChange( editorEl, () => {
+				addClassNames( editorEl )
 			} )
 
 			return () => mo.disconnect()
diff --git a/src/plugins/global-settings/color-schemes/index.php b/src/plugins/global-settings/color-schemes/index.php
index 22ffd401d1..0bf6b201b1 100644
--- a/src/plugins/global-settings/color-schemes/index.php
+++ b/src/plugins/global-settings/color-schemes/index.php
@@ -262,7 +262,9 @@ public function add_global_color_schemes_styles( $current_css ) {
 			// If there is cached CSS, use it
 			if ( $cached_color_scheme_css ) {
 				// Add a body class if there are any global color schemes styles.
-				add_filter( 'body_class', array( $this, 'add_body_class_color_schemes' ) );
+				add_filter( 'body_class', function( $classes ) use ( $cached_color_scheme_css ) {
+					return $this->add_body_class_color_schemes( $classes, $cached_color_scheme_css );
+				} );
 				$current_css .= $cached_color_scheme_css;
 				return apply_filters( 'stackable_frontend_css' , $current_css );
 			}
@@ -364,7 +366,9 @@ public function add_global_color_schemes_styles( $current_css ) {
 
 			// Add a body class if there are any global color schemes styles.
 			if ( $color_scheme_css !== '' ) {
-				add_filter( 'body_class', array( $this, 'add_body_class_color_schemes' ) );
+				add_filter( 'body_class', function( $classes ) use ( $color_scheme_css ) {
+					return $this->add_body_class_color_schemes( $classes, $color_scheme_css );
+				}  );
 			}
 
 			// Add the generated CSS to the database
@@ -374,8 +378,20 @@ public function add_global_color_schemes_styles( $current_css ) {
 			return apply_filters( 'stackable_frontend_css' , $current_css );
 		}
 
-		public function add_body_class_color_schemes( $classes ) {
-			$classes[] = 'stk-has-color-schemes';
+		public function add_body_class_color_schemes( $classes, $color_scheme_css ) {
+			if ( $color_scheme_css ) {
+				if ( strpos( $color_scheme_css, ':root' ) !== false ) {
+					$classes[] = 'stk--has-base-scheme';
+				}
+
+				if ( strpos( $color_scheme_css, '.stk-block-background' ) !== false ) {
+					$classes[] = 'stk--has-background-scheme';
+				}
+
+				if ( strpos( $color_scheme_css, '.stk-container:where(:not(.stk--no-background))' ) ) {
+					$classes[] = 'stk--has-container-scheme';
+				}
+			}
 			return $classes;
 		}
 
@@ -514,8 +530,8 @@ public function getDefaultContainerColors( $styles, $scheme ) {
 
 			$default_styles = apply_filters( 'stackable.global-settings.global-color-schemes.default-container-scheme', $default_styles );
 
-			foreach ( $default_styles as $styles ) {
-				$styles[] = $default_styles;
+			foreach ( $default_styles as $default_style ) {
+				$styles[] = $default_style;
 			}
 
 
diff --git a/src/styles/block-design-system-blocks.scss b/src/styles/block-design-system-blocks.scss
index 84f4bc0bd2..7958a31c37 100644
--- a/src/styles/block-design-system-blocks.scss
+++ b/src/styles/block-design-system-blocks.scss
@@ -313,7 +313,7 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 }
 
 // These are the global styles for color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	:where(.stk-block) > :is(p, div) {
 		color: var(--stk-text-color);
 	}
@@ -384,22 +384,6 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 		}
 	}
 
-	.stk-container:not(.stk--no-background) {
-		background-image: cssvar(container-background-color);
-		&:hover {
-			background-color: var(--stk-container-background-color-hover, cssvar(container-background-color));
-			background-image: var(--stk-container-background-color-hover, cssvar(container-background-color));
-		}
-	}
-
-	.stk-block-background {
-		background-image: cssvar(block-background-color);
-		&:hover {
-			background-color: var(--stk-block-background-color-hover, cssvar(block-background-color));
-			background-image: var(--stk-block-background-color-hover, cssvar(block-background-color));
-		}
-	}
-
 	.stk--inner-svg {
 		border-color: var(--stk-default-icon-color, var(--stk-accent-color, cssvar(icon-color)));
 		svg:last-child:not(.ugb-custom-icon):not(.stk-custom-icon) {
@@ -436,8 +420,26 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 	}
 }
 
+:where(.stk--has-container-scheme) .stk-container:not(.stk--no-background),
+.stk-container:not(.stk--no-background):where([class*="stk--container-scheme"]) {
+	background-image: cssvar(container-background-color);
+	&:hover {
+		background-color: var(--stk-container-background-color-hover, cssvar(container-background-color));
+		background-image: var(--stk-container-background-color-hover, cssvar(container-background-color));
+	}
+}
+
+:where(.stk--has-background-scheme) .stk-block-background,
+.stk-block-background:where([class*="stk--background-scheme"]) {
+	background-image: cssvar(block-background-color);
+	&:hover {
+		background-color: var(--stk-block-background-color-hover, cssvar(block-background-color));
+		background-image: var(--stk-block-background-color-hover, cssvar(block-background-color));
+	}
+}
+
 // These are the global styles applied when theme block styles are inherited and when there are color schemes.
-:where(.stk-has-block-style-inheritance.stk-has-color-schemes) {
+:where(.stk-has-block-style-inheritance):where(#{$stk-has-color-schemes-selector}) {
 	.stk-block:is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
 		&:not(.is-style-link) .stk-button {
 			color: var(--stk-button-text-color-hover, cssvar(button-text-color));
diff --git a/src/styles/cssvars.scss b/src/styles/cssvars.scss
index f5a646b80b..7af78941b3 100644
--- a/src/styles/cssvars.scss
+++ b/src/styles/cssvars.scss
@@ -118,3 +118,10 @@ $_cssvars: ();
 
 	@return var(--stk-#{ $name });
 }
+
+$stk-has-color-schemes-selector:
+	"[class*='stk--background-scheme']", // For custom background schemes
+	"[class*='stk--container-scheme']", // For custom container schemes
+	".stk--has-base-scheme", // For base scheme
+	".stk--has-background-scheme .stk-block-background", // For default background schemes
+	".stk--has-container-scheme .stk-container:not(.stk--no-background)"; // For default container schemes
diff --git a/src/styles/editor-block-design-system.scss b/src/styles/editor-block-design-system.scss
index 41870d7bfa..44e955cdb4 100644
--- a/src/styles/editor-block-design-system.scss
+++ b/src/styles/editor-block-design-system.scss
@@ -112,7 +112,7 @@
 }
 
 // These are the global styles for color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	div.stk-block > :is(h1,h2,h3,h4,h5,h6) {
 		color: var(--stk-heading-color);
 	}
@@ -180,13 +180,17 @@
 		}
 	}
 
-	.stk--is-hovered .stk-container:not(.stk--no-background) {
-		background-color: var(--stk-container-background-color-hover, cssvar(container-background-color));
-		background-image: var(--stk-container-background-color-hover, cssvar(container-background-color));
-	}
 
-	[data-type^="stackable/"] .stk--is-hovered.stk-block-background {
-		background-image: var(--stk-block-background-color-hover, cssvar(block-background-color));
-		background-color: var(--stk-block-background-color-hover, cssvar(block-background-color));
-	}
+}
+
+:where(.stk--has-container-scheme) .stk--is-hovered .stk-container:not(.stk--no-background),
+.stk--is-hovered .stk-container:not(.stk--no-background):where([class*="stk--container-scheme"]) {
+	background-color: var(--stk-container-background-color-hover, cssvar(container-background-color));
+	background-image: var(--stk-container-background-color-hover, cssvar(container-background-color));
+}
+
+:where(.stk--has-container-scheme) [data-type^="stackable/"] .stk--is-hovered.stk-block-background,
+[data-type^="stackable/"] .stk--is-hovered.stk-block-background:where([class*="stk--background-scheme"]) {
+	background-image: var(--stk-block-background-color-hover, cssvar(block-background-color));
+	background-color: var(--stk-block-background-color-hover, cssvar(block-background-color));
 }

From 1dcb258f09eb9d252a2b0a098dfb57937e702968 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <mikhaelatapia@gmail.com>
Date: Thu, 9 Oct 2025 19:02:17 +0800
Subject: [PATCH 3/5] add compatibility for blocksy

---
 src/compatibility/blocksy/style.scss | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 src/compatibility/blocksy/style.scss

diff --git a/src/compatibility/blocksy/style.scss b/src/compatibility/blocksy/style.scss
new file mode 100644
index 0000000000..a8d498475a
--- /dev/null
+++ b/src/compatibility/blocksy/style.scss
@@ -0,0 +1,6 @@
+// Use Blocksy theme colors as fallback defaults for container color schemes.
+// These defaults apply when the default container color scheme is unset, but background or custom schemes exist.
+:where(.stk--is-blocksy-theme.stk--has-container-scheme) {
+	--stk-default-heading-color: var(--theme-heading-color, var(--theme-heading-2-color, var(--theme-headings-color)));
+	--stk-default-link-color: var(--theme-link-initial-color);
+}

From 253db070794cba8833abcbf9504674bce6b90970 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <mikhaelatapia@gmail.com>
Date: Thu, 9 Oct 2025 19:33:21 +0800
Subject: [PATCH 4/5] coderabbit's qa fixes

---
 .../color-schemes/editor-loader.js            | 36 ++++++++++++-------
 .../global-settings/color-schemes/index.php   |  2 +-
 src/styles/block-design-system-blocks.scss    |  8 ++---
 src/styles/editor-block-design-system.scss    |  4 +--
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/plugins/global-settings/color-schemes/editor-loader.js b/src/plugins/global-settings/color-schemes/editor-loader.js
index fa12c62096..e45d31ce3c 100644
--- a/src/plugins/global-settings/color-schemes/editor-loader.js
+++ b/src/plugins/global-settings/color-schemes/editor-loader.js
@@ -126,6 +126,8 @@ export const renderGlobalColorSchemeStyles = (
 	setStyles( css )
 }
 
+let filterRegistered = false
+
 export const GlobalColorSchemeStyles = () => {
 	const {
 		allColorSchemes,
@@ -187,21 +189,31 @@ export const GlobalColorSchemeStyles = () => {
 
 					editor.classList.add( ...classNamesToAdd )
 					editor.classList.remove( ...classNamesToRemove )
-
-					addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
-					// Remove any classNamesToRemove from classnames
-						const updatedClassnames = classnames.filter( name => ! classNamesToRemove.includes( name ) )
-						// Add classNamesToAdd if not already present
-						classNamesToAdd.forEach( name => {
-							if ( ! updatedClassnames.includes( name ) ) {
-								updatedClassnames.push( name )
-							}
-						} )
-						return updatedClassnames
-					} )
 				}
 			}
 
+			if ( ! filterRegistered ) {
+				addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
+				// Access current values via closure or alternative state management
+					const editor = editorEl
+					const hasBase = editor.classList.contains( 'stk--has-base-scheme' )
+					const hasBackground = editor.classList.contains( 'stk--has-background-scheme' )
+					const hasContainer = editor.classList.contains( 'stk--has-container-scheme' )
+
+					if ( hasBase && ! classnames.includes( 'stk--has-base-scheme' ) ) {
+						classnames.push( 'stk--has-base-scheme' )
+					}
+					if ( hasBackground && ! classnames.includes( 'stk--has-background-scheme' ) ) {
+						classnames.push( 'stk--has-background-scheme' )
+					}
+					if ( hasContainer && ! classnames.includes( 'stk--has-container-scheme' ) ) {
+						classnames.push( 'stk--has-container-scheme' )
+					}
+					return classnames
+				} )
+				filterRegistered = true
+			}
+
 			addClassNames( editorEl )
 
 			// At first load of the editor, the color scheme classnames removed, so we have to re-add it.
diff --git a/src/plugins/global-settings/color-schemes/index.php b/src/plugins/global-settings/color-schemes/index.php
index 0bf6b201b1..c7d31ab13a 100644
--- a/src/plugins/global-settings/color-schemes/index.php
+++ b/src/plugins/global-settings/color-schemes/index.php
@@ -388,7 +388,7 @@ public function add_body_class_color_schemes( $classes, $color_scheme_css ) {
 					$classes[] = 'stk--has-background-scheme';
 				}
 
-				if ( strpos( $color_scheme_css, '.stk-container:where(:not(.stk--no-background))' ) ) {
+				if ( strpos( $color_scheme_css, '.stk-container:where(:not(.stk--no-background))' ) !== false ) {
 					$classes[] = 'stk--has-container-scheme';
 				}
 			}
diff --git a/src/styles/block-design-system-blocks.scss b/src/styles/block-design-system-blocks.scss
index 7958a31c37..f3b788d9f3 100644
--- a/src/styles/block-design-system-blocks.scss
+++ b/src/styles/block-design-system-blocks.scss
@@ -422,19 +422,19 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 
 :where(.stk--has-container-scheme) .stk-container:not(.stk--no-background),
 .stk-container:not(.stk--no-background):where([class*="stk--container-scheme"]) {
-	background-image: cssvar(container-background-color);
+	background-image: var(--stk-container-background-color, none);
 	&:hover {
 		background-color: var(--stk-container-background-color-hover, cssvar(container-background-color));
-		background-image: var(--stk-container-background-color-hover, cssvar(container-background-color));
+		background-image: var(--stk-container-background-color-hover, var(--stk-container-background-color, none));
 	}
 }
 
 :where(.stk--has-background-scheme) .stk-block-background,
 .stk-block-background:where([class*="stk--background-scheme"]) {
-	background-image: cssvar(block-background-color);
+	background-image: var(--stk-block-background-color, none);
 	&:hover {
 		background-color: var(--stk-block-background-color-hover, cssvar(block-background-color));
-		background-image: var(--stk-block-background-color-hover, cssvar(block-background-color));
+		background-image: var(--stk-block-background-color-hover, var(--stk-block-background-color, none));
 	}
 }
 
diff --git a/src/styles/editor-block-design-system.scss b/src/styles/editor-block-design-system.scss
index 44e955cdb4..6595af4b12 100644
--- a/src/styles/editor-block-design-system.scss
+++ b/src/styles/editor-block-design-system.scss
@@ -186,11 +186,11 @@
 :where(.stk--has-container-scheme) .stk--is-hovered .stk-container:not(.stk--no-background),
 .stk--is-hovered .stk-container:not(.stk--no-background):where([class*="stk--container-scheme"]) {
 	background-color: var(--stk-container-background-color-hover, cssvar(container-background-color));
-	background-image: var(--stk-container-background-color-hover, cssvar(container-background-color));
+	background-image: var(--stk-container-background-color-hover, var(--stk-container-background-color, none));
 }
 
 :where(.stk--has-container-scheme) [data-type^="stackable/"] .stk--is-hovered.stk-block-background,
 [data-type^="stackable/"] .stk--is-hovered.stk-block-background:where([class*="stk--background-scheme"]) {
-	background-image: var(--stk-block-background-color-hover, cssvar(block-background-color));
+	background-image: var(--stk-block-background-color-hover, var(--stk-block-background-color, none));
 	background-color: var(--stk-block-background-color-hover, cssvar(block-background-color));
 }

From f73d2ff85a501b05256b6150959c6e5862192518 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <mikhaelatapia@gmail.com>
Date: Fri, 10 Oct 2025 11:52:41 +0800
Subject: [PATCH 5/5] fix generated css when there are no color schemes

---
 .../color-schemes/color-scheme-picker.js            | 10 +++++++++-
 .../global-settings/color-schemes/editor-loader.js  |  2 +-
 src/plugins/global-settings/color-schemes/index.php | 13 ++++++++++---
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/plugins/global-settings/color-schemes/color-scheme-picker.js b/src/plugins/global-settings/color-schemes/color-scheme-picker.js
index c4bfedc005..7c5f44cdb1 100644
--- a/src/plugins/global-settings/color-schemes/color-scheme-picker.js
+++ b/src/plugins/global-settings/color-schemes/color-scheme-picker.js
@@ -137,11 +137,19 @@ const ColorSchemePicker = props => {
 	// Get the custom color schemes
 	const customColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', [] )
 
+	// Checks if there are any color schemes with set values
+	const hasNoColorSchemes = currentColorSchemes => {
+		return ! currentColorSchemes.some( item => schemeHasValue( item.colorScheme ) )
+	}
+
 	const saveColorSchemeSettings = updatedColorSchemes => {
 		clearTimeout( saveTimeout )
 		saveTimeout = setTimeout( () => {
 			const settings = new models.Settings( {
-				stackable_global_color_schemes: updatedColorSchemes, // eslint-disable-line camelcase
+				// Store an empty array if all color schemes have no values,
+				// which optimizes the frontend by skipping unnecessary color scheme calculations.
+				// Otherwise, save the provided updatedColorSchemes array.
+				stackable_global_color_schemes: hasNoColorSchemes( updatedColorSchemes ) ? [] : updatedColorSchemes, // eslint-disable-line camelcase
 				// Clear the cached CSS when the color scheme is updated
 				stackable_global_color_scheme_generated_css: '', // eslint-disable-line camelcase
 			} )
diff --git a/src/plugins/global-settings/color-schemes/editor-loader.js b/src/plugins/global-settings/color-schemes/editor-loader.js
index e45d31ce3c..0495fadb09 100644
--- a/src/plugins/global-settings/color-schemes/editor-loader.js
+++ b/src/plugins/global-settings/color-schemes/editor-loader.js
@@ -75,7 +75,7 @@ export const renderGlobalColorSchemeStyles = (
 			// Add default container scheme if background scheme has value
 			( backgroundModeColorScheme in colorSchemes && schemeHasValue( colorSchemes[ backgroundModeColorScheme ] ) ) ||
 			// Add default container scheme if there are color schemes other than the default scheme and background scheme
-			( colorSchemesArray.length !== 2 )
+			( colorSchemesArray.length > 2 )
 		)
 
 	if ( containerModeColorScheme in colorSchemes && schemeHasValue( colorSchemes[ containerModeColorScheme ] ) ) {
diff --git a/src/plugins/global-settings/color-schemes/index.php b/src/plugins/global-settings/color-schemes/index.php
index c7d31ab13a..67e1bbae78 100644
--- a/src/plugins/global-settings/color-schemes/index.php
+++ b/src/plugins/global-settings/color-schemes/index.php
@@ -341,8 +341,15 @@ public function add_global_color_schemes_styles( $current_css ) {
 			}
 
 			// This fixes the issue wherein if there is a background scheme and no container/base scheme, the container inherits the background scheme which may cause the text to be unreadable
-			if ( isset( $this->color_schemes[ $container_default ] ) && $this::is_scheme_empty( $this->color_schemes[ $container_default ] ) ) {
-				$styles = $this->getDefaultContainerColors( $styles, $default_color_schemes[ 2 ] );
+			$add_default_container_colors = isset( $this->color_schemes[ $container_default ] ) && $this::is_scheme_empty( $this->color_schemes[ $container_default ] ) && (
+				// Add default container scheme if background scheme has value
+				( isset( $this->color_schemes[ $background_default ] ) && ! $this::is_scheme_empty( $this->color_schemes[ $background_default ] ) ) ||
+				// Add default container scheme if there are color schemes other than the default scheme and background scheme
+				count( $this->color_schemes ) > 2
+			);
+
+			if ( $add_default_container_colors ) {
+				$styles = $this->get_default_container_colors( $styles, $default_color_schemes[ 2 ] );
 			}
 
 			$color_scheme_css = '';
@@ -508,7 +515,7 @@ public function is_gradient( $scheme, $property, $state ) {
 		}
 
 		// These colors are used when there are color schemes but the default container scheme is empty
-		public function getDefaultContainerColors( $styles, $scheme ) {
+		public function get_default_container_colors( $styles, $scheme ) {
 			$selectors = $scheme[ 'selectors' ];
 
 			$default_styles = array();