Skip to content
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.

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

Respect system dark mode in ESQL editor #200233

Merged
merged 8 commits into from
Nov 18, 2024
Merged

Conversation

smith
Copy link
Contributor

@smith smith commented Nov 14, 2024

When uiSettings.overrides.theme:darkMode: true is set, the ESQL editor uses dark mode.

When uiSettings.overrides.theme:darkMode: system is set, the ESQL editor uses light mode, while the rest of the UI uses dark mode.

Update the ESQL theme creation to create both light and dark variations of the theme at startup and use the theme in React component to determine which ESQL theme to use at runtime.

When `uiSettings.overrides.theme:darkMode: true` is set, the ESQL editor uses dark mode.

When `uiSettings.overrides.theme:darkMode: system` is set, the ESQL editor uses light mode, while the rest of the UI uses dark mode.

Update the ESQL theme creation to create both light and dark variations of the theme at startup and use the theme in React component to determine which ESQL theme to use at runtime.
@smith smith requested review from a team as code owners November 14, 2024 17:56
@smith smith added backport:all-open Backport to all branches that could still receive a release release_note:fix labels Nov 14, 2024
@stratoula stratoula added v9.0.0 v8.17.0 backport:version Backport to applied version labels Feature:ES|QL ES|QL related features in Kibana Team:ESQL ES|QL related features in Kibana and removed backport:all-open Backport to all branches that could still receive a release labels Nov 18, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-esql (Team:ESQL)

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
@kbn/monaco 123 124 +1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
esql 183.9KB 184.0KB +57.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
kbnUiSharedDeps-srcJs 3.4MB 3.4MB -60.0B
Unknown metric groups

API count

id before after diff
@kbn/monaco 123 124 +1

References to deprecated APIs

id before after diff
@kbn/monaco 10 8 -2

History

Copy link
Contributor

@stratoula stratoula left a comment

Choose a reason for hiding this comment

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

Changes LGTM from the ES|QL side. (I updated the jests tests but I havent contributed mor than this)

Copy link
Contributor

@eokoneyo eokoneyo left a comment

Choose a reason for hiding this comment

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

Verified that when we have uiSettings.overrides.theme:darkMode: system, if appearance is set to dark mode, the ESQL Editor is rendered using the dark theme.

@smith smith merged commit f48ded9 into elastic:main Nov 18, 2024
23 checks passed
@smith smith deleted the nls/esql-system-dark branch November 18, 2024 15:49
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

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

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Nov 18, 2024
When `uiSettings.overrides.theme:darkMode: true` is set, the ESQL editor
uses dark mode.

When `uiSettings.overrides.theme:darkMode: system` is set, the ESQL
editor uses light mode, while the rest of the UI uses dark mode.

Update the ESQL theme creation to create both light and dark variations
of the theme at startup and use the theme in React component to
determine which ESQL theme to use at runtime.

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>
(cherry picked from commit f48ded9)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x

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 Nov 18, 2024
# Backport

This will backport the following commits from `main` to `8.x`:
- [Respect system dark mode in ESQL editor
(#200233)](#200233)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Nathan L
Smith","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-18T15:49:10Z","message":"Respect
system dark mode in ESQL editor (#200233)\n\nWhen
`uiSettings.overrides.theme:darkMode: true` is set, the ESQL
editor\r\nuses dark mode.\r\n\r\nWhen
`uiSettings.overrides.theme:darkMode: system` is set, the ESQL\r\neditor
uses light mode, while the rest of the UI uses dark mode.\r\n\r\nUpdate
the ESQL theme creation to create both light and dark variations\r\nof
the theme at startup and use the theme in React component
to\r\ndetermine which ESQL theme to use at
runtime.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>\r\nCo-authored-by:
Stratoula Kalafateli
<[email protected]>","sha":"f48ded9686505d63fe40427c26d6f2b22e462fa0","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Feature:ES|QL","Team:ESQL","backport:version","v8.17.0"],"title":"Respect
system dark mode in ESQL
editor","number":200233,"url":"https://github.com/elastic/kibana/pull/200233","mergeCommit":{"message":"Respect
system dark mode in ESQL editor (#200233)\n\nWhen
`uiSettings.overrides.theme:darkMode: true` is set, the ESQL
editor\r\nuses dark mode.\r\n\r\nWhen
`uiSettings.overrides.theme:darkMode: system` is set, the ESQL\r\neditor
uses light mode, while the rest of the UI uses dark mode.\r\n\r\nUpdate
the ESQL theme creation to create both light and dark variations\r\nof
the theme at startup and use the theme in React component
to\r\ndetermine which ESQL theme to use at
runtime.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>\r\nCo-authored-by:
Stratoula Kalafateli
<[email protected]>","sha":"f48ded9686505d63fe40427c26d6f2b22e462fa0"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200233","number":200233,"mergeCommit":{"message":"Respect
system dark mode in ESQL editor (#200233)\n\nWhen
`uiSettings.overrides.theme:darkMode: true` is set, the ESQL
editor\r\nuses dark mode.\r\n\r\nWhen
`uiSettings.overrides.theme:darkMode: system` is set, the ESQL\r\neditor
uses light mode, while the rest of the UI uses dark mode.\r\n\r\nUpdate
the ESQL theme creation to create both light and dark variations\r\nof
the theme at startup and use the theme in React component
to\r\ndetermine which ESQL theme to use at
runtime.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>\r\nCo-authored-by:
Stratoula Kalafateli
<[email protected]>","sha":"f48ded9686505d63fe40427c26d6f2b22e462fa0"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Nathan L Smith <[email protected]>
jesuswr pushed a commit to jesuswr/kibana that referenced this pull request Nov 18, 2024
When `uiSettings.overrides.theme:darkMode: true` is set, the ESQL editor
uses dark mode.

When `uiSettings.overrides.theme:darkMode: system` is set, the ESQL
editor uses light mode, while the rest of the UI uses dark mode.

Update the ESQL theme creation to create both light and dark variations
of the theme at startup and use the theme in React component to
determine which ESQL theme to use at runtime.

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Dec 12, 2024
When `uiSettings.overrides.theme:darkMode: true` is set, the ESQL editor
uses dark mode.

When `uiSettings.overrides.theme:darkMode: system` is set, the ESQL
editor uses light mode, while the rest of the UI uses dark mode.

Update the ESQL theme creation to create both light and dark variations
of the theme at startup and use the theme in React component to
determine which ESQL theme to use at runtime.

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>
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 Feature:ES|QL ES|QL related features in Kibana release_note:fix Team:ESQL ES|QL related features in Kibana v8.17.0 v9.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants