reference/scripts/utils/darkMode.mjs

import path from 'path';
import { getSVGNode } from './getSVGNode.mjs';

const scripts = `
  const LOCAL_NANE = '_dark_mode_theme_'
  const rememberedValue = localStorage.getItem(LOCAL_NANE);
  if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
    document.documentElement.setAttribute('data-color-mode', rememberedValue);
  }
  const button = document.querySelector('#darkMode');
  button.onclick = () => {
    const theme = document.documentElement.dataset.colorMode;
    const mode = theme === 'light' ? 'dark' : 'light';
    document.documentElement.setAttribute('data-color-mode', mode);
    localStorage.setItem(LOCAL_NANE, mode);
  }
`;

const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');

export function darkMode() {
  const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
  const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
  const sunNode = getSVGNode(iconSunPath)
  const moonNode = getSVGNode(iconMoonPath)
  return [
    {
      type: 'element',
      tagName: 'button',
      properties: {
        id: 'darkMode',
        type: 'button'
      },
      children: [
        ...sunNode,
        ...moonNode
      ]
    }, {
      type: 'element',
      tagName: 'script',
      children: [{
        type: 'text',
        value: scripts,
      }]
    }
  ];
}