feat: sync page theme color metadata with active theme bg (#1623)

This commit is contained in:
Aman Harwara
2022-09-23 20:53:00 +05:30
committed by GitHub
parent 3c0d4fac76
commit 5de6f459c1
2 changed files with 17 additions and 1 deletions

View File

@@ -5,6 +5,7 @@
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="viewport-fit=cover, width=device-width, initial-scale=1" name="viewport" />
<meta content="#ffffff" name="theme-color" />
<link rel="stylesheet" href="web-src/app.css" />
<script>
window.defaultSyncServer = "https://api.standardnotes.com";
@@ -22,4 +23,4 @@
<body>
</body>
</html>
</html>

View File

@@ -287,9 +287,24 @@ export class ThemeManager extends AbstractService {
link.rel = 'stylesheet'
link.media = 'screen,print'
link.id = theme.uuid
link.onload = this.syncThemeColorMetadata
document.getElementsByTagName('head')[0].appendChild(link)
}
/**
* Syncs the active theme's background color to the 'theme-color' meta tag
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
*/
private syncThemeColorMetadata() {
const themeColorMetaElement = document.querySelector('meta[name="theme-color"]')
if (!themeColorMetaElement) {
return
}
const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--sn-stylekit-background-color')
themeColorMetaElement.setAttribute('content', bgColor ? bgColor.trim() : '#ffffff')
}
private deactivateTheme(uuid: string) {
const element = document.getElementById(uuid) as HTMLLinkElement
if (element) {