feat: add dark/light theme.

scripts/utils/darkMode.mjs

@@ -0,0 +1,40 @@
+import path from 'path';
+import { getSVGNode } from './getSVGNode.mjs';
+
+const scripts = `
+  const button = document.querySelector('#darkMode');
+  button.onclick = () => {
+    const theme = document.documentElement.dataset.colorMode;
+    document.documentElement.setAttribute('data-color-mode', theme === 'light' ? 'dark' : 'light');
+  }
+`;
+
+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,
+      }]
+    }
+  ];
+}