How to Create Night Mode and Star Effects on a website or Blogger

How to Create Night Mode and Star Effects on a website or Blogger

Bloggerbyte - If you are looking for ways to make Night Mode / Dark Mode on your blog you can find it here. By installing a dark mode on the blog it is very useful for visitors because it can make visitors more comfortable when visiting your blog that has too high contrast. How to Create Night Mode / Night Mode and Star Effects on Blogs. Creating a Night Mode / Dark Mode on a website or Blogger is actually quite easy. But it takes patience to install it especially for color adjustments for certain Class elements.

How to make Dark Mode / Night Mode on Blogger

  1. Please login to blogger, and enter the dashboard.
  2. Enter the menu Theme, then click EDIT HTML.
  3. Search Code ]]></b:skin>, Put the CSS code below just above ]]></b:skin> code.
  4. /* Dark Mode, by bloggerbyte.net */
    /* Button Dark Mode */
    .modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:45px;top: 0;z-index:999;}
    .modedark svg{
    width:24px;
    height:24px;
    vertical-align: -5px;
    background-repeat: no-repeat !important;
    content: '';
    }
    .modedark svg path{
    fill:#fff;
    }
    .modedark .check:checked ~ .NavMenu{
    opacity:1;
    visibility:visible;
    top:45px;
    min-width:200px;
    transition:all .3s ease;
    z-index:2;
    }
    .iconmode {
    cursor: pointer;
    display: block;
    padding: 8px;
    background-position: center;
    transition: all .5s linear;
    }
    .iconmode:hover{
    border-radius: 100px;
    background: rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%;
    }
    .check {
        display: none;
    }
    .modedark .iconmode .openmode{
    display:block;
    }
    .modedark .iconmode .closemode{
    display:none;
    }
    .modedark .check:checked ~ .iconmode .openmode{
    display:none;
    }
    .modedark .check:checked ~ .iconmode .closemode{
    display:block;
    }
    /* bloggerbyte Dark Mode */
    /* Night Mode by bloggerbyte.net */
    .Night #wrapper {background: #292e38;}
    .Night #HTML3 {background:#1d2129;}
    .Night #footer-widget-container {background:#1d2129;}
    .Night .share-this-pleaseeeee {background:#292e38;}
    .Night .related-post h4{background:#292e38;}
    .Night #label-info-th {background:#1d2129;}
    .Night body {background:#1d2129;}
    .Night .post-body {color:#cccccc}
    .Night #baca-juga h2 {color:#cccccc;background:#1d2129}
    .Night .label-info-th a {color:#cccccc;background:#3d4658}
    .Night li.recent-posts a{color:#cccccc}
    .Night .recent-posts-title h2{color:#cccccc}
    .Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
    .Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
    .Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
    .Night .post-info {color:#cccccc}
    .Night {background:#1d2129;}
    .Night h2.post-title a {color:#9e9e9e;}
    .Night h2.post-title a:hover {color:#f17f43}
    .Night .post-title {color:#1e90ff}
    .Night ul.nav-social {color:#1d2129}
    .Night .post-snippet {color:#cccccc}
    .Night #ignielNewsletter {background:#292e38;}
    .Night #Label1{background:#292e38;}
    .Night .post{background:#292e38;border-bottom-color: #252a33;}
    .Night .PopularPosts h2{background:#343944;}
    .Night .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}
    .Night .newspaptext{color:#9e9e9e}
    .Night .PopularPosts h2 span{color:#9e9e9e}
    .Night .list-label-widget-content ul li {border-bottom-color: #313640;}
    .Night .img-thumbnail img {background: #252931 linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgb(49, 54, 64) 20%, rgba(255, 255, 255, 0) 30%);background-size: 800px 104px;}
    .Night #ignielNewsletter .medsos__ {border-top-color: #313640;}
    .Night #footer-container{background:#12161f;}
    .Night #footer-navmenu{background:#171b25;}
    .Night .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .btnsocialshare {background:#383c44;}
    .Night .label-line::before{background: #1d2129;}
    .Night .label-line-c::before {background: #333740;}
    .Night a.showcontent:hover {background: #373a42;}
    .Night a.showcontent{background: #292e38}
    .Night #ignielNewsletter input{background: #272b33;border-color:#2b303a;}
    .Night .comments .comments-content .comment-content {color:#ffffff}
    .Night div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}
    .Night .related-post-style-3 .related-post-item-title {color: #bbb;}
    .Night #baca-juga ul {border: 2px solid #333740;}
    .Night #baca-juga h2 {border: 2px solid #292e38;}
    .Night #comments a.hiddencontent {background: #424854;}
    .Night .comments .comments-content .comment-thread ol {background: #292e38;}
    .Night .comments .comments-content .inline-thread {background: #292e38;}
    
  5. Still on EDIT HTML. Now we make the Dark Mode button. If the template you viomagz, wants to put the button in the upper right header, Please put the code above </header>. If the template is other than viomagz, you can adjust the location yourself.
  6. <div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/>
    <label class='iconmode' for='modedark'>
    <svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg>
    <svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg>
    </label>
    </div>
  7. Now add the following JS script just avobe </body> code
  8. <script type='text/javascript'>
    //<![CDATA[
    /* Dark Mode, by bloggerbyte.net */
    $(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
    //]]>
    </script>
    if you have NOT added / installed jquery.min.js on your website, please add the code below just avobe </head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

  9. Then Save Theme

Now we have to make for the stars.

  1. Please enter EDIT HTML EDIT HTML again.
  2. Add the CSS code below before code ]]></b:skin>. (Use CRTL + F, to look for it)
  3. /* Dark Mode by bloggerbyte.net */
    .section-center{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        display: none;
        overflow: hidden;
        z-index: 5;
     pointer-events: none;
        box-shadow: 0 0 50px 5px rgba(255,148,0,.1);
        transform: translate(-50%, -50%);
    }
    .section-center {
        -webkit-transition: all 500ms linear;
        transition: all 500ms linear;
    }
    .shooting-star {
     z-index: 2;
     width: 1px;
     height: 50px;
     border-bottom-left-radius: 50%;
     border-bottom-right-radius: 50%;
     position: absolute;
     top: 0;
     left: -70px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
     animation: animShootingStar 6s linear infinite;
     -webkit-transition: all 2000ms linear;
     transition: all 2000ms linear;
    }
    .shooting-star-2 {
     z-index: 2;
     width: 1px;
     height: 50px;
     border-bottom-left-radius: 50%;
     border-bottom-right-radius: 50%;
     position: absolute;
     top: 0;
     left: 200px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
     animation: animShootingStar-2 9s linear infinite;
     -webkit-transition: all 2000ms linear;
     transition: all 2000ms linear;
    }
    .star {
     z-index: 2;
     position: absolute;
     top: 185px;
     left: 25px;
     background-image: url('https://ivang-design.com//svg-load/air/star.png');
     background-size: 15px 15px;
     width: 15px;
     height: 15px;
     opacity: 0.4;
     animation: starShine 3.5s linear infinite;
     -webkit-transition: all 1200ms linear;
     transition: all 1200ms linear;
    }
    .star.snd {
     top: 100px;
     left: 310px;
     animation-delay: 1s;
    }
    .star.trd {
     top: 130px;
     left: 100px;
     animation-delay: 1.4s;
    }
    .star.fth {
     top: 190px;
     left: 200px;
     animation-delay: 1.8s;
    }
    .star.fith {
     top: 85px;
     left: 1080px;
     animation-delay: 2.2s;
    }
    @keyframes animShootingStar {
     from {
      transform: translateY(0px) translateX(0px) rotate(-45deg);
      opacity: 1;
      height: 5px;
     }
     to {
      transform: translateY(1280px) translateX(1280px) rotate(-45deg);
      opacity: 1;
      height: 800px;
     }
    }
    @keyframes animShootingStar-2 {
     from {
      transform: translateY(0px) translateX(0px) rotate(-45deg);
      opacity: 1;
      height: 5px;
     }
     to {
      transform: translateY(1920px) translateX(1920px) rotate(-45deg);
      opacity: 1;
      height: 800px;
     }
    }
    @keyframes starShine {
     0% {
      transform: scale(0.3) rotate(0deg);
      opacity: 0.4;
     }
     25% {
      transform: scale(1) rotate(360deg);
      opacity: 1;
     }
     50% {
      transform: scale(0.3) rotate(720deg);
      opacity: 0.4;
     }
     100% {
      transform: scale(0.3) rotate(0deg);
      opacity: 0.4;
     }
    }
    
  4. Add the HTML code below before </body> code.
  5. &lt;div class=&#039;section-center&#039;&gt;
     &lt;div class=&#039;shooting-star&#039;/&gt;
     &lt;div class=&#039;shooting-star-2&#039;/&gt;
     &lt;div class=&#039;star&#039;/&gt;
     &lt;div class=&#039;star snd&#039;/&gt;
     &lt;div class=&#039;star trd&#039;/&gt;
     &lt;div class=&#039;star fth&#039;/&gt;
     &lt;div class=&#039;star fith&#039;/&gt;
    &lt;/div&gt;
  6. Done.

for DEMO - Click Here

About the Author

“Hustle in silence and let your success make the noise.”

Post a Comment

Check the "Notify me" box to get an email notification if someone replies to a comment.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.