mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
47f95cb294
Co-authored-by: Helmut K. C. Tessarek <tessarek@evermeet.cx> Co-authored-by: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
// This component is perhaps a bit of a hack but the approach should be
|
|
// reliable. It converts the current (JS) theme to CSS, and add it to the HEAD
|
|
// tag. The component itself doesn't render anything where it's located (just an
|
|
// empty invisible DIV), so it means it could be put anywhere and would have the
|
|
// same effect.
|
|
//
|
|
// It's still reliable because the lifecyle of adding the CSS and removing on
|
|
// unmount is handled properly. There should only be one such component on the
|
|
// page.
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect';
|
|
import themeToCss from '@joplin/lib/services/style/themeToCss';
|
|
import { themeStyle } from '@joplin/lib/theme';
|
|
|
|
interface Props {
|
|
themeId: any;
|
|
}
|
|
|
|
export default function(props: Props): any {
|
|
const [styleSheetContent, setStyleSheetContent] = useState('');
|
|
|
|
useAsyncEffect(async (event: AsyncEffectEvent) => {
|
|
const theme = themeStyle(props.themeId);
|
|
const themeCss = themeToCss(theme);
|
|
if (event.cancelled) return;
|
|
setStyleSheetContent(themeCss);
|
|
}, [props.themeId]);
|
|
|
|
useEffect(() => {
|
|
const element = document.createElement('style');
|
|
element.setAttribute('id', 'main-theme-stylesheet-container');
|
|
document.head.appendChild(element);
|
|
element.appendChild(document.createTextNode(styleSheetContent));
|
|
return () => {
|
|
document.head.removeChild(element);
|
|
};
|
|
}, [styleSheetContent]);
|
|
|
|
return <div style={{ display: 'none' }}></div>;
|
|
}
|