rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/mobile/html/Web.bundle/src/index.html
View File

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

15
packages/ui-services/src/Theme/ThemeManager.ts
View File

@@ -287,9 +287,24 @@ export class ThemeManager extends AbstractService {
link.rel = 'stylesheet' link.rel = 'stylesheet'
link.media = 'screen,print' link.media = 'screen,print'
link.id = theme.uuid link.id = theme.uuid
link.onload = this.syncThemeColorMetadata
document.getElementsByTagName('head')[0].appendChild(link) 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) { private deactivateTheme(uuid: string) {
const element = document.getElementById(uuid) as HTMLLinkElement const element = document.getElementById(uuid) as HTMLLinkElement
if (element) { if (element) {