代码拉取完成,页面将自动刷新
export type ColorScheme = 'light' | 'dark';
export type ColorSchemeChangeEvent = CustomEvent<{ colorScheme: ColorScheme }>;
export type PermanentColorSchemeEvent = CustomEvent<{ colorScheme: ColorScheme, permanent: boolean }>;
export class DarkMode extends HTMLElement {
mode?: ColorScheme;
/**
* Defaults to not remember the last choice.
* If present remembers the last selected mode (`dark` or `light`),
* which allows the user to permanently override their usual preferred color scheme.
*/
permanent?: boolean;
/**
* Any string value that represents the label for the "dark" mode.
*/
dark?: string;
/**
* Any string value that represents the label for the "light" mode.
*/
light?: string;
}
declare global {
interface HTMLElementTagNameMap {
'dark-mode': DarkMode;
}
interface GlobalEventHandlersEventMap {
/**
* Fired when the color scheme gets changed.
*
* ```js
* const toggle = document.querySelector('dark-mode');
* document.addEventListener('colorschemechange', (e) => {
* console.log(`Color scheme changed to "${e.detail.colorScheme}".`);
* console.log(toggle.mode === 'dark' ? 'Change Theme 🌞' : 'Change Theme 🌒')
* });
* ```
*/
'colorschemechange': ColorSchemeChangeEvent;
/**
* Fired when the color scheme should be permanently remembered or not.
*
* ```js
* document.addEventListener('permanentcolorscheme', (e) => {
* console.log(`~: Color scheme changed to "${e.detail.colorScheme}" , "${e.detail.permanent}" .`);
* });
* ```
*/
'permanentcolorscheme': PermanentColorSchemeEvent;
}
namespace JSX {
interface IntrinsicElements {
'dark-mode': Partial<DarkMode> | {
style?: Partial<CSSStyleDeclaration> | React.CSSProperties;
};
}
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。