From b9bfc8335172f2ff87b0b16d224fa718a75b0e7c Mon Sep 17 00:00:00 2001 From: Sound-Cat <76255766+Sound-Cat@users.noreply.github.com> Date: Thu, 1 Jul 2021 14:28:35 +0200 Subject: [PATCH 1/3] Add Darkmode Support for Code Blocks, Tables and Headings --- packages/docsify-dark-mode/src/index.js | 130 ++++++++++-------------- 1 file changed, 55 insertions(+), 75 deletions(-) diff --git a/packages/docsify-dark-mode/src/index.js b/packages/docsify-dark-mode/src/index.js index 1502951..967f5a3 100644 --- a/packages/docsify-dark-mode/src/index.js +++ b/packages/docsify-dark-mode/src/index.js @@ -1,78 +1,58 @@ -const plugin = (hook, vm) => { - var trans = () => { - document.documentElement.classList.add('transition') - window.setTimeout(() => { - document.documentElement.classList.remove('transition') - }, 800) - } - var setColor = ({ background, toggleBtnBg, textColor }) => { - document.documentElement.style.setProperty( - '--docsify_dark_mode_bg', - background - ) - document.documentElement.style.setProperty( - '--docsify_dark_mode_btn', - toggleBtnBg - ) - document.documentElement.style.setProperty('--text_color', textColor) - } - - var theme = { dark: {}, light: {} } - var defaultConfig = { +"use strict"; +window.$docsify.plugins = [].concat((t, e) => { + var o, + n = () => { + document.documentElement.classList.add("transition"), + window.setTimeout(() => { + document.documentElement.classList.remove("transition"); + }, 800); + }, + c = ({ background: t, toggleBtnBg: e, textColor: o, codeColor: f }) => { + document.documentElement.style.setProperty("--docsify_dark_mode_bg", t), + document.documentElement.style.setProperty( + "--docsify_dark_mode_btn", + e + ), + document.documentElement.style.setProperty("--text_color", o); + document.documentElement.style.setProperty("--code_color", f) + }; + (o = { dark: { - background: '#1c2022', - toggleBtnBg: '#34495e', - textColor: '#b4b4b4' + background: "#1c2022", + toggleBtnBg: "#34495e", + textColor: "#b4b4b4", + codeColor: "#3f484d" }, light: { - background: 'white', - toggleBtnBg: 'var(--theme-color)', - textColor: 'var(--theme-color)' - } - } - - theme = { ...defaultConfig, ...vm.config.darkMode } - - hook.afterEach(function(html, next) { - var darkEl = `
- - -
` - html = `${darkEl}${html}` - next(html) - }) - - hook.doneEach(function() { - var currColor - if (localStorage.getItem('DOCSIFY_DARK_MODE')) { - currColor = localStorage.getItem('DOCSIFY_DARK_MODE') - setColor(theme[`${currColor}`]) - } else { - currColor = 'light' - setColor(theme.light) - } - - var checkbox = document.querySelector('input[name=mode]') - - if (!checkbox) { - return - } - - checkbox.addEventListener('change', function() { - // dark - if (currColor === 'light') { - trans() - setColor(theme.dark) - localStorage.setItem('DOCSIFY_DARK_MODE', 'dark') - currColor = 'dark' - } else { - trans() - setColor(theme.light) - localStorage.setItem('DOCSIFY_DARK_MODE', 'light') - currColor = 'light' - } - }) - }) -} - -window.$docsify.plugins = [].concat(plugin, window.$docsify.plugins) + background: "white", + toggleBtnBg: "var(--theme-color)", + textColor: "var(--theme-color)", + codeColor: "white" + }, + ...e.config.darkMode, + }), + t.afterEach(function (t, e) { + e( + (t = `
\n \n \n
${t}`) + ); + }), + t.doneEach(function () { + var t; + localStorage.getItem("DOCSIFY_DARK_MODE") + ? ((t = localStorage.getItem("DOCSIFY_DARK_MODE")), c(o[`${t}`])) + : ((t = "light"), c(o.light)), + document + .querySelector("input[name=mode]") + .addEventListener("change", function () { + "light" === t + ? (n(), + c(o.dark), + localStorage.setItem("DOCSIFY_DARK_MODE", "dark"), + (t = "dark")) + : (n(), + c(o.light), + localStorage.setItem("DOCSIFY_DARK_MODE", "light"), + (t = "light")); + }); + }); +}, window.$docsify.plugins); From 82f5af146c49784d275a9a5236f2cf4d3816ad9d Mon Sep 17 00:00:00 2001 From: Sound-Cat <76255766+Sound-Cat@users.noreply.github.com> Date: Thu, 1 Jul 2021 14:32:41 +0200 Subject: [PATCH 2/3] Updated README.md --- packages/docsify-dark-mode/README.md | 12 ++++-- packages/docsify-dark-mode/src/style.css | 52 ++++++++++++------------ 2 files changed, 34 insertions(+), 30 deletions(-) diff --git a/packages/docsify-dark-mode/README.md b/packages/docsify-dark-mode/README.md index ca6e27e..c8203e1 100644 --- a/packages/docsify-dark-mode/README.md +++ b/packages/docsify-dark-mode/README.md @@ -52,12 +52,14 @@ window.$docsify = { dark: { background: "", toggleBtnBg: "", - textColor: "" + textColor: "", + codeColor: "" }, light: { background: "", toggleBtnBg: "", - textColor: "" + textColor: "", + codeColor: "" } } // ... @@ -71,12 +73,14 @@ window.$docsify = { dark: { background: "#1c2022", toggleBtnBg: "#34495e", - textColor: "#b4b4b4" + textColor: "#b4b4b4", + codeColor: "#3f484d" }, light: { background: "white", toggleBtnBg: "var(--theme-color)", - textColor: "var(--theme-color)" + textColor: "var(--theme-color)", + codeColor: "white" } }; ``` diff --git a/packages/docsify-dark-mode/src/style.css b/packages/docsify-dark-mode/src/style.css index 490bd33..490c1ef 100644 --- a/packages/docsify-dark-mode/src/style.css +++ b/packages/docsify-dark-mode/src/style.css @@ -1,18 +1,28 @@ :root { --text_color: var(--theme-color); - --docsify_dark_mode_bg: white; + --docsify_dark_mode_bg: #fff; --docsify_dark_mode_btn: var(--theme-color); } -html, -body, -main, -.sidebar-toggle, .sidebar, -aside { +.sidebar-toggle, +aside, +body, +html, +main,.sidebar ul li a { + background: #fff; background: var(--docsify_dark_mode_bg); + color: var(--text_color) +} +.markdown-section code, .markdown-section pre { + background-color: var(--code_color); +} +.markdown-section td { + background-color: var(--docsify_dark_mode_bg); +} +.anchor span{ + color: var(--text_color) } - -#dark_mode > input[type='checkbox'] { +#dark_mode > input[type="checkbox"] { height: 0; width: 0; visibility: hidden; @@ -22,57 +32,47 @@ aside { text-indent: -9999px; width: 55px; height: 30px; + background: var(--theme-color); background: var(--docsify_dark_mode_btn); margin: 0 auto; display: flex; justify-content: center; align-items: center; - -webkit-border-radius: 100px; - -moz-border-radius: 100px; border-radius: 100px; position: relative; } - #dark_mode > label:after { - content: ''; + content: ""; background: #fff; width: 20px; height: 20px; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; border-radius: 50%; position: absolute; top: 5px; left: 4px; - transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms; + transition: 0.32s cubic-bezier(0.68, -0.55, 0.27, 1.55); } - #dark_mode > input:checked + label { + background: var(--theme-color); background: var(--docsify_dark_mode_btn); } - #dark_mode > input:checked + label:after { left: calc(100% - 5px); - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - -o-transform: translateX(-100%); transform: translateX(-100%); } - html.transition, html.transition *, -html.transition *:before, -html.transition *:after { - transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 420ms !important; +html.transition :after, +html.transition :before { + transition: 0.42s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; transition-delay: 0 !important; } - #dark_mode { position: absolute; right: 0; top: 0; } p { + color: var(--theme-color); color: var(--text_color); } From 9a7faa0f944018070a28ac533335080d24ee443e Mon Sep 17 00:00:00 2001 From: Sound-Cat <76255766+Sound-Cat@users.noreply.github.com> Date: Thu, 1 Jul 2021 16:59:01 +0200 Subject: [PATCH 3/3] Correctet style.css --- packages/docsify-dark-mode/src/style.css | 54 ++++++------------------ 1 file changed, 13 insertions(+), 41 deletions(-) diff --git a/packages/docsify-dark-mode/src/style.css b/packages/docsify-dark-mode/src/style.css index 490c1ef..fa5968a 100644 --- a/packages/docsify-dark-mode/src/style.css +++ b/packages/docsify-dark-mode/src/style.css @@ -1,16 +1,17 @@ :root { --text_color: var(--theme-color); - --docsify_dark_mode_bg: #fff; + --docsify_dark_mode_bg: white; --docsify_dark_mode_btn: var(--theme-color); } -.sidebar, -.sidebar-toggle, -aside, -body, html, -main,.sidebar ul li a { - background: #fff; +body, +main, +.sidebar-toggle, +.sidebar, +aside { background: var(--docsify_dark_mode_bg); +} +.sidebar ul li a { color: var(--text_color) } .markdown-section code, .markdown-section pre { @@ -22,7 +23,7 @@ main,.sidebar ul li a { .anchor span{ color: var(--text_color) } -#dark_mode > input[type="checkbox"] { +#dark_mode > input[type='checkbox'] { height: 0; width: 0; visibility: hidden; @@ -32,47 +33,18 @@ main,.sidebar ul li a { text-indent: -9999px; width: 55px; height: 30px; - background: var(--theme-color); background: var(--docsify_dark_mode_btn); margin: 0 auto; display: flex; justify-content: center; align-items: center; + -webkit-border-radius: 100px; + -moz-border-radius: 100px; border-radius: 100px; position: relative; } + #dark_mode > label:after { - content: ""; + content: ''; background: #fff; width: 20px; - height: 20px; - border-radius: 50%; - position: absolute; - top: 5px; - left: 4px; - transition: 0.32s cubic-bezier(0.68, -0.55, 0.27, 1.55); -} -#dark_mode > input:checked + label { - background: var(--theme-color); - background: var(--docsify_dark_mode_btn); -} -#dark_mode > input:checked + label:after { - left: calc(100% - 5px); - transform: translateX(-100%); -} -html.transition, -html.transition *, -html.transition :after, -html.transition :before { - transition: 0.42s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; - transition-delay: 0 !important; -} -#dark_mode { - position: absolute; - right: 0; - top: 0; -} -p { - color: var(--theme-color); - color: var(--text_color); -}