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);
}