Appearence

The Appearence class manages the theme of anything that can have an appearance.

• The theme will persist to a storage of your choice, by default it will be stored in memory.
• The default theme is system, which means that the theme will be dark or light depending on the system theme.

Properties

• storage (Storage): The storage that will be used to store the theme. It could be any storage system that conforms to the Storage interface. The storage system is provided as a parameter to the constructor, and if not provided, it defaults to MemoryStorage.
• storageKey (string): The key that will be used to store the theme in the storage. It can be any string value. The storage key is also provided as a parameter to the constructor, and if not provided, it defaults to a constant DEFAULT_APPEARENCE_STORAGE_KEY.
• theme (Theme): The theme. It can be ‘dark’, ‘light’, or ‘system’. The ‘system’ value means that the theme will be determined by the system settings. The theme is provided as a parameter to the constructor, and if not provided, it defaults to ‘system’.

Getters

• themeByPrefersColorScheme (Theme): Returns the theme depending on the system theme. If the system theme is dark, it returns ‘dark’. If the system theme is light or not defined, it returns ‘light’.
• isThemeDark (boolean): Checks if the theme is dark. It returns true if the theme is ‘dark’. If the theme is ‘system’, it checks the system theme. If the system theme is dark, it returns true. In all other cases, it returns false.
• isThemeLight (boolean): Checks if the theme is light. It returns true if the theme is ‘light’. If the theme is ‘system’, it checks the system theme. If the system theme is light, it returns true. In all other cases, it returns false.
• isThemeSystem (boolean): Checks if the theme is system. It returns true if the theme is ‘system’, and false otherwise.

Initialization

The initialize method retrieves the theme from the storage and sets it.

import { Appearence } from '@aracna/core';

const appearence = new Appearence();

async () => {
  await appearence.initialize();
  console.log('will log "system"', appearence.theme);

  appearence.setTheme('dark');
  await appearence.store();
  appearence.setTheme('light');
  await appearence.initialize();

  // will log "dark"
  console.log(appearence.theme);
};

Set the theme

The setTheme method sets the theme and emits a ‘change-theme’ event.

import { Appearence } from '@aracna/core';

const appearence = new Appearence();

// will log "system"
console.log(appearence.theme);

appearence.setTheme('dark');

// will log "dark"
console.log(appearence.theme);

Switch between dark and light theme

The toggleTheme method toggles the theme between dark and light. If the theme is set to system, it will be set to dark or light depending on the system theme.

import { Appearence } from '@aracna/core';

const appearence = new Appearence();

// will log "system"
console.log(appearence.theme);

appearence.toggleTheme();

// will log "dark" or "light" depending on the opposite of your system theme
console.log(appearence.theme);

Store the theme

The store method stores the theme in the storage.

import { Appearence, MemoryStorage } from '@aracna/core';

const appearence = new Appearence();

(async () => {
  appearence.setTheme('dark');
  await appearence.store();

  // will log { theme: "dark" }
  console.log(MemoryStorage.get('appearence'));
})();

Listen to theme changes

The Appearence class emits a ‘change-theme’ event when the theme changes. You can listen to this event and do something when the theme changes.

import { Appearence } from '@aracna/core';

const appearence = new Appearence();

appearence.on('change-theme', (theme) => {
  // will log "dark"
  console.log(theme);
});

appearence.setTheme('dark');