// @ts-ignore
declare global {
interface HTMLElementTagNameMap {
'markdown-style': MarkdownStyle;
}
}
const __TEMPLATE__ = document.createElement('template');
__TEMPLATE__.innerHTML = `
`;
type Theme = 'light' | 'dark';
class MarkdownStyle extends HTMLElement {
private shadow: ShadowRoot;
private defaultTheme: Theme;
get theme() {
const value = this.getAttribute('theme');
return value === null ? '' : value;
}
set theme(name: string) {
this.setAttribute('theme', name);
}
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
this.shadow.appendChild(__TEMPLATE__.content.cloneNode(true));
const style = Array.prototype.slice
.call(this.shadow.children)
.find((item: HTMLStyleElement) => item.tagName === 'STYLE');
if (style) {
const id = '__MARKDOWN_STYLE__';
const findStyle = document.getElementById(id);
if (!findStyle) {
style.id = id;
document.head.append(style);
}
}
}
connectedCallback() {
const disableThemeAutoSwitch = this.getAttribute('theme-auto-switch-disabled');
if (disableThemeAutoSwitch == '' || (disableThemeAutoSwitch && disableThemeAutoSwitch.toLowerCase() === 'true')) {
return;
}
if (!this.theme) {
const { colorMode } = document.documentElement.dataset as Record;
this.theme = colorMode;
const observer = new MutationObserver((mutationsList, observer) => {
this.theme = document.documentElement.dataset.colorMode as Theme;
});
observer.observe(document.documentElement, { attributes: true });
window.matchMedia('(prefers-color-scheme: light)').onchange = (event) => {
this.theme = event.matches ? 'light' : 'dark';
};
window.matchMedia('(prefers-color-scheme: dark)').onchange = (event) => {
this.theme = event.matches ? 'dark' : 'light';
};
}
}
}
customElements.define('markdown-style', MarkdownStyle);