# Newsfeed Theme - Excellent

**URL:** <https://forum.ghost.org/t/newsfeed-theme-excellent/24386>\
**Category:** Themes\
**Created:** [July 22, 2021, 10:25pm UTC](https://forum.ghost.org/t/newsfeed-theme-excellent/24386 "2021-07-22T22:25:13Z")\
**Posts on this page:** 3\
**Page:** 2

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 9, 2022, 5:53am UTC](https://forum.ghost.org/t/newsfeed-theme-excellent/24386/22 "2022-06-09T05:53:24Z")

</div>

I’ve put a Dark/Light Mode Switch on my instance of Newsfeed Theme you can see (for the time being) here:

[https://newsfeed.ghost.pub/](https://newsfeed.ghost.pub/)

LIGHT MODE…

 ![Screenshot 2022-06-08 235019](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/0/2/021f646d924afc7e4dc77f49f7fc71a6c94c8af9.jpeg)

DARK MODE…

 ![Screenshot 2022-06-08 234944](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/6/b/6bff0f4a47dd80a0e26724d45ccb7d1b7ff6eb67.jpeg)

Let me know if you’d like the code, or if you’d like me to do it for you.

---

<div class="post-metadata">

**Author:** ![Nino](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/nino/32/20506_2.png) [@Nino](https://forum.ghost.org/u/Nino)\
**Post date:** [June 9, 2022, 9:14am UTC](https://forum.ghost.org/t/newsfeed-theme-excellent/24386/23 "2022-06-09T09:14:56Z")

</div>

Okay nice. Would love the code to play around a bit.

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 9, 2022, 11:09am UTC](https://forum.ghost.org/t/newsfeed-theme-excellent/24386/24 "2022-06-09T11:09:09Z")

</div>

HEADER INJECTION…

```auto
<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…

```auto
<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>

```

[Previous page](https://forum.ghost.org/t/newsfeed-theme-excellent/24386.md?page=1)