feat: support switch between light & dark themes with the system. (#69)

packages/action/dist/action.js

@@ -98054,7 +98054,8 @@ function markdownStyle(child, markdownStyleTheme) {
     className: 'markdown-style'
   };
   if (markdownStyleTheme) {
-    properties.theme = markdownStyleTheme;
+    // properties.theme = markdownStyleTheme;
+    properties.mode = markdownStyleTheme;
   }
   return [{
     type: 'element',
@@ -98159,12 +98160,24 @@ function copyElement() {
   };
 }
 ;// CONCATENATED MODULE: ../cli/lib/nodes/dark-mode.js
+
 var dark_mode_scriptString = "const t=document;const e=\"_dark_mode_theme_\";const s=\"permanent\";const o=\"colorschemechange\";const i=\"permanentcolorscheme\";const h=\"light\";const r=\"dark\";const n=(t,e,s=e)=>{Object.defineProperty(t,s,{enumerable:true,get(){const t=this.getAttribute(e);return t===null?\"\":t},set(t){this.setAttribute(e,t)}})};const c=(t,e,s=e)=>{Object.defineProperty(t,s,{enumerable:true,get(){return this.hasAttribute(e)},set(t){if(t){this.setAttribute(e,\"\")}else{this.removeAttribute(e)}}})};class a extends HTMLElement{static get observedAttributes(){return[\"mode\",h,r,s]}LOCAL_NANE=e;constructor(){super();this.t()}connectedCallback(){n(this,\"mode\");n(this,r);n(this,h);c(this,s);const a=localStorage.getItem(e);if(a&&[h,r].includes(a)){this.mode=a;this.permanent=true}if(this.permanent&&!a){localStorage.setItem(e,this.mode)}const l=[h,r].includes(a);if(this.permanent&&a){this.o()}else{if(window.matchMedia&&window.matchMedia(\"(prefers-color-scheme: dark)\").matches){this.mode=r;this.o()}if(window.matchMedia&&window.matchMedia(\"(prefers-color-scheme: light)\").matches){this.mode=h;this.o()}}if(!this.permanent&&!l){window.matchMedia(\"(prefers-color-scheme: light)\").onchange=t=>{this.mode=t.matches?h:r;this.o()};window.matchMedia(\"(prefers-color-scheme: dark)\").onchange=t=>{this.mode=t.matches?r:h;this.o()}}const d=new MutationObserver(((s,h)=>{this.mode=t.documentElement.dataset.colorMode;if(this.permanent&&l){localStorage.setItem(e,this.mode);this.i(i,{permanent:this.permanent})}this.h();this.i(o,{colorScheme:this.mode})}));d.observe(t.documentElement,{attributes:true});this.i(o,{colorScheme:this.mode});this.h()}attributeChangedCallback(t,s,o){if(t===\"mode\"&&s!==o&&[h,r].includes(o)){const t=localStorage.getItem(e);if(this.mode===t){this.mode=o;this.h();this.o()}else if(this.mode&&this.mode!==t){this.h();this.o()}}else if((t===h||t===r)&&s!==o){this.h()}if(t===\"permanent\"&&typeof this.permanent===\"boolean\"){this.permanent?localStorage.setItem(e,this.mode):localStorage.removeItem(e)}}o(){t.documentElement.setAttribute(\"data-color-mode\",this.mode)}h(){this.icon.textContent=this.mode===h?\"\uD83C\uDF12\":\"\uD83C\uDF1E\";this.text.textContent=this.mode===h?this.getAttribute(r):this.getAttribute(h)}t(){var s=this.attachShadow({mode:\"open\"});this.label=t.createElement(\"span\");this.label.setAttribute(\"class\",\"wrapper\");this.label.onclick=()=>{this.mode=this.mode===h?r:h;if(this.permanent){localStorage.setItem(e,this.mode)}this.o();this.h()};s.appendChild(this.label);this.icon=t.createElement(\"span\");this.label.appendChild(this.icon);this.text=t.createElement(\"span\");this.label.appendChild(this.text);const o=`\n[data-color-mode*='dark'], [data-color-mode*='dark'] body {\n  color-scheme: dark;\n  --color-theme-bg: #0d1117;\n  --color-theme-text: #c9d1d9;\n  background-color: var(--color-theme-bg);\n  color: var(--color-theme-text);\n}\n\n[data-color-mode*='light'], [data-color-mode*='light'] body {\n  color-scheme: light;\n  --color-theme-bg: #fff;\n  --color-theme-text: #24292f;\n  background-color: var(--color-theme-bg);\n  color: var(--color-theme-text);\n}`;const i=\"_dark_mode_style_\";const n=t.getElementById(i);if(!n){var c=t.createElement(\"style\");c.id=i;c.textContent=o;t.head.appendChild(c)}var a=t.createElement(\"style\");a.textContent=`\n    .wrapper { cursor: pointer; user-select: none; position: relative; }\n    .wrapper > span + span { margin-left: .4rem; }\n    `;s.appendChild(a)}i(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:true,composed:true,detail:e}))}}customElements.define(\"dark-mode\",a);";
 /**
  * @wcj/dark-mode@1.0.14
  * https://github.com/jaywcjlove/dark-mode
  */
-function darkMode() {
+function darkMode(mode) {
+  var properties = {
+    style: 'position: fixed; top: 8px; left: 10px; z-index: 999;',
+    dark: 'Dark',
+    light: 'Light'
+  };
+  if (mode && mode !== 'auto') {
+    properties.permanent = 'true';
+  }
+  if (mode === false || mode === 'false') {
+    properties.style = properties.style + 'display: none;';
+  }
   return [{
     type: 'element',
     tagName: 'script',
@@ -98178,12 +98191,7 @@ function darkMode() {
   }, {
     type: 'element',
     tagName: 'dark-mode',
-    properties: {
-      permanent: 'true',
-      style: 'position: fixed; top: 8px; left: 10px; z-index: 999;',
-      dark: 'Dark',
-      light: 'Light'
-    },
+    properties: _objectSpread2({}, properties),
     children: []
   }];
 }
@@ -98225,13 +98233,18 @@ function lib_create_create() {
       }
     }], [rehypeSlug], [rehypeAutolinkHeadings], [rehypeFormat]],
     rewrite: function rewrite(node, index, parent) {
+      if (node.type == 'element' && node.tagName === 'html') {
+        if (markdownStyleTheme) {
+          node.properties = node.properties || {};
+          node.properties['data-color-mode'] = markdownStyleTheme;
+        }
+      }
       if (node.type == 'element' && node.tagName === 'body' || !document && node.type === 'root') {
         node.children = markdownStyle(node.children, markdownStyleTheme, wrapperStyle);
-        if (darkModeTheme) {
-          darkMode().forEach(function (item) {
-            return node.children.unshift(item);
-          });
-        }
+        darkMode(darkModeTheme).forEach(function (item) {
+          return node.children.unshift(item);
+        });
+        if (darkModeTheme) {}
       }
       if (options['github-corners'] && (document && node.type == 'element' && node.tagName === 'body' || !document && node.type === 'root')) {
         node.children = Array.isArray(node.children) ? node.children : [];

packages/cli/README.md

@@ -153,6 +153,9 @@ Example:
   npx markdown-to-html-cli
   npx markdown-to-html-cli --markdown="Hello World!"
   npx markdown-to-html-cli --no-dark-mode
+  npx markdown-to-html-cli --dark-mode auto
+  npx markdown-to-html-cli --dark-mode auto --markdown-style-theme dark
+  npx markdown-to-html-cli --no-dark-mode --markdown-style-theme dark
   npx markdown-to-html-cli --markdown-style-theme dark
   npx markdown-to-html-cli --github-corners https://github.com/jaywcjlove/markdown-to-html-cli
   npx markdown-to-html-cli --github-corners https://github.com/jaywcjlove --github-corners-fork

packages/cli/src/create.ts

@@ -40,10 +40,16 @@ export function create(options: MDToHTMLOptions = {}) {
       [rehypeFormat],
     ],
     rewrite: (node, index, parent) => {
+      if (node.type == 'element' && node.tagName === 'html') {
+        if (markdownStyleTheme) {
+          node.properties = node.properties || {};
+          node.properties['data-color-mode'] = markdownStyleTheme;
+        }
+      }
       if ((node.type == 'element' && node.tagName === 'body') || (!document && node.type === 'root')) {
         node.children = markdownStyle(node.children as any, markdownStyleTheme, wrapperStyle);
+        darkMode(darkModeTheme).forEach(item => node.children.unshift(item));
         if (darkModeTheme) {
-          darkMode().forEach(item => node.children.unshift(item));
         }
       }
       if (options['github-corners'] && ((document && node.type == 'element' && node.tagName === 'body') || (!document && node.type === 'root'))) {

packages/cli/src/index.ts

@@ -18,7 +18,7 @@ export interface RunArgvs extends Omit<ParsedArgs, '_'>  {
   /** Github corners style. */
   'github-corners-fork'?: boolean;
   /** Disable light and dark theme styles button. */
-  'dark-mode'?: boolean;
+  'dark-mode'?: boolean | 'auto';
   /** Setting markdown-style light/dark theme. */
   'markdown-style-theme'?: 'dark' | 'light';
   /** Markdown string. */

packages/cli/src/nodes/dark-mode.ts

@@ -1,12 +1,23 @@
-import { Element } from 'hast';
+import { Element, Properties } from 'hast';
 
 const scriptString = `const t=document;const e="_dark_mode_theme_";const s="permanent";const o="colorschemechange";const i="permanentcolorscheme";const h="light";const r="dark";const n=(t,e,s=e)=>{Object.defineProperty(t,s,{enumerable:true,get(){const t=this.getAttribute(e);return t===null?"":t},set(t){this.setAttribute(e,t)}})};const c=(t,e,s=e)=>{Object.defineProperty(t,s,{enumerable:true,get(){return this.hasAttribute(e)},set(t){if(t){this.setAttribute(e,"")}else{this.removeAttribute(e)}}})};class a extends HTMLElement{static get observedAttributes(){return["mode",h,r,s]}LOCAL_NANE=e;constructor(){super();this.t()}connectedCallback(){n(this,"mode");n(this,r);n(this,h);c(this,s);const a=localStorage.getItem(e);if(a&&[h,r].includes(a)){this.mode=a;this.permanent=true}if(this.permanent&&!a){localStorage.setItem(e,this.mode)}const l=[h,r].includes(a);if(this.permanent&&a){this.o()}else{if(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches){this.mode=r;this.o()}if(window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches){this.mode=h;this.o()}}if(!this.permanent&&!l){window.matchMedia("(prefers-color-scheme: light)").onchange=t=>{this.mode=t.matches?h:r;this.o()};window.matchMedia("(prefers-color-scheme: dark)").onchange=t=>{this.mode=t.matches?r:h;this.o()}}const d=new MutationObserver(((s,h)=>{this.mode=t.documentElement.dataset.colorMode;if(this.permanent&&l){localStorage.setItem(e,this.mode);this.i(i,{permanent:this.permanent})}this.h();this.i(o,{colorScheme:this.mode})}));d.observe(t.documentElement,{attributes:true});this.i(o,{colorScheme:this.mode});this.h()}attributeChangedCallback(t,s,o){if(t==="mode"&&s!==o&&[h,r].includes(o)){const t=localStorage.getItem(e);if(this.mode===t){this.mode=o;this.h();this.o()}else if(this.mode&&this.mode!==t){this.h();this.o()}}else if((t===h||t===r)&&s!==o){this.h()}if(t==="permanent"&&typeof this.permanent==="boolean"){this.permanent?localStorage.setItem(e,this.mode):localStorage.removeItem(e)}}o(){t.documentElement.setAttribute("data-color-mode",this.mode)}h(){this.icon.textContent=this.mode===h?"🌒":"🌞";this.text.textContent=this.mode===h?this.getAttribute(r):this.getAttribute(h)}t(){var s=this.attachShadow({mode:"open"});this.label=t.createElement("span");this.label.setAttribute("class","wrapper");this.label.onclick=()=>{this.mode=this.mode===h?r:h;if(this.permanent){localStorage.setItem(e,this.mode)}this.o();this.h()};s.appendChild(this.label);this.icon=t.createElement("span");this.label.appendChild(this.icon);this.text=t.createElement("span");this.label.appendChild(this.text);const o=\`\n[data-color-mode*='dark'], [data-color-mode*='dark'] body {\n  color-scheme: dark;\n  --color-theme-bg: #0d1117;\n  --color-theme-text: #c9d1d9;\n  background-color: var(--color-theme-bg);\n  color: var(--color-theme-text);\n}\n\n[data-color-mode*='light'], [data-color-mode*='light'] body {\n  color-scheme: light;\n  --color-theme-bg: #fff;\n  --color-theme-text: #24292f;\n  background-color: var(--color-theme-bg);\n  color: var(--color-theme-text);\n}\`;const i="_dark_mode_style_";const n=t.getElementById(i);if(!n){var c=t.createElement("style");c.id=i;c.textContent=o;t.head.appendChild(c)}var a=t.createElement("style");a.textContent=\`\n    .wrapper { cursor: pointer; user-select: none; position: relative; }\n    .wrapper > span + span { margin-left: .4rem; }\n    \`;s.appendChild(a)}i(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:true,composed:true,detail:e}))}}customElements.define("dark-mode",a);`
 
 /**
  * @wcj/dark-mode@1.0.14
  * https://github.com/jaywcjlove/dark-mode
  */
-export function darkMode(): Element[] {
+export function darkMode(mode?: boolean | 'auto'): Element[] {
+  const properties: Properties = {
+    style: 'position: fixed; top: 8px; left: 10px; z-index: 999;',
+    dark: 'Dark',
+    light: 'Light',
+  }
+  if (mode && mode !== 'auto') {
+    properties.permanent = 'true';
+  }
+  if (mode === false || mode === 'false' as unknown as boolean) {
+    properties.style = properties.style + 'display: none;';
+  }
   return [{
     type: 'element',
     tagName: 'script',
@@ -21,10 +32,7 @@ export function darkMode(): Element[] {
     type: 'element',
     tagName: 'dark-mode',
     properties: {
-      permanent: 'true',
-      style: 'position: fixed; top: 8px; left: 10px; z-index: 999;',
-      dark: 'Dark',
-      light: 'Light',
+      ...properties
     },
     children: []
   }]

packages/cli/src/nodes/markdown-style.ts

@@ -80,7 +80,8 @@ export function markdownStyle(child: ElementContent[], markdownStyleTheme?: 'dar
     className: 'markdown-style',
   }
   if (markdownStyleTheme) {
-    properties.theme = markdownStyleTheme;
+    // properties.theme = markdownStyleTheme;
+    properties.mode = markdownStyleTheme;
   }
   return [{
     type: 'element',