mirror of
https://github.com/trwnh/hugo-theme-paradox.git
synced 2024-05-03 07:39:10 +00:00
finish fixing color switcher
This commit is contained in:
parent
cf9dc13bda
commit
ddadf97337
|
|
@ -1,5 +1,5 @@
|
|||
<div class="color-switcher">
|
||||
<div class="js-toggle-wrapper">
|
||||
<div class="js-toggle-wrapper">
|
||||
<div class="js-toggle" style="display: none">
|
||||
<div class="js-toggle-track">
|
||||
<div class="js-toggle-track-check">
|
||||
|
|
@ -16,10 +16,10 @@
|
|||
<div class="js-toggle-thumb"></div>
|
||||
<input class="js-toggle-screenreader-only" type="checkbox" aria-label="Switch between Dark and Light mode">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
/*
|
||||
/*
|
||||
* Dark Mode Toggle
|
||||
* Copyright (c) 2015 instructure-react
|
||||
* Forked from Dan Abramov's personal blog
|
||||
|
|
@ -27,12 +27,12 @@
|
|||
* MIT License
|
||||
**/
|
||||
|
||||
.js-toggle-wrapper {
|
||||
.js-toggle-wrapper {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle {
|
||||
.js-toggle {
|
||||
touch-action: pan-x;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -44,9 +44,9 @@
|
|||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle-screenreader-only {
|
||||
.js-toggle-screenreader-only {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
|
|
@ -55,18 +55,18 @@
|
|||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle-track {
|
||||
.js-toggle-track {
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: #808080;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle-track-check {
|
||||
.js-toggle-track-check {
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
|
|
@ -78,14 +78,14 @@
|
|||
line-height: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle--checked .js-toggle-track-check {
|
||||
.js-toggle--checked .js-toggle-track-check {
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle-track-x {
|
||||
.js-toggle-track-x {
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
|
|
@ -97,13 +97,13 @@
|
|||
line-height: 0;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle--checked .js-toggle-track-x {
|
||||
.js-toggle--checked .js-toggle-track-x {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle-thumb {
|
||||
.js-toggle-thumb {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
|
|
@ -114,75 +114,74 @@
|
|||
box-sizing: border-box;
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle--checked .js-toggle-thumb {
|
||||
.js-toggle--checked .js-toggle-thumb {
|
||||
transform: translateX(26px);
|
||||
border-color: #19ab27;
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle--focus {
|
||||
.js-toggle--focus {
|
||||
filter: drop-shadow(0px 0px 3px var(--primary-accent));
|
||||
outline: 1px solid var(--ui-text);
|
||||
outline-offset: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.js-toggle:active .js-toggle-thumb {
|
||||
.js-toggle:active .js-toggle-thumb {
|
||||
box-shadow: 0px 0px 5px 5px var(--primary-accent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var body = document.body;
|
||||
var switcher = document.getElementsByClassName('js-toggle');
|
||||
var input = document.getElementsByClassName('js-toggle-screenreader-only');
|
||||
var body = document.body;
|
||||
var switchers = document.getElementsByClassName('js-toggle');
|
||||
|
||||
console.log(switcher);
|
||||
for (switcher of switchers) {
|
||||
switcher.removeAttribute("style");
|
||||
var input = switcher.querySelector('.js-toggle-screenreader-only')
|
||||
|
||||
for (s of switcher) {
|
||||
s.removeAttribute("style");
|
||||
};
|
||||
|
||||
input.addEventListener('focus', (event) => {
|
||||
input.addEventListener('focus', (event) => {
|
||||
switcher.classList.add('js-toggle--focus');
|
||||
});
|
||||
});
|
||||
|
||||
input.addEventListener('focusout', (event) => {
|
||||
input.addEventListener('focusout', (event) => {
|
||||
switcher.classList.remove('js-toggle--focus');
|
||||
});
|
||||
});
|
||||
|
||||
//Click on dark mode icon. Add dark mode classes and wrappers. Store user preference through sessions
|
||||
switcher.addEventListener("click", function() {
|
||||
//Click on dark mode icon. Add dark mode classes and wrappers. Store user preference through sessions
|
||||
switcher.addEventListener("click", function () {
|
||||
for (switcher of switchers) {
|
||||
this.classList.toggle('js-toggle--checked');
|
||||
}
|
||||
//this.classList.add('js-toggle--focus');
|
||||
//If dark mode is selected
|
||||
if (this.classList.contains('js-toggle--checked')) {
|
||||
//If dark mode is selected
|
||||
if (this.classList.contains('js-toggle--checked')) {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
//Save user preference in storage
|
||||
localStorage.setItem('colorMode', 'dark');
|
||||
} else {
|
||||
} else {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
localStorage.setItem('colorMode', 'light');
|
||||
}, 100);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
localStorage.setItem('colorMode', 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
//Check Storage. Keep user preference on page reload
|
||||
if (localStorage.getItem('colorMode') == 'dark') {
|
||||
//body.classList.add('dark-mode');
|
||||
//Check Storage. Keep user preference on page reload
|
||||
if (localStorage.getItem('colorMode') == 'dark') {
|
||||
for (switcher of switchers) {
|
||||
switcher.classList.add('js-toggle--checked');
|
||||
}
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
if (localStorage.getItem('colorMode') == 'light') {
|
||||
//body.classList.add('dark-mode');
|
||||
|
||||
body.classList.add('light-mode');
|
||||
}
|
||||
};
|
||||
if (localStorage.getItem('colorMode') == 'light') {
|
||||
body.classList.add('light-mode');
|
||||
};
|
||||
|
||||
</script>
|
||||
Loading…
Reference in a new issue