Files
Maria Hutt e8e5c4e1b6 refactor(dark): use palettes through url queries in test pages (#29238)
Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

If a dev wants to view a test page in dark mode, they have to manually
add the styles. This can lead to a slowdown. Plus they can't use
Playwright's `goto` to test both light and dark. In order to test dark
mode with Playwright, the dev would need to use `setContent` instead of
`goto`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Dark mode can be added to any page by appending `palette=dark` to the
URL.

- The param will be used to add a link tag with the correct palette
file.
- Playwright will load the correct palette file when a dev uses `goto`
and `{ themes: ['dark'] }`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

I recommend using badge to try this out. It already has a `goto` in the
basic tests.
2024-04-19 18:48:29 +00:00
..

Ionic Logo

Ionic Framework Developer Resources

This documentation includes guidelines on contributing, coding conventions, best practices, testing steps, and more. It should serve as a collective resource for all documentation related to developing Ionic Framework.

What is Ionic Framework?

Ionic Framework is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web.

It is based on Web Components, which enables significant performance, usability, and feature improvements alongside support for popular web frameworks like Angular, React, and Vue.

Guides

Guide Description
Contributing How to contribute including creating pull requests, commit message guidelines, and more.
Component Guide Guidelines for implementing component states, accessibility, and more.
Sass Guidelines Outlines scenarios where Sass members and comments should be used.

Packages

Project Package Documentation Guides
Core @ionic/core Readme Testing
Angular @ionic/angular Readme Testing
React @ionic/react Readme Testing
React Router @ionic/react-router Readme Testing
Vue @ionic/vue Readme Testing
Vue Router @ionic/vue-router Readme Testing