enhancement: dynamic theme-color meta tag from theme brand color#13509
Conversation
|
Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes. |
|
|
|
@LukasHirt PTAL! |
|
|
||
| // Get brand color from CSS variable set by theme | ||
| const themeColor = ref('#375f7E') | ||
| onMounted(() => { |
There was a problem hiding this comment.
Using this hook will not respect switching theme in the account settings.
| // Get brand color from CSS variable set by theme | ||
| const themeColor = ref('#375f7E') | ||
| onMounted(() => { | ||
| const brandColor = getComputedStyle(document.documentElement) |
There was a problem hiding this comment.
Why use this instead of
const themeColor = computed(
() => currentTheme.value.designTokens.colorPalette['swatch-brand-default']
)This would give you the exact value of the theme color and you do not need to do the getComputedStyle.
There was a problem hiding this comment.
Great suggestion, switched to using computed() with the theme store directly.
- Switch from onMounted + getComputedStyle to computed() with theme store - Theme-color now updates reactively when user switches themes
|
@LukasHirt PTAL! |
|
|
@priyanshuharshbodhi1 before we can merge this PR, the license needs to be signed. You can do so via the CLA assistant in this PR. |
Description
Dynamic theme-color meta tag using the brand color from the loaded theme via
getComputedStyle().Related Issue
Motivation and Context
Safari uses
<meta name="theme-color">to style the tab bar. The hardcoded value didn't match custom themes.How Has This Been Tested?
<head>to confirm theme-color meta tag is presentTypes of changes