Skip to content

[9.2] Fix favicon style specifity (#243351)#243442

Merged
kibanamachine merged 1 commit intoelastic:9.2from
kibanamachine:backport/9.2/pr-243351
Nov 19, 2025
Merged

[9.2] Fix favicon style specifity (#243351)#243442
kibanamachine merged 1 commit intoelastic:9.2from
kibanamachine:backport/9.2/pr-243351

Conversation

@kibanamachine
Copy link
Contributor

Backport

This will backport the following commits from main to 9.2:

Questions ?

Please refer to the Backport tool documentation

## Summary

This PR fixes the production build favicon being stuck in light mode
version.

The SVG has a media query for dark mode (`<style>@media
(prefers-color-scheme:dark){path{fill:#fff}}</style>`) but the default
(light mode) style is defined inline on the `<path>` element
(`style="fill:#1c1e23"`).
Inline styles have higher specificity than the `<style>` tag, which
causes the default color to always override dark mode variant.

This PR fixes this by moving the inline style to the `<style>` tag:
```svg
<style>path{fill:#1c1e23}@media (prefers-color-scheme:dark){path{fill:#fff}}</style>
```

Closes: elastic#241687
(cherry picked from commit 8b823ad)
@kibanamachine kibanamachine added the backport This PR is a backport of another PR label Nov 19, 2025
@kibanamachine kibanamachine enabled auto-merge (squash) November 19, 2025 08:13
@kibanamachine kibanamachine merged commit c84f343 into elastic:9.2 Nov 19, 2025
16 checks passed
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

✅ unchanged

cc @kowalczyk-krzysztof

kowalczyk-krzysztof added a commit that referenced this pull request Nov 19, 2025
# Backport

This will backport the following commits from `main` to `8.19`:
- [Fix favicon style specifity
(#243351)](#243351)

<!--- Backport version: 10.2.0 -->

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

<!--BACKPORT [{"author":{"name":"Krzysztof
Kowalczyk","email":"krzysztof.kowalczyk@elastic.co"},"sourceCommit":{"committedDate":"2025-11-19T08:05:25Z","message":"Fix
favicon style specifity (#243351)\n\n## Summary\n\nThis PR fixes the
production build favicon being stuck in light mode\nversion.\n\nThe SVG
has a media query for dark mode
(`<style>@media\n(prefers-color-scheme:dark){path{fill:#fff}}</style>`)
but the default\n(light mode) style is defined inline on the `<path>`
element\n(`style=\"fill:#1c1e23\"`).\nInline styles have higher
specificity than the `<style>` tag, which\ncauses the default color to
always override dark mode variant.\n\nThis PR fixes this by moving the
inline style to the `<style>`
tag:\n```svg\n<style>path{fill:#1c1e23}@media
(prefers-color-scheme:dark){path{fill:#fff}}</style>\n```\n\nCloses:
https://github.com/elastic/kibana/issues/241687","sha":"8b823ad7338fd344a7d8c2d38c50178035c2b7bb","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:SharedUX","backport:all-open","v9.3.0","v9.2.2","v9.1.8"],"title":"Fix
favicon CSS
specifity","number":243351,"url":"https://github.com/elastic/kibana/pull/243351","mergeCommit":{"message":"Fix
favicon style specifity (#243351)\n\n## Summary\n\nThis PR fixes the
production build favicon being stuck in light mode\nversion.\n\nThe SVG
has a media query for dark mode
(`<style>@media\n(prefers-color-scheme:dark){path{fill:#fff}}</style>`)
but the default\n(light mode) style is defined inline on the `<path>`
element\n(`style=\"fill:#1c1e23\"`).\nInline styles have higher
specificity than the `<style>` tag, which\ncauses the default color to
always override dark mode variant.\n\nThis PR fixes this by moving the
inline style to the `<style>`
tag:\n```svg\n<style>path{fill:#1c1e23}@media
(prefers-color-scheme:dark){path{fill:#fff}}</style>\n```\n\nCloses:
https://github.com/elastic/kibana/issues/241687","sha":"8b823ad7338fd344a7d8c2d38c50178035c2b7bb"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/243351","number":243351,"mergeCommit":{"message":"Fix
favicon style specifity (#243351)\n\n## Summary\n\nThis PR fixes the
production build favicon being stuck in light mode\nversion.\n\nThe SVG
has a media query for dark mode
(`<style>@media\n(prefers-color-scheme:dark){path{fill:#fff}}</style>`)
but the default\n(light mode) style is defined inline on the `<path>`
element\n(`style=\"fill:#1c1e23\"`).\nInline styles have higher
specificity than the `<style>` tag, which\ncauses the default color to
always override dark mode variant.\n\nThis PR fixes this by moving the
inline style to the `<style>`
tag:\n```svg\n<style>path{fill:#1c1e23}@media
(prefers-color-scheme:dark){path{fill:#fff}}</style>\n```\n\nCloses:
https://github.com/elastic/kibana/issues/241687","sha":"8b823ad7338fd344a7d8c2d38c50178035c2b7bb"}},{"branch":"9.2","label":"v9.2.2","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/243442","number":243442,"state":"MERGED","mergeCommit":{"sha":"c84f3438981763ca4d68a27d9328c7b135c887c6","message":"[9.2]
Fix favicon style specifity (#243351) (#243442)\n\n# Backport\n\nThis
will backport the following commits from `main` to `9.2`:\n- [Fix
favicon style
specifity\n(#243351)](https://github.com/elastic/kibana/pull/243351)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Krzysztof Kowalczyk
<krzysztof.kowalczyk@elastic.co>"}},{"branch":"9.1","label":"v9.1.8","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/243441","number":243441,"state":"MERGED","mergeCommit":{"sha":"795e7129085fbdcd8810552925e09b6942ebbbd8","message":"[9.1]
Fix favicon style specifity (#243351) (#243441)\n\n# Backport\n\nThis
will backport the following commits from `main` to `9.1`:\n- [Fix
favicon style
specifity\n(#243351)](https://github.com/elastic/kibana/pull/243351)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>"}}]}] BACKPORT-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

3 participants