feat: add theme switch

Dark and Light style switch.

themes/hold/index.twig

@@ -33,7 +33,7 @@
 	<!-- Bootstrap  -->
 	<link rel="stylesheet" href="{{ theme_url }}/css/bootstrap.css">
 
-	<link rel="stylesheet" href="{{ theme_url }}/css/style.css">
+	<link rel="stylesheet" id="theme-switch" href="{{ theme_url }}/css/style.css">
 
 
 	<!-- Modernizr JS -->
@@ -58,7 +58,7 @@
 				{% endfor %}
 			</ul>
 			<a class="style-toggle js-style-toggle" data-style="default" href="#" style="">
-				<span class="fh5co-circle"></span> <!-- TODO: Make this switch to work -->
+				<span class="fh5co-circle"></span>
 			</a>
 		</nav>
 
@@ -167,6 +167,8 @@
 	</div>
 	<!-- jQuery -->
 	<script src="{{ theme_url }}/js/jquery.min.js"></script>
+	<!-- jQuery Cookie -->
+	<script src="{{ theme_url }}/js/jquery.cookie.js"></script>
 	<!-- jQuery Easing -->
 	<script defer src="{{ theme_url }}/js/jquery.easing.1.3.js"></script>
 	<!-- Bootstrap -->
@@ -212,6 +214,9 @@
 	</script>
 	{% endif %}
 	<!-- Main JS  -->
+	<script>
+           var twig_theme_url = {% if theme_url is defined %}'{{ theme_url }}'{% else %}null{% endif %}
+    </script>
 	<script src="{{ theme_url }}/js/main.js"></script>
 	</body>
 </html>

themes/hold/js/jquery.cookie.js

@@ -0,0 +1,114 @@
+/*!
+ * jQuery Cookie Plugin v1.4.1
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2006, 2014 Klaus Hartl
+ * Released under the MIT license
+ */
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD (Register as an anonymous module)
+		define(['jquery'], factory);
+	} else if (typeof exports === 'object') {
+		// Node/CommonJS
+		module.exports = factory(require('jquery'));
+	} else {
+		// Browser globals
+		factory(jQuery);
+	}
+}(function ($) {
+
+	var pluses = /\+/g;
+
+	function encode(s) {
+		return config.raw ? s : encodeURIComponent(s);
+	}
+
+	function decode(s) {
+		return config.raw ? s : decodeURIComponent(s);
+	}
+
+	function stringifyCookieValue(value) {
+		return encode(config.json ? JSON.stringify(value) : String(value));
+	}
+
+	function parseCookieValue(s) {
+		if (s.indexOf('"') === 0) {
+			// This is a quoted cookie as according to RFC2068, unescape...
+			s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+		}
+
+		try {
+			// Replace server-side written pluses with spaces.
+			// If we can't decode the cookie, ignore it, it's unusable.
+			// If we can't parse the cookie, ignore it, it's unusable.
+			s = decodeURIComponent(s.replace(pluses, ' '));
+			return config.json ? JSON.parse(s) : s;
+		} catch(e) {}
+	}
+
+	function read(s, converter) {
+		var value = config.raw ? s : parseCookieValue(s);
+		return $.isFunction(converter) ? converter(value) : value;
+	}
+
+	var config = $.cookie = function (key, value, options) {
+
+		// Write
+
+		if (arguments.length > 1 && !$.isFunction(value)) {
+			options = $.extend({}, config.defaults, options);
+
+			if (typeof options.expires === 'number') {
+				var days = options.expires, t = options.expires = new Date();
+				t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
+			}
+
+			return (document.cookie = [
+				encode(key), '=', stringifyCookieValue(value),
+				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+				options.path    ? '; path=' + options.path : '',
+				options.domain  ? '; domain=' + options.domain : '',
+				options.secure  ? '; secure' : ''
+			].join(''));
+		}
+
+		// Read
+
+		var result = key ? undefined : {},
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all. Also prevents odd result when
+			// calling $.cookie().
+			cookies = document.cookie ? document.cookie.split('; ') : [],
+			i = 0,
+			l = cookies.length;
+
+		for (; i < l; i++) {
+			var parts = cookies[i].split('='),
+				name = decode(parts.shift()),
+				cookie = parts.join('=');
+
+			if (key === name) {
+				// If second argument (value) is a function it's a converter...
+				result = read(cookie, value);
+				break;
+			}
+
+			// Prevent storing a cookie that we couldn't decode.
+			if (!key && (cookie = read(cookie)) !== undefined) {
+				result[name] = cookie;
+			}
+		}
+
+		return result;
+	};
+
+	config.defaults = {};
+
+	$.removeCookie = function (key, options) {
+		// Must not alter options, thus extending a fresh object...
+		$.cookie(key, '', $.extend({}, options, { expires: -1 }));
+		return !$.cookie(key);
+	};
+
+}));

themes/hold/js/main.js

@@ -42,6 +42,71 @@
 		});
 	};
 
+	// Dark - Light theme switch
+	var styleToggle = function() {
+
+
+		if ( $.cookie('styleCookie') !== undefined ) {
+			if ( $.cookie('styleCookie') === 'style-light.css'  ) { 
+
+				$('.js-style-toggle').attr('data-style', 'light');
+			} else  {
+				$('.js-style-toggle').attr('data-style', 'default');
+			}
+			$('#theme-switch').attr('href', twig_theme_url + '/css/' + $.cookie('styleCookie'));
+		} 
+
+
+		if ( $.cookie('btnActive') !== undefined ) $('.js-style-toggle').addClass($.cookie('btnActive'));
+
+
+
+
+		// $('.js-style-toggle').on('click', function(){
+		$('body').on('click','.js-style-toggle',function(event){
+
+
+
+			var data = $('.js-style-toggle').attr('data-style'), style = '', $this = $(this);
+
+			if ( data === 'default') {
+
+				// switch to light
+				style = 'style-light.css';
+				$this.attr('data-style', 'light');
+
+				// add class active to button
+				$.cookie('btnActive', 'active', { expires: 365, path: '/'});
+				$this.addClass($.cookie('btnActive'));
+
+
+			} else {
+				// switch to dark color
+				style = 'style.css';
+				$this.attr('data-style', 'default');
+
+				// remove class active from button
+				$.removeCookie('btnActive', { path: '/' });
+				$(this).removeClass('active'); 
+
+				// switch to style
+				$.cookie('styleCookie', style, { expires: 365, path: '/'});
+
+			}
+
+			// switch to style 
+			$.cookie('styleCookie', style, { expires: 365, path: '/'});
+
+			// apply the new style
+			$('#theme-switch').attr('href', twig_theme_url + '/css/' + $.cookie('styleCookie'));
+
+
+			event.preventDefault();
+
+		});
+
+	}
+
 	// Animations
 
 	var contentWayPoint = function() {
@@ -77,6 +142,7 @@
 		gotToNextSection();
 		loaderPage();
 		ScrollNext();
+		styleToggle();
 
 		// Animate
 		contentWayPoint();