heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

merge: allow themes to specify a font (#230)

Browse source 
Closes #225
Closes #25
This commit is contained in:
Marie 2023-12-19 11:35:24 +01:00
commit cf3299312a
3 changed files with 54 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

23
packages/backend/src/server/web/boot.js
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 適用