@shalles/dark-mode
v1.0.3
Published
simple dark-mode for your website
Downloads
4
Readme
Shalles Dark-Mode
a simple dark-mode for your website
Usage
yarn add @shalles/dark-mode
// or
npm install @shalles/dark-mode
Single frame page
import { DarkMode } from '@shalles/dark-mode';
new DarkMode({
// rootElement: document.documentElement,
enableType: 'always', // 'system' (follow system dark mode) | 'time-range' | 'always' | 'never';
// if enableType = 'time-range', you have to set the time range of dark mode by timeRange property
// timeRange: {
// begin: 2000, // 20:00
// end: 630, // 06:30 next day
// }
});
Multi frames page
import { MultiFrameDarkMode, type EnableType, type TimeRange } from '@shalles/dark-mode';
new MultiFrameDarkMode({
// rootElement: document.documentElement,
enableType: 'time-range',
timeRange: {
begin: 2000, // 20:00
end: 630, // 06:30 next day
}
});
Reference
// @shalles/dark-mode
export type TimeRange = {
begin: number;
end: number;
};
export type EnableType = 'system' | 'time-range' | 'always' | 'never';
export type DarkModeOptions = {
enableType: EnableType;
timeRange?: TimeRange;
rootElement?: HTMLElement;
};
export { DarkMode } from './core/core';
export { MultiFrameDarkMode } from './core/frame';
export declare class DarkMode {
constructor({ enableType, timeRange, rootElement }: DarkModeOptions);
isDarkMode(): boolean | undefined;
isTimeInRange(time: Date): boolean;
setEnableType(enableType: EnableType, timeRange: TimeRange): void;
setEnableTimeRange(timeRange: TimeRange): void;
}
export declare class MultiFrameDarkMode extends DarkMode {
constructor(options: DarkModeOptions);
}