test(themes): only override the global background for ionic theme

brandyscarney · brandyscarney · commit ad6fe66f498a · 2025-10-07T15:25:12.000-04:00
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts
@@ -9,7 +9,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
+            .ionic {
               --ion-background-color: #ccc7c7;
             }
           </style>
@@ -47,7 +47,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
+            .ionic {
               --ion-background-color: #ccc7c7;
             }
           </style>
@@ -87,7 +87,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
+            .ionic {
               --ion-background-color: #ccc7c7;
             }
           </style>
@@ -125,7 +125,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
+            .ionic {
               --ion-background-color: #ccc7c7;
             }
           </style>
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts
@@ -9,7 +9,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
+            .ionic {
               --ion-background-color: #222;
             }
           </style>
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts b/core/src/components/accordion/test/shape/accordion.e2e.ts
@@ -9,7 +9,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
+            .ionic {
               --ion-background-color: #222;
             }
           </style>
diff --git a/core/src/components/progress-bar/test/shape/progress-bar.e2e.ts b/core/src/components/progress-bar/test/shape/progress-bar.e2e.ts
@@ -7,7 +7,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
       await page.setContent(
         `
           <style>
-            :root {
+            .ionic {
               --ion-background-color: #ccc7c7;
             }
 
@@ -32,7 +32,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
       await page.setContent(
         `
           <style>
-            :root {
+            .ionic {
               --ion-background-color: #ccc7c7;
             }
 
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts b/core/src/components/searchbar/test/shape/searchbar.e2e.ts
@@ -13,7 +13,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
+            .ionic {
               --ion-background-color: #000;
             }
           </style>
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts
@@ -10,7 +10,7 @@ configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, conf
       await page.setContent(
         `
         <style>
-          :root {
+          .ionic {
             --ion-background-color: #ccc7c7;
           }
         </style>
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts
@@ -12,7 +12,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         await page.setContent(
           `
           <style>
-            :root {
+            .ionic {
               --ion-background-color: #ccc7c7;
             }
           </style>
@@ -48,7 +48,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         await page.setContent(
           `
           <style>
-            :root {
+            .ionic {
               --ion-background-color: #ccc7c7;
             }
           </style>
@@ -84,7 +84,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         await page.setContent(
           `
           <style>
-            :root {
+            .ionic {
               --ion-background-color: #ccc7c7;
             }
           </style>

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens`
`9`	`9`	`
`10`	`10`	`<style>`
`11`	`11`	`/* Background styles to show the border radius */`
`12`		`- :root {`
	`12`	`+ .ionic {`
`13`	`13`	`--ion-background-color: #ccc7c7;`
`14`	`14`	`}`
`15`	`15`	`</style>`
`@@ -47,7 +47,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens`
`47`	`47`	`
`48`	`48`	`<style>`
`49`	`49`	`/* Background styles to show the border radius */`
`50`		`- :root {`
	`50`	`+ .ionic {`
`51`	`51`	`--ion-background-color: #ccc7c7;`
`52`	`52`	`}`
`53`	`53`	`</style>`
`@@ -87,7 +87,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens`
`87`	`87`	`
`88`	`88`	`<style>`
`89`	`89`	`/* Background styles to show the border radius */`
`90`		`- :root {`
	`90`	`+ .ionic {`
`91`	`91`	`--ion-background-color: #ccc7c7;`
`92`	`92`	`}`
`93`	`93`	`</style>`
`@@ -125,7 +125,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens`
`125`	`125`	`
`126`	`126`	`<style>`
`127`	`127`	`/* Background styles to show the border radius */`
`128`		`- :root {`
	`128`	`+ .ionic {`
`129`	`129`	`--ion-background-color: #ccc7c7;`
`130`	`130`	`}`
`131`	`131`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh`
`7`	`7`	`await page.setContent(`
`8`	`8`	`
`9`	`9`	`<style>`
`10`		`- :root {`
	`10`	`+ .ionic {`
`11`	`11`	`--ion-background-color: #ccc7c7;`
`12`	`12`	`}`
`13`	`13`
`@@ -32,7 +32,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh`
`32`	`32`	`await page.setContent(`
`33`	`33`	`
`34`	`34`	`<style>`
`35`		`- :root {`
	`35`	`+ .ionic {`
`36`	`36`	`--ion-background-color: #ccc7c7;`
`37`	`37`	`}`
`38`	`38`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh`
`13`	`13`	`
`14`	`14`	`<style>`
`15`	`15`	`/* Background styles to show the border radius */`
`16`		`- :root {`
	`16`	`+ .ionic {`
`17`	`17`	`--ion-background-color: #000;`
`18`	`18`	`}`
`19`	`19`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, conf`
`10`	`10`	`await page.setContent(`
`11`	`11`	`
`12`	`12`	`<style>`
`13`		`- :root {`
	`13`	`+ .ionic {`
`14`	`14`	`--ion-background-color: #ccc7c7;`
`15`	`15`	`}`
`16`	`16`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh`
`12`	`12`	`await page.setContent(`
`13`	`13`	`
`14`	`14`	`<style>`
`15`		`- :root {`
	`15`	`+ .ionic {`
`16`	`16`	`--ion-background-color: #ccc7c7;`
`17`	`17`	`}`
`18`	`18`	`</style>`
`@@ -48,7 +48,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh`
`48`	`48`	`await page.setContent(`
`49`	`49`	`
`50`	`50`	`<style>`
`51`		`- :root {`
	`51`	`+ .ionic {`
`52`	`52`	`--ion-background-color: #ccc7c7;`
`53`	`53`	`}`
`54`	`54`	`</style>`
`@@ -84,7 +84,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh`
`84`	`84`	`await page.setContent(`
`85`	`85`	`
`86`	`86`	`<style>`
`87`		`- :root {`
	`87`	`+ .ionic {`
`88`	`88`	`--ion-background-color: #ccc7c7;`
`89`	`89`	`}`
`90`	`90`	`</style>`