Cara Menambahkan Dark Mode (Mode Gelap/Malam) Pada Template VioMagz 2021

VioMagz merupakan salah satu template buatan Mas Sugeng, dibuat lebih modern dan juga lebih clean menyesuaikan dengan trend web desain saat ini. Template ini sudah terupdate sampai pada versi 4.7.0 (10 Oktober 2021) dengan fitur pembaharuan sebagai berikut:

Perbaikan thumbnail related post blur
Perbaikan tombol hapus komentar muncul selain admin
Pembaruan gambar thumbnail related post menggunakan format webp
Penambahan tombol share telegram
dan beberapa perbaikan-perbaikan lainnya

Template VioMagz ini memiliki beberapa kelebihan diantaranya :

Responsive 100%
100% Responsive di semua ukuran layar
SEO Ready
Tidak perlu repot otak atik kode template supaya SEO karena sudah saya optimalkan
Fast Loading
Loading Cepat tanpa mengorbankan desain
Ads Optimized
Terdapat fitur slot iklan otomatis di tengah artikel dan di bawah artikel untuk membantu meningkatkan CTR iklan
Support Fitur Desainer Tema Blogger
Jika sobat tidak suka warna default template ini, sobat bisa mengubahnya sesuai keinginan melalui menu Desainer Tema Blogger
Menggunakan Schema Markup
Schema Markup untuk membantu mesin pencari memahami blog sobat
Breadcrumb Navigation
Auto Readmore
Pop-up Search Form
Widget Sticky
Widget Related Posts
Tombol Berbagi Responsive Keren
Numbered Page Navigation
Back to Top Button
Custom Error page
Tanpa Link Credit

Meskipun template tersebut sudah sangat mantap, tetapi masih ada teman-teman blogger yang ingin menambahkan beberapa fitur lain kedalam template tersebut agar lebih menarik dan elegan. Salah satu fitur yang ingin ditambahkan adalah membuat tema gelap/malam. Untuk itu, bagi Sobat SD yang menggunakan template VioMagz baik versi gratis ataupun premium yang ingin menambahkan fitur mode gelap/malam dapat mencoba cara berikut :

1. Sebelumnya ubah beberapa pengaturan pada mode terang/siang yang ada pada template. Perubahan yang Admin lakukan disini hanya mengganti beberapa warna pada font, warna hover font dan warna bacground, agar sesuai dengan perubahan pada mode gelap nantinya. Jika Sobat SD tidak ingin mengubahnya, abaikan saja hal ini.

