colin
/
sticky-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change app theme color with theme toggle

This commit is contained in:
Dallas Hoffman 2023-09-26 00:21:51 -04:00
parent be1270c10e
commit f9aadaf492
No known key found for this signature in database
2 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@ -19,7 +19,7 @@
<meta name="msapplication-TileColor" content="#ead40b" /> <meta name="msapplication-TileColor" content="#ead40b" />
<meta name="apple-mobile-web-app-title" content="Notes" /> <meta name="apple-mobile-web-app-title" content="Notes" />
<meta name="application-name" content="Notes" /> <meta name="application-name" content="Notes" />
<meta name="theme-color" content="#11191f" /> <meta name="theme-color" content="#18232c" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

3
src/lib/stores/theme.ts
View File

@ -9,9 +9,12 @@ export class ThemeStore implements Readable<Theme> {
); );
constructor() { constructor() {
const themeMetaTag = document.querySelector('meta[name="theme-color"]');
this.theme.subscribe((newTheme) => { this.theme.subscribe((newTheme) => {
document.documentElement.dataset.theme = newTheme; document.documentElement.dataset.theme = newTheme;
localStorage.setItem('theme', newTheme); localStorage.setItem('theme', newTheme);
themeMetaTag?.setAttribute('content', newTheme === 'dark' ? '#18232c' : '#fbfbfc');
}); });
} }