mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(themes): enable all palettes (#30874)
Issue number: internal --------- <!-- 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. --> The new theming structure does not allow high contrast and high contrast dark to render properly. This can be seen when running a test that uses `set-content`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - High contrast and high contrast dark have been enabled to the testing environments - The theme files for high contrast and high contrast dark have been added under `themes`. ## Does this introduce a breaking change? - [x] Yes - [ ] 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/docs/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. --> [Colors preview](https://ionic-framework-git-set-content-ionic1.vercel.app/src/themes/test/color/) How to test: 1. Verify that tests related to palettes are passing especially those that use `setContent` 2. Verify that the preview page renders the right colors for each possible variation of palettes and themes --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
This commit is contained in:
@@ -21,6 +21,7 @@
|
||||
*/
|
||||
|
||||
const DEFAULT_THEME = 'md';
|
||||
const DEFAULT_PALETTE = 'light';
|
||||
|
||||
(function() {
|
||||
|
||||
@@ -88,17 +89,33 @@ const DEFAULT_THEME = 'md';
|
||||
* or `high-contrast-dark`. Default to `light` for tests.
|
||||
*/
|
||||
const validPalettes = ['light', 'dark', 'high-contrast', 'high-contrast-dark'];
|
||||
|
||||
const configDarkMode = window.Ionic?.config?.customTheme?.palette?.dark?.enabled === 'always' ? 'dark' : null;
|
||||
const configHighContrastMode = window.Ionic?.config?.customTheme?.palette?.highContrast?.enabled === 'always' ? 'high-contrast' : null;
|
||||
const configHighContrastDarkMode = window.Ionic?.config?.customTheme?.palette?.highContrastDark?.enabled === 'always' ? 'high-contrast-dark' : null;
|
||||
/**
|
||||
* Ensure window.Ionic.config is defined before importing 'testing/scripts'
|
||||
* in the test HTML to properly initialize the palette configuration below.
|
||||
*
|
||||
* Example:
|
||||
* <script>
|
||||
* window.Ionic = { config: { customTheme: { palette: { ... } } } };
|
||||
* </script>
|
||||
* <script src="testing/scripts.js"></script>
|
||||
*/
|
||||
const configPalette = configDarkMode || configHighContrastMode || configHighContrastDarkMode;
|
||||
const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
|
||||
const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
|
||||
const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
|
||||
const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
|
||||
const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
|
||||
const paletteClass = highContrastDarkClass || highContrastClass || darkClass;
|
||||
|
||||
let paletteName = paletteQuery?.[1] || paletteHash?.[1] || highContrastDarkClass || darkClass || highContrastClass || 'light';
|
||||
let paletteName = configPalette || paletteQuery?.[1] || paletteHash?.[1] || paletteClass || DEFAULT_PALETTE;
|
||||
|
||||
if (!validPalettes.includes(paletteName)) {
|
||||
console.warn(`Invalid palette name: '${paletteName}'. Falling back to 'light' palette.`);
|
||||
paletteName = 'light';
|
||||
paletteName = DEFAULT_PALETTE;
|
||||
}
|
||||
|
||||
// Load theme tokens if the theme is valid
|
||||
@@ -119,8 +136,15 @@ const DEFAULT_THEME = 'md';
|
||||
|
||||
// If a specific palette is requested, modify the palette structure
|
||||
// to set the enabled property to 'always'
|
||||
// TODO(FW-4004): Implement dark palette
|
||||
if (paletteName === 'dark' && theme.palette?.dark) {
|
||||
theme.palette.dark.enabled = 'always';
|
||||
// TODO(FW-4005): Implement high contrast palette
|
||||
} else if (paletteName === 'high-contrast' && theme.palette?.highContrast) {
|
||||
theme.palette.highContrast.enabled = 'always';
|
||||
// TODO(FW-4005): Implement high contrast dark palette
|
||||
} else if (paletteName === 'high-contrast-dark' && theme.palette?.highContrastDark) {
|
||||
theme.palette.highContrastDark.enabled = 'always';
|
||||
}
|
||||
|
||||
// Apply the theme tokens to Ionic config
|
||||
|
||||
Reference in New Issue
Block a user