Ada beberapa perubahan yang Admin lakukan, Sobat SD cukup perhatikan beberapa warna yang berbeda dengan template asli yang dimiliki dan sesuaikan bila diperlukan, atau bila ingin mencoba mengubah seperti yang Admin miliki, langsung saja copy dan gantikan (hapus script yang sama dengan script dibawah) lalu pastekan.

 /* Variable definitions start
   =========================
 
 <Group description="Dimensi">
    <Variable name="theme.width" description="Lebar Template" type="length" min="600px" max="2600px" default="1000px"  value="1000px"/>
    <Variable name="header.height" description="Tinggi Header" type="length" min="20px" max="500px" default="70px"  value="70px"/>>
 </Group>

 <Group description="Teks Halaman" selector="body">
    <Variable name="page.text.font" description="Font (Jenis font tidak bisa diganti)" type="font"
        default="normal normal 15px Helvetica, Arial, sans-serif" value="normal normal 15px Helvetica, Arial, sans-serif"/>
    <Variable name="body.text.color" description="Main Text Color" type="color" default="#575757" value="#575757"/>
 </Group>

 <Group description="Background Halaman" selector="body">
    <Variable name="body.background" description="Background Body" type="color" default="#AFEEEE" value="#AFEEEE"/>
 </Group>

 <Group description="Background Header" selector="#header-container">
    <Variable name="header.background" description="Background Header" type="color" default="#778899" value="#778899"/>
 </Group>

 <Group description="Background Konten" selector="#wrapper">
    <Variable name="posts.background.color" description="Background Wrapper" type="color" default="#ffffff" value="#ffffff"/>
 </Group>

 <Group description="Background Icon Media Sosial" selector="#footer-widget-container">
    <Variable name="footerwidget.bg.color" description="Background Color" type="color" default="#AFEEEE"  value="#AFEEEE"/>
 </Group>

 <Group description="Background Menu Footer" selector="#footer-navmenu">
    <Variable name="navmenufooter.bg" description="Background Color" type="color" default="#778899"  value="#778899"/>
 </Group>

 <Group description="Background Footer" selector="#footer-container">
    <Variable name="footer.background.color" description="Background Color" type="color" default="#778899" value="#778899"/>
 </Group>
   
 <Group description="Warna Link" selector=".main-outer">
    <Variable name="body.link.color" description="Link Color" type="color" default="#1B699D" value="#1B699D"/>
    <Variable name="body.link.visited.color" description="Visited Color" type="color" default="#1B699D" value="#1B699D"/>
    <Variable name="body.link.hover.color" description="Hover Color" type="color" default="#DAA520" value="#DAA520"/>
 </Group>

 <Group description="Warna Link Sidebar" selector="#sidebar-wrapper">
    <Variable name="sidebar.link.color" description="Link Color" type="color" default="$(body.link.color)" value="#1B699D"/>
    <Variable name="sidebar.link.visited.color" description="Visited Color" type="color" default="$(body.link.visited.color)" value="#1B699D"/>
    <Variable name="sidebar.link.hover.color" description="Hover Color" type="color" default="$(body.link.hover.color)" value="#D2691E"/>
 </Group>

 <Group description="Judul Blog" selector=".header">
    <Variable name="header.title.color" description="Title Color" type="color" default="#FFFFFF"  value="#FFFFFF"/>
 </Group> 
   
 <Group description="Menu Navigasi" selector="#cssmenu">
    <Variable name="navmenu.font.color" description="Color" type="color" default="#FFFFFF"  value="#FFFFFF"/>
    <Variable name="navmenu.font.hover.color" description="Hover Color" type="color" default="#DAA520"  value="#DAA520"/>
 </Group>
   
 <Group description="Submenu Navigasi" selector="#cssmenu">
    <Variable name="navsubmenu.font.color" description="Color" type="color" default="#FFFFFF"  value="#FFFFFF"/>
    <Variable name="navsubmenu.font.background" description="Background Color" type="color" default="#778899"  value="#778899"/>
    <Variable name="navsubmenu.hover" description="Hover Color" type="color" default="#20B2AA"  value="#20B2AA"/>
 </Group>

 <Group description="Icon Pencarian" selector=".search-icon">
    <Variable name="search.icon.color" description="Color" type="color" default="#FFFFFF"  value="#FFFFFF"/>
 </Group>
   
 <Group description="Judul Postingan" selector="h2.post-title, .FeaturedPost .post-summary h3">
    <Variable name="posts.title.color" description="Link Color" type="color" default="#483D8B" value="#483D8B"/>
    <Variable name="post.title.hover.color" description="Link Hover Color" type="color" default="#DAA520" value="#DAA520"/>
 </Group>
   
 <Group description="Icon Media Sosial" selector="#footer-widget-container">
    <Variable name="footerwidget.color" description="Color" type="color" default="#444444"  value="#444444"/>
 </Group>

 <Group description="Menu Footer" selector="#footer-navmenu">
    <Variable name="navmenufooter.color" description="Color" type="color" default="#ffffff"  value="#ffffff"/>
    <Variable name="navmenufooter.hover.color" description="Hover Color" type="color" default="#000080"  value="#000080"/>
 </Group>
   
 <Group description="Footer" selector="#footer-container">
    <Variable name="footer.color" description="Color" type="color" default="#ffffff" value="#ffffff"/>
    <Variable name="footer.body.link.color" description="Link Color" type="color" default="#808000" value="#808000"/>
    <Variable name="footer.hover.color" description="Hover Color" type="color" default="#000080" value="#000080"/>
 </Group>

 <Group description="Back to Top" selector="#back-to-top"> 
    <Variable name="backtp.background.color" description="Background" type="color" default="#CF4444" value="#CF4444"/>
    <Variable name="backtp.color" description="Color" type="color" default="$(navmenu.font.color)" value="#FFFFFF"/>
 </Group>

Warna pada font, background dan hover Sobat SD sesuaikan dengan selera masing-masing

2. Setelah itu saatnya menambahkan mode gelap dengan cara mencari kode ]]></b:skin> lalu tambahkan sript dibawah ini, dibagian atas atau sebelum kode ]]></b:skin> tersebut.

/* dark */
.modedark{display:inline-block;float:right;margin-top:14px;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;}
.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear;}
.iconmode:hover{border-radius:100px;}
.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;}
.Night{background:#121212;color:#fff;}
.Night #wrapper{background:#1d2129;color:#ddd;}
.Night #header-container{background:#000000;color:#ddd;}
.Night #footer-navmenu{background:#2E151B;color:#ddd;}
.Night #footer-container{background:#2E151B;color:#ddd;}
.Night #footer-widget-container{background:#121212;color:#ddd;}
.Night #cssmenu ul ul li a{color:#fff;background:#2E151B;}
.Night h1.post-title{color:#B8860B;}
.Night .sidebar h2{color:#B8860B;}
.Night .sidebar-sticky h2{color:#B8860B;}
.Night .latest-post-title h2{color:#B8860B;}
.Night .featured-outer{color:#B8860B;}

Warna pada font, background dan hover Sobat SD sesuaikan dengan selera masing-masing. Sementara tanda yang diberi highlight diatas untuk mengatur letak posisi icon dark mode, apabila ada Sobat SD yang mengubah tinggi headernya.

3. Selanjutnya tambahkan script dibawah ini pada bagian atas atau sebelum </body>

<script>
//<![CDATA[
$(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>

4. Cari kode </header>, lalu tambahkan script dibawah dibagian atas atau sebelum </header> tersebut.

<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='M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z'/></svg><svg class='closemode' viewbox='0 0 24 24'><path d='M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z'/></svg></label></div>

Script yang diberi tanda highlight diatas adalah kode svg icon. Jika Sobat SD ingin mengganti sesuai selera, dapat mencari icon svg di tautan ini.

5. Apabila Sobat SD ingin menambahkan fitur lain seperti bintang jatuh pada saat dark mode (mode gelap), tambahkan script dibawah ini pada bagian atas atau sebelum kode ]]></b:skin>.

.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}}

lalu cari kode </body>, masukkan script dibawah ini pada bagian atas atau sebelum kode </body> tersebut.

<div class='section-center'> 
 <div class='shooting-star'/>
 <div class='shooting-star-2'/>
 <div class='star'/>
 <div class='star snd'/>
 <div class='star trd'/>
 <div class='star fth'/>
 <div class='star fith'/>
</div>

Dark Mode Demo

Location:

Blog Sobat SD

Cara Menambahkan Dark Mode (Mode Gelap/Malam) Pada Template VioMagz 2021

Post a Comment for "Cara Menambahkan Dark Mode (Mode Gelap/Malam) Pada Template VioMagz 2021"

Menu Halaman Statis