From 3d9aef2ba6c9cf5738f07f4daa45e6dca43be17c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Sa=C4=9F=C4=B1r?= Date: Tue, 6 Jul 2021 13:12:49 +0300 Subject: [PATCH] Dark Mode (#1217) * corrections were made * added dark-mode * back-to-top-button added * back-to-top button edited * back-to-top button edited * last edit * last edit * arrangements were made * dark-mode-button-updated * dark-mode-option-added --- docs/index.html | 14 +++++ docs/main.mjs | 18 ++++--- docs/modules/darkMode.mjs | 20 +++++++ docs/style.css | 111 ++++++++++++++++++++++++++++++++++++++ docsSource/index.js | 1 + docsSource/template.html | 14 +++++ 6 files changed, 170 insertions(+), 8 deletions(-) create mode 100644 docs/modules/darkMode.mjs diff --git a/docs/index.html b/docs/index.html index 81cdff9..5e3c39b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -60,6 +60,20 @@
+
diff --git a/docs/main.mjs b/docs/main.mjs index 46ff6e8..be70fa9 100644 --- a/docs/main.mjs +++ b/docs/main.mjs @@ -2,9 +2,11 @@ import buildDocsIndex from './modules/buildDocsIndex.mjs'; import playground from './modules/playground.mjs'; import startAnimations from './modules/startAnimations.mjs'; import toggleOnClick from './modules/toggle.mjs'; +import darkModeControl from './modules/darkMode.mjs'; buildDocsIndex(); playground(); +darkModeControl(); toggleOnClick('.callout-showList', 'html', 'animationList-active'); toggleOnClick('.callout-hideList', 'html', 'animationList-active'); @@ -14,12 +16,12 @@ toggleOnClick('.docs-index', 'html', 'hamburger-active'); requestAnimationFrame(startAnimations); document.querySelectorAll('.copy-icon').forEach(icon => { - icon.addEventListener('click', () => { - icon.classList.add('copied'); - document.querySelector('.copied .tooltip').textContent = "Copied!"; - setTimeout(() => { - icon.children[0].textContent = "Copy class name to clipboard" - icon.classList.remove('copied') - }, 750) - }) + icon.addEventListener('click', () => { + icon.classList.add('copied'); + document.querySelector('.copied .tooltip').textContent = 'Copied!'; + setTimeout(() => { + icon.children[0].textContent = 'Copy class name to clipboard' + icon.classList.remove('copied') + }, 750) + }) }) diff --git a/docs/modules/darkMode.mjs b/docs/modules/darkMode.mjs new file mode 100644 index 0000000..ec60fb1 --- /dev/null +++ b/docs/modules/darkMode.mjs @@ -0,0 +1,20 @@ +const darkModeControl = () => { + const darkCheck = document.getElementById('night-light-checkbox'); + + darkCheck.addEventListener('click', () => { + if (darkCheck.checked) { + document.body.classList.add('dark'); + localStorage.setItem('animate-css', 'dark'); + } else { + document.body.classList.remove('dark'); + localStorage.removeItem('animate-css'); + } + }) + + if (localStorage.getItem('animate-css')) { + document.body.className = 'dark'; + darkCheck.checked = true; + } +} + +export default darkModeControl; \ No newline at end of file diff --git a/docs/style.css b/docs/style.css index 0eb04bb..4c67fb7 100644 --- a/docs/style.css +++ b/docs/style.css @@ -616,3 +616,114 @@ blockquote { .animation-list { text-align: left; } + +/*-----------------------------------*\ + $DARK-MODE +\*-----------------------------------*/ + +.night-light-label #night-light-checkbox { + position: absolute; + visibility: hidden; +} + +.night-light-label { + display: block; + margin: 20px 0; + height: 31px; + width: 60px; + border: 2px solid #4672fe; + border-radius: 30px; + position: relative; + cursor: pointer; +} + +.night-light-label .night-light-ball { + position: absolute; + width: 25px; + height: 25px; + top: 1px; + left: 1px; + border-radius: 50%; + background: #4672fe; + z-index: 99; + transition: 300ms; +} + +.night-light-label #night-light-checkbox:checked + .night-light-ball { + transform: translateX(28px); +} + +.moon-svg, +.sun-svg { + width: 16px; + height: 16px; + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.moon-svg { + right: 5px; +} + +.sun-svg { + left: 5px; +} + +.dark #moon-svg, +.dark #sun-svg { + fill: #e0e0e0 !important; +} + +.dark { + background-color: #111; + color: #e0e0e0; +} + +.dark .intro { + background: #111; +} + +.dark .animation-list, +.dark .sidebar { + background: #15151D; +} + +.dark .button.button-animations, +.dark .callout-hideList.button { + color: #e0e0e0; + border-color: rgba(255, 255, 255, .7); + outline: none; +} + +.dark .copy-icon, +.dark .copy-icon:hover { + background: #15151D; + border-color: #e0e0e0; +} + +.dark .copy-icon::before, +.dark .copy-icon:hover::before { + border-color: #e0e0e0; +} + +.dark code { + color: #111; +} + +.dark h2, +.dark h3, +.dark h4, +.dark a[title="Documentation"], +.dark pre * { + color: #e0e0e0; +} + +.dark section { + border-color: rgba(255, 255, 255, .2); +} + +.dark h1, +.dark a { + color: #4672fe; +} \ No newline at end of file diff --git a/docsSource/index.js b/docsSource/index.js index 291cef1..516a29c 100644 --- a/docsSource/index.js +++ b/docsSource/index.js @@ -23,3 +23,4 @@ fs.writeFile(output, withVersion, 'utf8', (err) => { if (err) console.error(err); console.log('Template compiled succesfully.'); }); + diff --git a/docsSource/template.html b/docsSource/template.html index 22959cb..516a3b9 100644 --- a/docsSource/template.html +++ b/docsSource/template.html @@ -60,6 +60,20 @@
+ {{list}}