allow a theme to specify a font - #225

This commit is contained in:
Gianni Ceccarelli 2023-12-14 13:58:07 +00:00
parent c1c3793a02
commit 7f2a66f262
3 changed files with 54 additions and 2 deletions

View file

@ -106,8 +106,29 @@
//#region Theme
const theme = localStorage.getItem('theme');
const themeFontFaceName = 'sharkey-theme-font-face';
if (theme) {
for (const [k, v] of Object.entries(JSON.parse(theme))) {
let existingFontFace;
document.fonts.forEach((v,k,s)=>{if (v.family === themeFontFaceName) existingFontFace=v;});
if (existingFontFace) document.fonts.delete(existingFontFace);
const themeProps = JSON.parse(theme);
const fontFaceSrc = themeProps.fontFaceSrc;
const fontFaceOpts = themeProps.fontFaceOpts || {};
if (fontFaceSrc) {
const fontFace = new FontFace(
themeFontFaceName,
fontFaceSrc, fontFaceOpts || {},
);
document.fonts.add(fontFace);
fontFace.load().catch(
(failure) => {
console.log(failure)
}
);
}
for (const [k, v] of Object.entries(themeProps)) {
if (k.startsWith('font')) continue;
document.documentElement.style.setProperty(`--${k}`, v.toString());
// HTMLの theme-color 適用