Skip to content

[Appearance Menu] Add new contrast setting#227339

Merged
Dosant merged 12 commits intoelastic:mainfrom
tsullivan:fix/227309
Jul 11, 2025
Merged

[Appearance Menu] Add new contrast setting#227339
Dosant merged 12 commits intoelastic:mainfrom
tsullivan:fix/227309

Conversation

@tsullivan
Copy link
Member

@tsullivan tsullivan commented Jul 9, 2025

Closes #227309

Summary

high-contrast-mode-appearance-menu

This adds support for contrast mode alongside in the "Appearance Modal" alongside the existing color mode setting.

  • Added support for contrast mode in the AppearanceModal component, including a new ContrastModeGroup and updated logic to handle both color mode and contrast mode changes.
  • Resolved a TODO and updated the useAppearance hook to manage contrast mode alongside color mode

How to test

Cloud

  • Add the following to your kibana.dev.yml
xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM="
  • Make the following change on L29 of the maybe_add_cloud_links.ts file
--- a/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
+++ b/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
@@ -26,6 +26,7 @@ export function maybeAddCloudLinks({ core, security, cloud }: MaybeAddCloudLinks
   const userObservable = defer(() => security.authc.getCurrentUser()).pipe(
     // Check if user is a cloud user.
     map((user) => user.elastic_cloud_user),
+    map(() => true),
     // If user is not defined due to an unexpected error, then fail *open*.
     catchError(() => of(true)),
     filter((isElasticCloudUser) => isElasticCloudUser === true),
  • You should now see the "Appearance" link in the user menu

Release Note

Added support for high-contrast mode through the "Appearance modal" accessible from the User Profile icon at the top of the screen.

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

  • Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
    - [ ] Documentation was added for features that require explanation or tutorials
  • Unit or functional tests were updated or added to match the most common scenarios
    - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
    - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
    - [ ] Flaky Test Runner was used on any tests changed
  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
  • Review the backport guidelines and apply applicable backport:* labels.

@tsullivan tsullivan added release_note:feature Makes this part of the condensed release notes backport:version Backport to applied version labels v9.1.0 v8.19.0 v9.2.0 labels Jul 9, 2025
@tsullivan tsullivan marked this pull request as ready for review July 9, 2025 22:19
@tsullivan tsullivan requested review from a team as code owners July 9, 2025 22:19
@tsullivan tsullivan requested a review from a team July 9, 2025 22:22
Copy link
Contributor

@Bamieh Bamieh left a comment

Choose a reason for hiding this comment

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

Changes and code refactor LGTM

@tsullivan tsullivan added ci:project-deploy-elasticsearch Create an Elasticsearch Serverless project ci:project-deploy-observability Create an Observability project ci:project-deploy-security Create a Security Serverless Project labels Jul 10, 2025
@github-actions
Copy link
Contributor

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

  • /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
  • run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

@Dosant Dosant added the ci:cloud-deploy Create or update a Cloud deployment label Jul 10, 2025
@tsullivan tsullivan removed ci:project-deploy-elasticsearch Create an Elasticsearch Serverless project ci:project-deploy-security Create a Security Serverless Project labels Jul 10, 2025
@elasticmachine
Copy link
Contributor

elasticmachine commented Jul 10, 2025

⏳ Build in-progress

History

Copy link
Contributor

@Dosant Dosant left a comment

Choose a reason for hiding this comment

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

tested by deploying custom image 👍

@Dosant Dosant merged commit f368fad into elastic:main Jul 11, 2025
13 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.19, 9.1

https://github.com/elastic/kibana/actions/runs/16217689255

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jul 11, 2025
Closes elastic#227309

## Summary

![high-contrast-mode-appearance-menu](https://github.com/user-attachments/assets/2e1353b6-934b-4f01-ab5a-13639247327e)

This adds support for contrast mode alongside in the "Appearance Modal"
alongside the existing color mode setting.

* Added support for contrast mode in the `AppearanceModal` component,
including a new `ContrastModeGroup` and updated logic to handle both
color mode and contrast mode changes.
* Resolved a TODO and updated the `useAppearance` hook to manage
contrast mode alongside color mode

## How to test

### Cloud
* Add the following to your `kibana.dev.yml`

```yml
xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM="
```

* Make the following change on L29 of the `maybe_add_cloud_links.ts`
file

```diff
--- a/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
+++ b/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
@@ -26,6 +26,7 @@ export function maybeAddCloudLinks({ core, security, cloud }: MaybeAddCloudLinks
   const userObservable = defer(() => security.authc.getCurrentUser()).pipe(
     // Check if user is a cloud user.
     map((user) => user.elastic_cloud_user),
+    map(() => true),
     // If user is not defined due to an unexpected error, then fail *open*.
     catchError(() => of(true)),
     filter((isElasticCloudUser) => isElasticCloudUser === true),
```

* You should now see the "Appearance" link in the user menu

## Release Note

Added support for high-contrast mode through the "Appearance modal"
accessible from the User Profile icon at the top of the screen.

## Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [X] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
~~- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials~~
- [X] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
~~- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~
~~- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.~~
~~- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed~~
- [X] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [X] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

---------

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
(cherry picked from commit f368fad)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jul 11, 2025
Closes elastic#227309

## Summary

![high-contrast-mode-appearance-menu](https://github.com/user-attachments/assets/2e1353b6-934b-4f01-ab5a-13639247327e)

This adds support for contrast mode alongside in the "Appearance Modal"
alongside the existing color mode setting.

* Added support for contrast mode in the `AppearanceModal` component,
including a new `ContrastModeGroup` and updated logic to handle both
color mode and contrast mode changes.
* Resolved a TODO and updated the `useAppearance` hook to manage
contrast mode alongside color mode

## How to test

### Cloud
* Add the following to your `kibana.dev.yml`

```yml
xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM="
```

* Make the following change on L29 of the `maybe_add_cloud_links.ts`
file

```diff
--- a/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
+++ b/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
@@ -26,6 +26,7 @@ export function maybeAddCloudLinks({ core, security, cloud }: MaybeAddCloudLinks
   const userObservable = defer(() => security.authc.getCurrentUser()).pipe(
     // Check if user is a cloud user.
     map((user) => user.elastic_cloud_user),
+    map(() => true),
     // If user is not defined due to an unexpected error, then fail *open*.
     catchError(() => of(true)),
     filter((isElasticCloudUser) => isElasticCloudUser === true),
```

* You should now see the "Appearance" link in the user menu

## Release Note

Added support for high-contrast mode through the "Appearance modal"
accessible from the User Profile icon at the top of the screen.

## Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [X] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
~~- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials~~
- [X] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
~~- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~
~~- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.~~
~~- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed~~
- [X] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [X] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

---------

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
(cherry picked from commit f368fad)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.19
9.1

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Jul 11, 2025
# Backport

This will backport the following commits from `main` to `9.1`:
- [[Appearance Menu] Add new contrast setting
(#227339)](#227339)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Tim
Sullivan","email":"tsullivan@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-07-11T10:19:45Z","message":"[Appearance
Menu] Add new contrast setting (#227339)\n\nCloses
https://github.com/elastic/kibana/issues/227309\n\n##
Summary\n\n\n![high-contrast-mode-appearance-menu](https://github.com/user-attachments/assets/2e1353b6-934b-4f01-ab5a-13639247327e)\n\nThis
adds support for contrast mode alongside in the \"Appearance
Modal\"\nalongside the existing color mode setting.\n\n* Added support
for contrast mode in the `AppearanceModal` component,\nincluding a new
`ContrastModeGroup` and updated logic to handle both\ncolor mode and
contrast mode changes.\n* Resolved a TODO and updated the
`useAppearance` hook to manage\ncontrast mode alongside color
mode\n\n\n## How to test\n\n### Cloud\n* Add the following to your
`kibana.dev.yml`\n\n```yml\nxpack.cloud.id:
\"ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=\"\n```\n\n*
Make the following change on L29 of the
`maybe_add_cloud_links.ts`\nfile\n\n```diff\n---
a/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts\n+++
b/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts\n@@
-26,6 +26,7 @@ export function maybeAddCloudLinks({ core, security,
cloud }: MaybeAddCloudLinks\n const userObservable = defer(() =>
security.authc.getCurrentUser()).pipe(\n // Check if user is a cloud
user.\n map((user) => user.elastic_cloud_user),\n+ map(() => true),\n //
If user is not defined due to an unexpected error, then fail *open*.\n
catchError(() => of(true)),\n filter((isElasticCloudUser) =>
isElasticCloudUser === true),\n```\n\n* You should now see the
\"Appearance\" link in the user menu\n\n## Release Note\n\nAdded support
for high-contrast mode through the \"Appearance modal\"\naccessible from
the User Profile icon at the top of the screen.\n\n## Checklist\n\nCheck
the PR satisfies following conditions. \n\nReviewers should verify this
PR satisfies this list as well.\n\n- [X] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n~~-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~~\n- [X] [Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n~~- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~\n~~-
[ ] This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~~\n~~- [ ] [Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~~\n- [X] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[X] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n---------\n\nCo-authored-by:
Anton Dosov
<anton.dosov@elastic.co>","sha":"f368fadd075788d34619f5daea3215034f7c0352","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:feature","ci:cloud-deploy","ci:project-deploy-observability","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[Appearance
Menu] Add new contrast
setting","number":227339,"url":"https://github.com/elastic/kibana/pull/227339","mergeCommit":{"message":"[Appearance
Menu] Add new contrast setting (#227339)\n\nCloses
https://github.com/elastic/kibana/issues/227309\n\n##
Summary\n\n\n![high-contrast-mode-appearance-menu](https://github.com/user-attachments/assets/2e1353b6-934b-4f01-ab5a-13639247327e)\n\nThis
adds support for contrast mode alongside in the \"Appearance
Modal\"\nalongside the existing color mode setting.\n\n* Added support
for contrast mode in the `AppearanceModal` component,\nincluding a new
`ContrastModeGroup` and updated logic to handle both\ncolor mode and
contrast mode changes.\n* Resolved a TODO and updated the
`useAppearance` hook to manage\ncontrast mode alongside color
mode\n\n\n## How to test\n\n### Cloud\n* Add the following to your
`kibana.dev.yml`\n\n```yml\nxpack.cloud.id:
\"ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=\"\n```\n\n*
Make the following change on L29 of the
`maybe_add_cloud_links.ts`\nfile\n\n```diff\n---
a/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts\n+++
b/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts\n@@
-26,6 +26,7 @@ export function maybeAddCloudLinks({ core, security,
cloud }: MaybeAddCloudLinks\n const userObservable = defer(() =>
security.authc.getCurrentUser()).pipe(\n // Check if user is a cloud
user.\n map((user) => user.elastic_cloud_user),\n+ map(() => true),\n //
If user is not defined due to an unexpected error, then fail *open*.\n
catchError(() => of(true)),\n filter((isElasticCloudUser) =>
isElasticCloudUser === true),\n```\n\n* You should now see the
\"Appearance\" link in the user menu\n\n## Release Note\n\nAdded support
for high-contrast mode through the \"Appearance modal\"\naccessible from
the User Profile icon at the top of the screen.\n\n## Checklist\n\nCheck
the PR satisfies following conditions. \n\nReviewers should verify this
PR satisfies this list as well.\n\n- [X] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n~~-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~~\n- [X] [Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n~~- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~\n~~-
[ ] This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~~\n~~- [ ] [Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~~\n- [X] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[X] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n---------\n\nCo-authored-by:
Anton Dosov
<anton.dosov@elastic.co>","sha":"f368fadd075788d34619f5daea3215034f7c0352"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/227339","number":227339,"mergeCommit":{"message":"[Appearance
Menu] Add new contrast setting (#227339)\n\nCloses
https://github.com/elastic/kibana/issues/227309\n\n##
Summary\n\n\n![high-contrast-mode-appearance-menu](https://github.com/user-attachments/assets/2e1353b6-934b-4f01-ab5a-13639247327e)\n\nThis
adds support for contrast mode alongside in the \"Appearance
Modal\"\nalongside the existing color mode setting.\n\n* Added support
for contrast mode in the `AppearanceModal` component,\nincluding a new
`ContrastModeGroup` and updated logic to handle both\ncolor mode and
contrast mode changes.\n* Resolved a TODO and updated the
`useAppearance` hook to manage\ncontrast mode alongside color
mode\n\n\n## How to test\n\n### Cloud\n* Add the following to your
`kibana.dev.yml`\n\n```yml\nxpack.cloud.id:
\"ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=\"\n```\n\n*
Make the following change on L29 of the
`maybe_add_cloud_links.ts`\nfile\n\n```diff\n---
a/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts\n+++
b/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts\n@@
-26,6 +26,7 @@ export function maybeAddCloudLinks({ core, security,
cloud }: MaybeAddCloudLinks\n const userObservable = defer(() =>
security.authc.getCurrentUser()).pipe(\n // Check if user is a cloud
user.\n map((user) => user.elastic_cloud_user),\n+ map(() => true),\n //
If user is not defined due to an unexpected error, then fail *open*.\n
catchError(() => of(true)),\n filter((isElasticCloudUser) =>
isElasticCloudUser === true),\n```\n\n* You should now see the
\"Appearance\" link in the user menu\n\n## Release Note\n\nAdded support
for high-contrast mode through the \"Appearance modal\"\naccessible from
the User Profile icon at the top of the screen.\n\n## Checklist\n\nCheck
the PR satisfies following conditions. \n\nReviewers should verify this
PR satisfies this list as well.\n\n- [X] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n~~-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~~\n- [X] [Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n~~- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~\n~~-
[ ] This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~~\n~~- [ ] [Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~~\n- [X] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[X] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n---------\n\nCo-authored-by:
Anton Dosov
<anton.dosov@elastic.co>","sha":"f368fadd075788d34619f5daea3215034f7c0352"}}]}]
BACKPORT-->

Co-authored-by: Tim Sullivan <tsullivan@users.noreply.github.com>
Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
@tsullivan tsullivan removed the v8.19.0 label Jul 14, 2025
kertal pushed a commit to kertal/kibana that referenced this pull request Jul 25, 2025
Closes elastic#227309

## Summary


![high-contrast-mode-appearance-menu](https://github.com/user-attachments/assets/2e1353b6-934b-4f01-ab5a-13639247327e)

This adds support for contrast mode alongside in the "Appearance Modal"
alongside the existing color mode setting.

* Added support for contrast mode in the `AppearanceModal` component,
including a new `ContrastModeGroup` and updated logic to handle both
color mode and contrast mode changes.
* Resolved a TODO and updated the `useAppearance` hook to manage
contrast mode alongside color mode


## How to test

### Cloud
* Add the following to your `kibana.dev.yml`

```yml
xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM="
```

* Make the following change on L29 of the `maybe_add_cloud_links.ts`
file

```diff
--- a/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
+++ b/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
@@ -26,6 +26,7 @@ export function maybeAddCloudLinks({ core, security, cloud }: MaybeAddCloudLinks
   const userObservable = defer(() => security.authc.getCurrentUser()).pipe(
     // Check if user is a cloud user.
     map((user) => user.elastic_cloud_user),
+    map(() => true),
     // If user is not defined due to an unexpected error, then fail *open*.
     catchError(() => of(true)),
     filter((isElasticCloudUser) => isElasticCloudUser === true),
```

* You should now see the "Appearance" link in the user menu

## Release Note

Added support for high-contrast mode through the "Appearance modal"
accessible from the User Profile icon at the top of the screen.

## Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [X] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
~~- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials~~
- [X] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
~~- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~
~~- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.~~
~~- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed~~
- [X] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [X] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

---------

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:version Backport to applied version labels ci:cloud-deploy Create or update a Cloud deployment ci:project-deploy-observability Create an Observability project release_note:feature Makes this part of the condensed release notes v9.1.0 v9.2.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Appearance menu is missing new contrast settings

6 participants