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

allow a theme to specify a font - #225

Browse source
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
Show stats 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 適用

31
packages/frontend/src/scripts/theme.ts
View file

@ -54,6 +54,8 @@ export const getBuiltinThemesRef = () => {
return builtinThemes;
};
const themeFontFaceName = 'sharkey-theme-font-face';
let timeout = null;
export function applyTheme(theme: Theme, persist = true) {
@ -84,7 +86,32 @@ export function applyTheme(theme: Theme, persist = true) {
}
}
let existingFontFace;
document.fonts.forEach(
(fontFace) => {
if (fontFace.family === themeFontFaceName) existingFontFace = fontFace;
},
);
if (existingFontFace) document.fonts.delete(existingFontFace);
const fontFaceSrc = props.fontFaceSrc;
const fontFaceOpts = props.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(props)) {
if (k.startsWith('font')) continue;
document.documentElement.style.setProperty(`--${k}`, v.toString());
}
@ -128,6 +155,10 @@ function compile(theme: Theme): Record<string, string> {
for (const [k, v] of Object.entries(theme.props)) {
if (k.startsWith('$')) continue; // ignore const
if (k.startsWith('font')) { // font specs are different
props[k] = v;
continue;
}
props[k] = v.startsWith('"') ? v.replace(/^"\s*/, '') : genValue(getColor(v));
}

2
packages/frontend/src/style.scss
View file

@ -62,7 +62,7 @@ html {
accent-color: var(--accent);
overflow: auto;
overflow-wrap: break-word;
font-family: 'Lexend', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
font-family: 'sharkey-theme-font-face', 'Lexend', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
font-size: 14px;
line-height: 1.35;
text-size-adjust: 100%;