Add light/dark switch

functions.php

@@ -208,6 +208,32 @@ if ( ! function_exists( 'boxstyle_styles' ) ) {
 add_action( 'wp_enqueue_scripts', 'boxstyle_styles' );
 
 
+/*  Light & dark mode switch
+/* ------------------------------------ */
+function boxstyle_switch() {
+
+	if ( get_theme_mod('light-dark-switch','off') =='on' ) { 
+	
+		$current_mode = 'light';
+		if ( isset( $_COOKIE['theme_mode'] ) && ! empty( $_COOKIE['theme_mode'] ) ) {
+			$current_mode = $_COOKIE['theme_mode'];
+		}
+		if ( in_array( $current_mode, array( 'light', 'dark' ) ) ) {
+			wp_enqueue_style( 'boxstyle-scheme', get_template_directory_uri() . '/' . esc_attr( $current_mode ) . '.css' );
+		}
+		wp_enqueue_script( 'boxstyle-cookie', get_template_directory_uri() . '/js/cookie.min.js', array(), '2.2.0', true );
+		wp_enqueue_script( 'boxstyle-switch', get_template_directory_uri() . '/js/switch.js', array( 'jquery' ), '2.0', true );
+		$data = array(
+			'template_directory_uri'   => get_template_directory_uri(),
+			'stylesheet_directory_uri' => get_stylesheet_directory_uri(),
+			);
+		wp_localize_script( 'boxstyle-switch', 'boxstyleObject', $data );
+		
+	}
+}
+add_action( 'wp_enqueue_scripts', 'boxstyle_switch' );
+
+
 /* ------------------------------------------------------------------------- *
  *  Template functions
 /* ------------------------------------------------------------------------- */	

functions/theme-options.php

@@ -610,6 +610,15 @@ Kirki::add_field( 'boxstyle_theme', array(
 	'section'		=> 'styling',
 	'default'		=> 'on',
 ) );
+// Styling: Switch
+Kirki::add_field( 'boxstyle_theme', array(
+	'type'			=> 'switch',
+	'settings'		=> 'light-dark-switch',
+	'label'			=> esc_html__( 'Light/Dark Theme Switch', 'boxstyle' ),
+	'description'	=> esc_html__( 'Do not use with Dark Theme option enabled', 'boxstyle' ),
+	'section'		=> 'styling',
+	'default'		=> 'off',
+) );
 // Styling: Dark
 Kirki::add_field( 'boxstyle_theme', array(
 	'type'			=> 'switch',

header.php

@@ -17,7 +17,7 @@
 	<div class="container" id="page">
 		<div class="container-inner">			
 			<div class="main">
-			
+
 				<header id="header">
 		
 					<div class="group">
@@ -90,6 +90,9 @@
 				</header><!--/#header-->
 						
 				<div class="sidebar s2">
+					<?php if ( get_theme_mod('light-dark-switch','off') =='on' ): ?>
+						<a href="#" id="btn-mode" title="<?php esc_html_e('Switch color','boxstyle'); ?>"><i class="fa fa-toggle-off"></i></a>
+					<?php endif; ?>
 					<?php if ( get_theme_mod( 'header-social', 'on' ) == 'on' ): ?>
 						<?php boxstyle_social_links() ; ?>
 					<?php endif; ?>

js/cookie.min.js

@@ -0,0 +1,8 @@
+/**
+ * Minified by jsDelivr using UglifyJS v3.4.4.
+ * Original file: /npm/js-cookie@2.2.0/src/js.cookie.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+!function(e){var n=!1;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var o=window.Cookies,t=window.Cookies=e();t.noConflict=function(){return window.Cookies=o,t}}}(function(){function g(){for(var e=0,n={};e<arguments.length;e++){var o=arguments[e];for(var t in o)n[t]=o[t]}return n}return function e(l){function C(e,n,o){var t;if("undefined"!=typeof document){if(1<arguments.length){if("number"==typeof(o=g({path:"/"},C.defaults,o)).expires){var r=new Date;r.setMilliseconds(r.getMilliseconds()+864e5*o.expires),o.expires=r}o.expires=o.expires?o.expires.toUTCString():"";try{t=JSON.stringify(n),/^[\{\[]/.test(t)&&(n=t)}catch(e){}n=l.write?l.write(n,e):encodeURIComponent(String(n)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),e=(e=(e=encodeURIComponent(String(e))).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent)).replace(/[\(\)]/g,escape);var i="";for(var c in o)o[c]&&(i+="; "+c,!0!==o[c]&&(i+="="+o[c]));return document.cookie=e+"="+n+i}e||(t={});for(var a=document.cookie?document.cookie.split("; "):[],s=/(%[0-9A-Z]{2})+/g,f=0;f<a.length;f++){var p=a[f].split("="),d=p.slice(1).join("=");this.json||'"'!==d.charAt(0)||(d=d.slice(1,-1));try{var u=p[0].replace(s,decodeURIComponent);if(d=l.read?l.read(d,u):l(d,u)||d.replace(s,decodeURIComponent),this.json)try{d=JSON.parse(d)}catch(e){}if(e===u){t=d;break}e||(t[u]=d)}catch(e){}}return t}}return(C.set=C).get=function(e){return C.call(C,e)},C.getJSON=function(){return C.apply({json:!0},[].slice.call(arguments))},C.defaults={},C.remove=function(e,n){C(e,"",g(n,{expires:-1}))},C.withConverter=e,C}(function(){})});
+//# sourceMappingURL=/sm/31d5cd1b58ce5e6231e4ea03a69b2801a53e76e98152bc29dc82a494ed0a1ee6.map

js/scripts.js

@@ -20,6 +20,12 @@ jQuery(document).ready(function($) {
                 $('.search-expand input').focus();
             }, 300);
 	});
+
+/*  Toggle switch
+/* ------------------------------------ */
+	$('#btn-mode').on('click', function() {
+		$('body').toggleClass('dark-mode');
+	});
 	
 /*  Scroll to top
 /* ------------------------------------ */

js/switch.js

@@ -0,0 +1,28 @@
+( function( $ ) {
+
+	$(document).ready(function($){
+
+		var mode = Cookies.get( 'theme_mode' );
+
+		if ( ! mode ) {
+			Cookies.set( 'theme_mode' , 'light' );
+		}
+
+		$('#btn-mode').on('click',function(e){
+			e.preventDefault();
+			var cur_mode = Cookies.get( 'theme_mode' );
+			if ( 'light' == cur_mode ) {
+				// Switch to dark.
+				Cookies.set( 'theme_mode' , 'dark' );
+				$( "#boxstyle-scheme-css" ).attr( "href", boxstyleObject.template_directory_uri + "/dark.css" );
+			}
+			else if ( 'dark' == cur_mode ) {
+				// Switch to light.
+				Cookies.set( 'theme_mode' , 'light' );
+				$( "#boxstyle-scheme-css" ).attr( "href", boxstyleObject.template_directory_uri + "/light.css" );
+			}
+		});
+
+	});
+
+} )( jQuery );

languages/boxstyle.pot

@@ -2,7 +2,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Boxstyle\n"
-"POT-Creation-Date: 2019-02-06 11:05+0100\n"
+"POT-Creation-Date: 2019-02-06 13:12+0100\n"
 "PO-Revision-Date: 2018-09-21 21:27+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -133,23 +133,23 @@ msgstr ""
 msgid "Footer 4"
 msgstr ""
 
-#: functions.php:678
+#: functions.php:704
 msgid "Alx Extensions"
 msgstr ""
 
-#: functions.php:682
+#: functions.php:708
 msgid "Meta Box"
 msgstr ""
 
-#: functions.php:686
+#: functions.php:712
 msgid "Regenerate Thumbnails"
 msgstr ""
 
-#: functions.php:690
+#: functions.php:716
 msgid "WP-PageNavi"
 msgstr ""
 
-#: functions.php:694
+#: functions.php:720
 msgid "Responsive Lightbox"
 msgstr ""
 
@@ -614,158 +614,170 @@ msgid "Turn on to use the styling options below"
 msgstr ""
 
 #: functions/theme-options.php:617
-msgid "Dark Theme"
+msgid "Light/Dark Theme Switch"
 msgstr ""
 
 #: functions/theme-options.php:618
-msgid "Use dark instead of light base"
+msgid "Do not use with Dark Theme option enabled"
 msgstr ""
 
 #: functions/theme-options.php:626
-msgid "Font"
+msgid "Dark Theme"
 msgstr ""
 
 #: functions/theme-options.php:627
-msgid "Select font for the theme"
-msgstr ""
-
-#: functions/theme-options.php:631
-msgid "Titillium Web, Latin (Self-hosted)"
-msgstr ""
-
-#: functions/theme-options.php:632
-msgid "Titillium Web, Latin-Ext"
-msgstr ""
-
-#: functions/theme-options.php:633
-msgid "Droid Serif, Latin"
-msgstr ""
-
-#: functions/theme-options.php:634
-msgid "Source Sans Pro, Latin-Ext"
+msgid "Use dark instead of light base"
 msgstr ""
 
 #: functions/theme-options.php:635
-msgid "Lato, Latin"
+msgid "Font"
 msgstr ""
 
 #: functions/theme-options.php:636
-msgid "Raleway, Latin"
-msgstr ""
-
-#: functions/theme-options.php:637
-msgid "Ubuntu, Latin-Ext"
-msgstr ""
-
-#: functions/theme-options.php:638
-msgid "Ubuntu, Latin / Cyrillic-Ext"
-msgstr ""
-
-#: functions/theme-options.php:639
-msgid "Roboto, Latin-Ext"
+msgid "Select font for the theme"
 msgstr ""
 
 #: functions/theme-options.php:640
-msgid "Roboto, Latin / Cyrillic-Ext"
+msgid "Titillium Web, Latin (Self-hosted)"
 msgstr ""
 
 #: functions/theme-options.php:641
-msgid "Roboto Condensed, Latin-Ext"
+msgid "Titillium Web, Latin-Ext"
 msgstr ""
 
 #: functions/theme-options.php:642
-msgid "Roboto Condensed, Latin / Cyrillic-Ext"
+msgid "Droid Serif, Latin"
 msgstr ""
 
 #: functions/theme-options.php:643
-msgid "Roboto Slab, Latin-Ext"
+msgid "Source Sans Pro, Latin-Ext"
 msgstr ""
 
 #: functions/theme-options.php:644
-msgid "Roboto Slab, Latin / Cyrillic-Ext"
+msgid "Lato, Latin"
 msgstr ""
 
 #: functions/theme-options.php:645
-msgid "Playfair Display, Latin-Ext"
+msgid "Raleway, Latin"
 msgstr ""
 
 #: functions/theme-options.php:646
-msgid "Playfair Display, Latin / Cyrillic"
+msgid "Ubuntu, Latin-Ext"
 msgstr ""
 
 #: functions/theme-options.php:647
-msgid "Open Sans, Latin-Ext"
+msgid "Ubuntu, Latin / Cyrillic-Ext"
 msgstr ""
 
 #: functions/theme-options.php:648
-msgid "Open Sans, Latin / Cyrillic-Ext"
+msgid "Roboto, Latin-Ext"
 msgstr ""
 
 #: functions/theme-options.php:649
-msgid "PT Serif, Latin-Ext"
+msgid "Roboto, Latin / Cyrillic-Ext"
 msgstr ""
 
 #: functions/theme-options.php:650
-msgid "PT Serif, Latin / Cyrillic-Ext"
+msgid "Roboto Condensed, Latin-Ext"
 msgstr ""
 
 #: functions/theme-options.php:651
-msgid "Arial"
+msgid "Roboto Condensed, Latin / Cyrillic-Ext"
 msgstr ""
 
 #: functions/theme-options.php:652
-msgid "Georgia"
+msgid "Roboto Slab, Latin-Ext"
 msgstr ""
 
 #: functions/theme-options.php:653
-msgid "Verdana"
+msgid "Roboto Slab, Latin / Cyrillic-Ext"
 msgstr ""
 
 #: functions/theme-options.php:654
-msgid "Tahoma"
+msgid "Playfair Display, Latin-Ext"
+msgstr ""
+
+#: functions/theme-options.php:655
+msgid "Playfair Display, Latin / Cyrillic"
+msgstr ""
+
+#: functions/theme-options.php:656
+msgid "Open Sans, Latin-Ext"
+msgstr ""
+
+#: functions/theme-options.php:657
+msgid "Open Sans, Latin / Cyrillic-Ext"
+msgstr ""
+
+#: functions/theme-options.php:658
+msgid "PT Serif, Latin-Ext"
+msgstr ""
+
+#: functions/theme-options.php:659
+msgid "PT Serif, Latin / Cyrillic-Ext"
+msgstr ""
+
+#: functions/theme-options.php:660
+msgid "Arial"
 msgstr ""
 
 #: functions/theme-options.php:661
-msgid "Website Max-width"
+msgid "Georgia"
 msgstr ""
 
 #: functions/theme-options.php:662
+msgid "Verdana"
+msgstr ""
+
+#: functions/theme-options.php:663
+msgid "Tahoma"
+msgstr ""
+
+#: functions/theme-options.php:670
+msgid "Website Max-width"
+msgstr ""
+
+#: functions/theme-options.php:671
 msgid "Max-width of the container"
 msgstr ""
 
-#: functions/theme-options.php:675
+#: functions/theme-options.php:684
 msgid "Primary Color"
 msgstr ""
 
-#: functions/theme-options.php:683
+#: functions/theme-options.php:692
 msgid "Background Color"
 msgstr ""
 
-#: functions/theme-options.php:691
+#: functions/theme-options.php:700
 msgid "Header Logo Image Max-height"
 msgstr ""
 
-#: functions/theme-options.php:692
+#: functions/theme-options.php:701
 msgid ""
 "Your logo image should have the double height of this to be high resolution"
 msgstr ""
 
-#: functions/theme-options.php:705
+#: functions/theme-options.php:714
 msgid "Comment Count Background"
 msgstr ""
 
-#: functions/theme-options.php:713
+#: functions/theme-options.php:722
 msgid "Image Border Radius"
 msgstr ""
 
-#: functions/theme-options.php:714
+#: functions/theme-options.php:723
 msgid "Give your thumbnails and layout images rounded corners"
 msgstr ""
 
-#: functions/theme-options.php:727
+#: functions/theme-options.php:736
 msgid "Wave Style"
 msgstr ""
 
+#: header.php:94
+msgid "Switch color"
+msgstr ""
+
 #: inc/page-title.php:24
 msgid "Search result"
 msgstr ""

responsive.css

@@ -62,7 +62,7 @@
 	#nav-header.nav-container,
 	#nav-footer.nav-container { padding-left: 0; padding-right: 0; }
 	.toggle-search { left: 20px; right: auto; top: 5px; bottom: auto; }
-	.search-expand { bottom: auto; right: 50px; left: 64px; top: 5px; width: auto; }
+	.search-expand { bottom: auto; right: 90px; left: 64px; top: 5px; width: auto; z-index: 99; }
 	
 	/* footer */
 	#footer-bottom .pad { padding-top: 50px; padding-bottom: 40px; }
@@ -158,12 +158,17 @@
 	
 	/* sidebar s2 */
 	.main { margin-left: 0; }
-	.sidebar.s2 { width: 100%; margin-left: 0; position: static; padding-bottom: 0; }
+	.sidebar.s2 { width: 100%; margin-left: 0; position: relative; padding-bottom: 0; }
 	.s2 .social-links { margin-top: 0; width: 100%; text-align: center; }
 	.s2 .social-links li { width: 40px; }
 	.social-links .social-tooltip:hover:after,
 	.social-links .social-tooltip:hover:before { display: none; }
 	
+	#nav-header .nav { padding-bottom: 50px; }
+	#btn-mode { background: transparent; box-shadow: none; -webkit-box-shadow: none; color: #999; position: absolute; bottom: 66px; right: 54px; padding: 10px; margin-bottom: 2px; }
+	#btn-mode:hover:before,
+	#btn-mode:hover:after { display: none; }
+	
 	#profile { display: none; padding-bottom: 40px; }
 	.home.blog #profile { display: block; }
 	.home.blog.paged #profile { display: none; }

style.css

@@ -330,6 +330,14 @@ h1, h2, h3, h4, h5, h6 { color: #333; font-weight: 600; -ms-word-wrap: break-wor
 .pad { padding: 30px 50px; }
 .pad-top { border-bottom: 1px solid #eee; }
 
+#btn-mode { background: rgba(255,255,255,0.15); position: relative; color: #fff; text-align: center; display: block; padding: 38px 0; font-size: 24px;
+box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(255,255,255,0.1), 0 1px 0 rgba(0,0,0,0.1);  }
+.dark-mode #btn-mode .fa:before { content: "\f205"; }
+
+#btn-mode:hover:after { top: 35px; background: #333; font-size: 14px; color: #fff; content: attr(title); display: block; left: 60px; padding: 4px 10px; position: absolute; white-space: nowrap; 
+-webkit-border-radius: 3px; border-radius: 3px; }
+#btn-mode:hover:before { top: 45px; left: 55px; border-color: transparent #333; border-width: 5px 5px 5px 0; border-style: solid; content: ""; display: block; position: absolute; z-index: 1; }
+
 /* boxed */
 .boxed #wrapper { max-width: 1380px; margin: 0 auto;
 -webkit-box-shadow: 6px 0 0 rgba(0,0,0,0.04), -6px 0 0 rgba(0,0,0,0.04);