diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss index 72bab0e5b5..6e8f7c6df3 100644 --- a/core/src/components/modal/modal.scss +++ b/core/src/components/modal/modal.scss @@ -47,6 +47,8 @@ outline: none; + color: $modal-text-color; + contain: strict; } diff --git a/core/src/components/modal/modal.vars.scss b/core/src/components/modal/modal.vars.scss index 0798d6d15f..f881168971 100644 --- a/core/src/components/modal/modal.vars.scss +++ b/core/src/components/modal/modal.vars.scss @@ -20,3 +20,6 @@ $modal-inset-height-small: 500px !default; /// @prop - Height of the large modal inset $modal-inset-height-large: 600px !default; + +/// @prop - Text color of the modal content +$modal-text-color: $text-color !default; diff --git a/core/src/components/modal/test/dark-mode/index.html b/core/src/components/modal/test/dark-mode/index.html new file mode 100644 index 0000000000..804011237c --- /dev/null +++ b/core/src/components/modal/test/dark-mode/index.html @@ -0,0 +1,233 @@ + + + + + Modal - Dark Mode + + + + + + + + + + + +
+ + + Modal - Dark Mode + + + + +
+
+

Outside "ion-content"

+ Present modal + +

Content of doom

+
Here's some more content
+ Dismiss Modal + +
+
+ +
+ + + + + diff --git a/core/src/components/modal/test/dark-mode/model.e2e.ts b/core/src/components/modal/test/dark-mode/model.e2e.ts new file mode 100644 index 0000000000..02baf425b5 --- /dev/null +++ b/core/src/components/modal/test/dark-mode/model.e2e.ts @@ -0,0 +1,23 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('modal: dark mode', () => { + test('should render the correct text color when outside ion-content', async ({ page, skip }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/26060', + }); + + skip.rtl(); + + await page.goto('/src/components/modal/test/dark-mode'); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#basic-modal'); + + await ionModalDidPresent.next(); + + await expect(page).toHaveScreenshot(`modal-dark-color-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..57babfe5d7 Binary files /dev/null and b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ee14169b0a Binary files /dev/null and b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a5d4e72aa0 Binary files /dev/null and b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6ed7eea39b Binary files /dev/null and b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..cd8951989b Binary files /dev/null and b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b98dcaca97 Binary files /dev/null and b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png differ