I’ve put a Dark/Light Mode Switch on my instance of Newsfeed Theme you can see (for the time being) here:
LIGHT MODE…
DARK MODE…
Let me know if you’d like the code, or if you’d like me to do it for you.
Okay nice. Would love the code to play around a bit.
HEADER INJECTION…
<style>
.switch {
position: absolute;
top: -10px;
overflow: hidden;
width: 8rem;
height: 4.5rem;
transform: scale(0.5);
display: grid;
padding: .25rem;
border-radius: 20px;
}
.switch input {
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.switch label {
cursor: pointer;
}
.background {
box-sizing: border-box;
z-index: 1;
position: absolute;
width: 7.5rem;
height: 4rem;
border-radius: 2.5rem;
border: 0.25rem solid #202020;
background: linear-gradient(to right, #484848 0%,#202020 100%);
transition: all 0.3s;
}
.fill {
position: fixed;
top: 0;
right: 0;
bottom: 2rem;
left: 0;
background: #484848;
transition: 0.75s all ease;
}
.switch input:checked ~ .fill {
background: #E9F8FD;
}
.stars1,
.stars2 {
position: absolute;
height: 0.4rem;
width: 0.4rem;
background: #FFFFFF;
border-radius: 50%;
transition: 0.3s all ease;
}
.stars1 {
top: 6px;
right: 23px;
}
.stars2 {
top: 40px;
right: 48px;
}
.stars1:after,
.stars1:before,
.stars2:after,
.stars2:before{
position: absolute;
content: "";
display: block;
height: 0.25rem;
width: 0.25rem;
background: #FFFFFF;
border-radius: 50%;
transition: 0.2s all ease;
}
.stars1:after {
top: 8px;
right: 20px;
}
.stars1:before {
top: 18px;
right: -12px;
}
.stars2:after {
top: -8px;
right: -16px;
}
.stars2:before {
top: 6px;
right: -26px;
}
.sun-moon {
box-sizing: border-box;
z-index: 2;
position: absolute;
left: 0;
display: inline-block;
height: 3rem;
width: 3rem;
margin: 0.5rem;
background: #FFFDF2;
border-radius: 50%;
transition: all 0.5s ease;
/* Default to Moon */
border: 0.25rem solid #DEE2C6;
}
.sun-moon .dots {
box-sizing: border-box;
position: absolute;
top: 3px;
left: 23px;
height: 1rem;
width: 1rem;
background: #EFEEDB;
border: 0.25rem solid #DEE2C6;
border-radius: 50%;
transition: 0.4s all ease;
}
.sun-moon .dots:after,
.sun-moon .dots:before {
position: absolute;
content: "";
display: block;
height: 0.25rem;
width: 0.25rem;
background: #EFEEDB;
border: 0.25rem solid #DEE2C6;
border-radius: 50%;
transition: 0.4s all ease;
}
.sun-moon .dots:after {
top: -4px;
left: -26px;
}
.sun-moon .dots:before {
top: 18px;
left: -10px;
}
/* Transition to Sun */
.switch input:checked ~ .sun-moon {
left: calc(100% - 4rem);
background: #F5EC59;
border-color: #E7C65C;
transform: rotate(-25deg);
}
.switch input:checked ~ .sun-moon .dots,
.switch input:checked ~ .sun-moon .dots:after,
.switch input:checked ~ .sun-moon .dots:before {
background: #FFFFFF;
border-color: #FFFFFF;
}
.switch input:checked ~ .sun-moon .dots {
height: 1.5rem;
width: 1.5rem;
top: 0px;
left: -20px;
transform: rotate(25deg);
}
.switch input:checked ~ .sun-moon .dots:after {
height: 0.65rem;
width: 0.65rem;
top: 2px;
left: -12px;
}
.switch input:checked ~ .sun-moon .dots:before {
height: 0.4rem;
width: 0.4rem;
top: 6px;
left: 14px;
}
.switch input:checked ~ .background .stars1,
.switch input:checked ~ .background .stars2 {
opacity: 0;
transform: translateY(2rem);
}
.switch input:checked ~ .background {
border: 0.25rem solid #78C1D5;
background: linear-gradient(to right, #78C1D5 0%, #BBE7F5 100%);
}
html.dark-mode body,
html.dark-mode article,
html.dark-mode a,
html.dark-mode .card-body,
html.dark-mode .h1,
html.dark-mode .h2,
html.dark-mode .h3,
html.dark-mode .h4,
html.dark-mode .h5,
html.dark-mode .h6,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .blog-style5 .post-title a,
html.dark-mode .header-navbar-bottom,
html.dark-mode .header-navbar-middle,
html.dark-mode .dropdown-menu,
html.dark-mode .btn,
html.dark-mode .bg-light,
html.dark-mode .bg-white,
html.dark-mode .footer-area,
html.dark-mode blockquote {
color: hsla(0,0%,100%,.75) !important;
background-color: #01152f !important;
}
html.dark-mode .kg-bookmark-card,
html.dark-mode .kg-bookmark-content,
html.dark-mode .kg-bookmark-title,
html.dark-mode .kg-bookmark-metadata,
html.dark-mode .kg-bookmark-author,
html.dark-mode .kg-bookmark-description {
color: hsla(0,0%,100%,.75) !important;
background-color: #371010 !important
}
html.dark-mode .header-navbar-top,
html.dark-mode .list-group-item,
html.dark-mode .sidebar-widget,
html.dark-mode div.modal-content,
html.dark-mode #headermodal .search-block {
background-color: #000 !important;
}
html.dark-mode .border-light {
border-color: #410000 !important
}
html.dark-mode .form-control {
color: #fff !important;
}
div#main_nav {
max-height: 51px !important;
}
.list-group-item,
.list-blog,
.post-content {
padding: 1rem !important
}
.blog-style5 .post-img-wrap {
margin-left: 16px !important;
}
.pt-5 {
padding-top: 2rem!important;
}
</style>
FOOTER INJECTION…
<script>
/* Dark Mode Sets Cookie */
// On page load set the theme.
$(document).ready(function(){
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('theme') == null) {
document.documentElement.classList.add('dark-mode');
localStorage.setItem("theme", "dark-mode");
}
let cookie = localStorage.getItem("theme") || "";
if(cookie) {
document.documentElement.classList.add(cookie);
}
if($('html').hasClass('dark-mode')) {
$('.switch input').prop( "checked", false );
} else {
$('.switch input').prop( "checked", true );
}
});
$('.switch').click(function(e){
e.preventDefault();
$('html').toggleClass("dark-mode");
console.log($('.switch'))
let theme = localStorage.getItem("theme");
if (theme && theme === "dark-mode") {
localStorage.setItem("theme", "");
} else {
localStorage.setItem("theme", "dark-mode");
}
if($('html').hasClass('dark-mode')) {
$('.switch input').prop( "checked", false );
} else {
$('.switch input').prop( "checked", true );
}
});
</script>
1 Like