Themes

Like many operating systems, Emoji Button supports both a light and a dark theme. An automatic theme is also available, which will use the appropriate theme depending on the operating system's current setting.

Light

The light theme is the default. To use the light theme, specify light as the value of the theme option, or don't specify an option at all.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton({
  theme: 'light'
});

Dark

To use the dark theme, specify dark as the value of the theme option.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton({
  theme: 'dark'
});

Automatic

To use the automatic theme, specify auto as the value of the theme option.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton({
  theme: 'auto'
});

Switching the theme

To switch the theme after construction, call setTheme on the EmojiButton instance, passing it a value of light,dark, or auto.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton();

document.querySelector('#set-theme-dark').addEventListener('click', () => picker.setTheme("dark"));
document.querySelector('#set-theme-light').addEventListener('click', () => picker.setTheme("light"));
document.querySelector('#set-theme-auto').addEventListener('click', () => picker.setTheme("auto"));