fix: resolve dark mode style issues #70

Author: jaywcjlove

packages/action/dist/action.js

@@ -167414,7 +167414,7 @@ function copyElement() {
 //# sourceMappingURL=copy.js.map
 ;// CONCATENATED MODULE: ../cli/lib/nodes/dark-mode.js
 
-var 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);";
+var 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);if(!this.text.textContent&&this.text.parentElement&&this.text){this.text.parentElement.removeChild(this.text)}}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.icon.part=\"icon\";this.label.appendChild(this.icon);this.text=t.createElement(\"span\");this.text.part=\"text\";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
@@ -167507,7 +167507,6 @@ function lib_create_create() {
         darkMode(darkModeTheme, markdownStyleTheme).forEach(function (item) {
           return node.children.unshift(item);
         });
-        if (darkModeTheme) {}
       }
       if (corners && options['github-corners'] && (document && node.type == 'element' && node.tagName === 'body' || !document && node.type === 'root')) {
         node.children = Array.isArray(node.children) ? node.children : [];

packages/cli/src/create.ts

@@ -51,8 +51,6 @@ export function create(options: MDToHTMLOptions = {}) {
       if ((node.type === 'element' && node.tagName === 'body') || (!document && node.type === 'root')) {
         node.children = markdownStyle(node.children as any, markdownStyleTheme, wrapperStyle);
         darkMode(darkModeTheme, markdownStyleTheme).forEach(item => node.children.unshift(item));
-        if (darkModeTheme) {
-        }
       }
       if (corners && options['github-corners'] && ((document && node.type == 'element' && node.tagName === 'body') || (!document && node.type === 'root'))) {
         node.children = Array.isArray(node.children) ? node.children : [];

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

@@ -1,6 +1,6 @@
 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);`
+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);if(!this.text.textContent&&this.text.parentElement&&this.text){this.text.parentElement.removeChild(this.text)}}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.icon.part="icon";this.label.appendChild(this.icon);this.text=t.createElement("span");this.text.part="text";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