/themer.js

🌗 Automatically switch between dark and light themes at sunset and sunrise using the user's location.

Primary LanguageJavaScriptMIT LicenseMIT

Themer.js

Spice up your app with dynamic themes.

Alt Text

Features:

  • Automatic day/night switching using the sunset and sunrise times of the user's location
  • System prefers-color-scheme support
  • Android meta theme-color support
  • Custom themes
  • Manual control over everything

Demo

Examples

Quick Start

Install

# using yarn
$ yarn add themer.js

# using npm
$ npm install themer.js

Define the light and dark themes

To use the auto or system themes, you must define a light and dark Theme object.

import Themer from "themer.js";

const config = {
  "light": {
    "styles": {
      "--app-background-color": "#f1f1f1",
      "--primary-text-color": "#555"
    }
  },
  "dark": {
    "styles": {
      "--app-background-color": "#242835",
      "--primary-text-color": "#f1f1f1"
    }
  }
}

// instantiate Themer.js
const themer = new Themer(config);

Setting a theme

import Themer from "themer.js";
import { light, dark } from "./themes/index.js";

const themer = new Themer({ light, dark });

// set theme to dark
themer.set(dark);

// set theme to auto
themer.set("auto");

// set theme to system
themer.set("system");

Setting a custom theme

Pass a valid Theme object to Themer.set().

import Themer from "themer.js";

const custom = {
  "styles": {
    "--app-background-color": "#f1f1f1",
    "--primary-text-color": "#555"
  }
};

const themer = new Themer();

themer.set(custom);

API

Themer( config )

  • Arguments:

    • {Object} config

  • Details: Instantiate Themer.js.

  • Usage:

    import { light, dark } from "./themes/index.js";

const config = {
  debug: true,
  onUpdate: (theme) => console.log(theme),
  light,
  dark
};

const themer = new Themer(config);

  • See also: Config object

Themer.set( "auto" )

  • Details: Sets the active theme to light during the day and dark during the night.

  • Restrictions:

    • light and dark themes must be defined in the Config object.
    • Requires user geolocation consent.

  • Usage:

    Themer.set("auto");

Themer.set( "system" )

Themer.set( theme )

  • Arguments:

    • {Object | string} theme

  • Details: Sets the active theme.

  • Usage:

    const dark = {
  "android": "#242835",
  "styles": {
    "--app-background-color": "#242835"
  }
};

Themer.set(dark);

  • See also: Theme object

Themer.themeSupportCheck()

  • Details: Helper function to determine browser support for the system theme.

  • Returns: boolean

  • Usage:

    // Chrome 76, Firefox 67, Safari 12.1
Themer.themeSupportCheck();
↳ true

// unsupported browsers
Themer.themeSupportCheck();
↳ false

  • See also: prefers-color-scheme

Config object

Key Type Description
debug boolean Log debug console statements.
onUpdate function A callback function that returns the set theme.
light object The dark theme.
dark object The light theme.

Example:

{
  debug: true,
  onUpdate: (theme) => console.log(theme),
  "light": {
    "styles": {
      "--app-background-color": "#f1f1f1",
      "--primary-text-color": "#555"
    }
  },
  "dark": {
    "styles": {
      "--app-background-color": "#242835",
      "--primary-text-color": "#f1f1f1"
    }
  }
}

Theme object

Key Type Description
android string Sets the meta theme-color.
styles object The theme CSS variables.

Example:

{
  "android": "#f1f1f1",
  "styles": {
    "--app-background-color": "#f1f1f1",
    "--primary-text-color": "#555"
  }
}

Use the CSS variables anywhere in your CSS and it will update in real time to the active theme.

html {
  background-color: var(--app-background-color);
  color: var(--primary-text-color);
}