小贝子编程

复选框正在工作，但没有动画



我在我的网站的标题导航和移动菜单中使用黑暗模式切换。两者的功能都应该，除了只有1动画开关，因为它点击。我还想让按钮旁边的文字从"黑暗"切换到";";Light"当它被点击。如有任何帮助，不胜感激。

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"], .theme-switch-mobile input[type="checkbox2"]');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
}    
}
toggleSwitch.addEventListener('change', switchTheme, false);
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark'); //add this
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light'); //add this
}    
}
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
/********** DARK THEME TOGGLE START **********/

.theme-switch-wrapper {
display: flex;
align-items: center;
}

.theme-switch-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 10px;
margin-left: 5px;
font-size: 9px;
letter-spacing: 2px;
}

[data-theme="dark"] .theme-switch-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 10px;
margin-left: 5px;
font-size: 9px;
letter-spacing: 2px;
color: #F8F0E3;
}

.theme-switch {
display: inline-block;
height: 18px;
position: relative;
width: 30px;
margin-top: -4px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #fff;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
border: 2px solid #121212;
transition: .4s;
-webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.slider:before {
background-color: #000;
bottom: 1px;
content: "";
height: 12px;
left: 2px;
position: absolute;
transition: .4s;
width: 12px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
input:checked + .slider {
background-color: transparent;
border: 2px solid #F8F0E3;
}
input:checked + .slider:before {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
background-color: #F8F0E3;
}
.slider.round {
border-radius: 34px;
border: 2px solid #000;
}
.slider.round:before {
border-radius: 50%;
}

.header__toggle {
position: absolute;
top: 7px;
right: 20px;
}

@media screen and (max-width: 768px) {    
.header__toggle {
position: absolute;
top: 0px;
right: 10px;
}
}

.is-light .site-toggle__link{
color:#fff!important;
}
[data-theme="dark"] .is-light .site-toggle__link{
color:#F8F0E3!important;
}

[data-theme="dark"] .site-toggle__link{
color: #000!important;
color:var(--colorNavText)
}

/********** DARK THEME TOGGLE END **********/

/********** DARK THEME MOBILE TOGGLE START **********/

.theme-switch-mobile-wrapper {
display: flex;
align-items: center;
}

.theme-switch-mobile-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 13px;
margin-left: 7px;
font-size: 24px;
color: #ffffff;
letter-spacing: 3px;
}

[data-theme=dark] .theme-switch-mobile-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 13px;
margin-left: 7px;
font-size: 24px;
color: #f8f0e3;
letter-spacing: 3px;
}

.theme-switch-mobile {
display: inline-block;
height: 21px;
position: relative;
width: 33px;
margin-top: -4px;
}
.theme-switch-mobile input {
display:none;
}
.slider-mobile {
background-color: #fff;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
border: 2px solid #121212;
transition: .4s;
-webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.slider-mobile:before {
background-color: #000;
bottom: 1px;
content: "";
height: 15px;
left: 2px;
position: absolute;
transition: .4s;
width: 15px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
input:checked + .slider-mobile {
background-color: transparent;
border: 2px solid #F8F0E3;
}
input:checked + .slider-mobile:before {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
background-color: #F8F0E3;
}
.slider-mobile.round-mobile {
border-radius: 34px;
border: 2px solid #000;
}
.slider-mobile.round-mobile:before {
border-radius: 50%;
}
.mobile__toggle {
position: absolute;
left: 35%;
margin-top: -15px;
}

@media screen and (max-width: 768px) {    
.mobile__toggle {
position: absolute;
left: 35%;
margin-top: -15px;
}
}

/********** DARK THEME MOBILE TOGGLE END **********/
<div class="theme-switch-wrapper header__toggle site-toggle__link">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<p>DARK</p>
</div>

<div class="theme-switch-mobile-wrapper mobile__toggle">
<label class="theme-switch-mobile" for="checkbox">
<input type="checkbox" id="checkbox2" />
<div class="slider-mobile round-mobile"></div>
</label>
<p>DARK</p>
</div>

你可以使用valaliy的答案，但这只是改变一个切换的动画。我的答案改变了两个切换动画，但没有太大的区别。

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"], .theme-switch-mobile input[type="checkbox2"]');
const toggles = document.querySelectorAll('#checkbox2, #checkbox');
toggleSwitch.addEventListener('change', switchTheme, false);
function switchTheme(e) {
console.log(toggles);
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark'); //add this
toggles.forEach((toggle) => {
toggle.checked = true;
});
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light'); //add this
toggles.forEach((toggle) => {
toggle.checked = false;
});
}   
}
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}

