axentix/src/components/theme/theme.ts

Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.

import { createEvent, isDarkMode } from '../../utils/utilities';
import { Forms } from '../forms/index';

export let themeMode = 'system';
export let theme = '';
export let enabled = false;

export const enable = () => {
  enabled = true;
  toggleLocalTheme();
};

export const disable = () => (enabled = false);

export const toggle = (forceTheme = 'system') => {
  if (!enabled) return;

  themeMode = forceTheme;

  if (forceTheme === 'system') {
    forceTheme = isDarkMode() ? 'dark' : 'light';
    localStorage.removeItem('ax-theme');
  }

  if (theme) document.documentElement.classList.remove(theme);
  theme = `theme-${forceTheme}`;
  document.documentElement.classList.add(theme);

  Forms.updateInputs();

  createEvent(document.documentElement, 'theme.change', { theme });

  if (themeMode !== 'system') localStorage.setItem('ax-theme', theme);
};

const toggleLocalTheme = () => {
  const localTheme = localStorage.getItem('ax-theme');
  if (localTheme) toggle(localTheme.replace('theme-', ''));
  else toggle(themeMode);
};

const setup = () => {
  window
    .matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', () => themeMode === 'system' && toggle('system'));

  toggleLocalTheme();
};

document.addEventListener('DOMContentLoaded', setup);