Skip to content

test(scripts): add base theme to test pages #31536

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
thetaPC wants to merge 2 commits into from
+5 −3
Open

test(scripts): add base theme to test pages #31536

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b973272
test(scripts): add base theme to the test harness
thetaPC Oct 6, 2026
6d3e5e7
docs(scripts): list the base theme in the supported params
thetaPC Oct 19, 2026
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
8 changes: 5 additions & 3 deletions core/scripts/testing/scripts.js
View file
Open in desktop

@brandyscarney brandyscarney Oct 15, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Does the theme also need to be added to generator.ts:

ionic-framework/core/src/utils/test/playwright/generator.ts

Line 3 in 3589bf7

export type Theme = 'ios' | 'md' | 'ionic';

@thetaPC thetaPC Oct 19, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Not for this PR. The base theme is for checking migrated components by hand without a theme, and no spec runs it in Playwright yet. When one should screenshot it, the generator needs base-ios and base-md modes and 'base' in Theme, since it splits the mode string into theme and mode.

Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* The following URL parameters are supported:
* - `rtl`: Set to `true` to enable right-to-left directionality.
* - `ionic:_testing`: Set to `true` to identify testing environments.
* - `ionic:theme`: Set to `ionic`, `ios`, or `md` to load a specific
* - `ionic:theme`: Set to `ionic`, `ios`, `md` or `base` to load a specific
* theme. Defaults to `md`.
* - `palette`: Set to `light`, `dark`, `high-contrast`, or
* `high-contrast-dark` to load a specific palette. Defaults to `light`.
Expand Down Expand Up @@ -53,7 +53,9 @@ const DEFAULT_PALETTE = 'light';

/**
* The `theme` param is used to load a specific theme.
* This can be `ionic`, `ios`, or `md`. Default to `md` for tests.
* This can be `ionic`, `ios`, `md`, or `base`. Default to `md` for tests.
* `base` loads only the base tokens, with no component tokens, to show
* how migrated components render without a theme.
*/
const themeQuery = window.location.search.match(/ionic:theme=([a-z0-9]+)/i);
const themeHash = window.location.hash.match(/ionic:theme=([a-z0-9]+)/i);
Expand Down Expand Up @@ -127,7 +129,7 @@ const DEFAULT_PALETTE = 'light';
window.__ionicTestThemeReady = false;

// Load theme tokens if the theme is valid
const validThemes = ['ionic', 'ios', 'md'];
const validThemes = ['ionic', 'ios', 'md', 'base'];
if (themeName && validThemes.includes(themeName)) {
loadThemeTokens(themeName, paletteName).finally(() => {
window.__ionicTestThemeReady = true;
Expand Down
Loading