https://codepen.io/naxsi-the-bashful/pen/NWvNMQv?编辑= 1111

访问代码依赖导致localStorage操作不能在SO代码段上运行-

js和html有错误

  1. 标签<label class="theme-switch-mobile" for="checkbox2" <input type="checkbox" id="checkbox2"/> </label>
  2. const toggleSwitch = document.querySelectorAll('.theme-switch input, .theme-switch-mobile input');代替const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"], .theme-switch-mobile input[type="checkbox2"]');
  3. querySelectorAll代替querySelector然后toggleSwitch.forEach(e => { e.addEventListener('change', switchTheme, false) } );

const toggleSwitch = document.querySelectorAll('.theme-switch input, .theme-switch-mobile input');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
toggleSwitch.forEach(e => {
e.addEventListener('change', switchTheme, false)
}
);
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
//localStorage.setItem('theme', 'dark'); //add this
}
else {
document.documentElement.setAttribute('data-theme', 'light');
//localStorage.setItem('theme', 'light'); //add this
}
}
//const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
const currentTheme = null;
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
/********** DARK THEME TOGGLE START **********/

.theme-switch-wrapper {
display: flex;
align-items: center;
}

.theme-switch-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 10px;
margin-left: 5px;
font-size: 9px;
letter-spacing: 2px;
}

[data-theme="dark"] .theme-switch-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 10px;
margin-left: 5px;
font-size: 9px;
letter-spacing: 2px;
color: #F8F0E3;
}

.theme-switch {
display: inline-block;
height: 18px;
position: relative;
width: 30px;
margin-top: -4px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #fff;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
border: 2px solid #121212;
transition: .4s;
-webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.slider:before {
background-color: #000;
bottom: 1px;
content: "";
height: 12px;
left: 2px;
position: absolute;
transition: .4s;
width: 12px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
input:checked + .slider {
background-color: transparent;
border: 2px solid #F8F0E3;
}
input:checked + .slider:before {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
background-color: #F8F0E3;
}
.slider.round {
border-radius: 34px;
border: 2px solid #000;
}
.slider.round:before {
border-radius: 50%;
}

.header__toggle {
position: absolute;
top: 7px;
right: 20px;
}

@media screen and (max-width: 768px) {    
.header__toggle {
position: absolute;
top: 0px;
right: 10px;
}
}

.is-light .site-toggle__link{
color:#fff!important;
}
[data-theme="dark"] .is-light .site-toggle__link{
color:#F8F0E3!important;
}

[data-theme="dark"] .site-toggle__link{
color: #000!important;
color:var(--colorNavText)
}

/********** DARK THEME TOGGLE END **********/

/********** DARK THEME MOBILE TOGGLE START **********/

.theme-switch-mobile-wrapper {
display: flex;
align-items: center;
}

.theme-switch-mobile-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 13px;
margin-left: 7px;
font-size: 24px;
color: #ffffff;
letter-spacing: 3px;
}

[data-theme=dark] .theme-switch-mobile-wrapper p {
font-family: Arial MT Pro!important;
margin-top: 13px;
margin-left: 7px;
font-size: 24px;
color: #f8f0e3;
letter-spacing: 3px;
}

.theme-switch-mobile {
display: inline-block;
height: 21px;
position: relative;
width: 33px;
margin-top: -4px;
}
.theme-switch-mobile input {
display:none;
}
.slider-mobile {
background-color: #fff;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
border: 2px solid #121212;
transition: .4s;
-webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.slider-mobile:before {
background-color: #000;
bottom: 1px;
content: "";
height: 15px;
left: 2px;
position: absolute;
transition: .4s;
width: 15px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
input:checked + .slider-mobile {
background-color: transparent;
border: 2px solid #F8F0E3;
}
input:checked + .slider-mobile:before {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
background-color: #F8F0E3;
}
.slider-mobile.round-mobile {
border-radius: 34px;
border: 2px solid #000;
}
.slider-mobile.round-mobile:before {
border-radius: 50%;
}
.mobile__toggle {
position: absolute;
left: 35%;
margin-top: -15px;
}

@media screen and (max-width: 768px) {    
.mobile__toggle {
position: absolute;
left: 35%;
margin-top: -15px;
}
}

/********** DARK THEME MOBILE TOGGLE END **********/
<div class="theme-switch-wrapper header__toggle site-toggle__link">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<p>DARK</p>
</div>

<div class="theme-switch-mobile-wrapper mobile__toggle">
<label class="theme-switch-mobile" for="checkbox2">
<input type="checkbox" id="checkbox2" />
<div class="slider-mobile round-mobile"></div>
</label>
<p>DARK</p>
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium