Implement Light Mode (Beige) via alternate SASS compilation and runtime switching

_includes/header.html

@@ -3,8 +3,14 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 
 <!-- Load resources -->
-<link rel="stylesheet" href="assets/css/main.min.css" />
+<link rel="stylesheet" id="theme-style" href="assets/css/main.min.css" />
-<noscript><link rel="stylesheet" href="assets/css/noscript.min.css" /></noscript>
+<script>
+    var theme = localStorage.getItem('mischkomposition_theme');
+    if (theme === 'light') {
+        document.getElementById('theme-style').href = 'assets/css/light.min.css';
+    }
+</script>
+<noscript><link rel="stylesheet" href="assets/css/main.min.css" /></noscript>
 <link rel="stylesheet" href="assets/css/custom.min.css" />
 
 <link rel="stylesheet" href="/assets/css/fontawesome-all.min.css">

assets/js/main.js

@@ -285,6 +285,26 @@
 	// Galerie laden
 	loadGallery();
 
+	// Theme Toggle
+	var currentTheme = localStorage.getItem('mischkomposition_theme') || 'main';
+	updateThemeIcon(currentTheme);
+
+	$('#theme-toggle').click(function(e) {
+		e.preventDefault();
+		currentTheme = currentTheme === 'main' ? 'light' : 'main';
+		localStorage.setItem('mischkomposition_theme', currentTheme);
+		$('#theme-style').attr('href', 'assets/css/' + currentTheme + '.min.css');
+		updateThemeIcon(currentTheme);
+	});
+
+	function updateThemeIcon(theme) {
+		if (theme === 'light') {
+			$('#theme-toggle i').removeClass('fa-sun').addClass('fa-moon');
+		} else {
+			$('#theme-toggle i').removeClass('fa-moon').addClass('fa-sun');
+		}
+	}
+
 	// Login Handling
 	$.get('/api/auth/me').done(function(u) {
 		$('#login-username, #login-password, #login-submit').hide();

assets/sass/light.scss

@@ -0,0 +1,54 @@
+@import 'libs/vars';
+
+$palette: (
+	bg:					#f9f6f0,
+	bg-alt:				#eee8dd,
+	bg-overlay:			transparentize(#f9f6f0, 0.15),
+	bg-overlay-alt:		transparentize(#f9f6f0, 0.05),
+	bg-ie-overlay:		transparentize(#f9f6f0, 0.1),
+	bg-ie-overlay-alt:	transparentize(#f9f6f0, 0.05),
+	fg:					#5c554e,
+	fg-bold:			#38332f,
+	fg-medium:			#7a746e,
+	fg-light:			#9e9790,
+	border:				#e6dccc,
+	border-bg:			#f0e5d6,
+	border-bg-alt:		#e1d1ba,
+	accent1:			#e48c71
+) !global;
+
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+
+@include breakpoints((
+	xlarge:  ( 1281px,  1680px ),
+	large:   ( 981px,   1280px ),
+	medium:  ( 737px,   980px  ),
+	small:   ( 481px,   736px  ),
+	xsmall:  ( null,    480px  )
+));
+
+@include keyframes(spinner) {
+	0% { @include vendor('transform', 'rotate(0deg)'); }
+	100% { @include vendor('transform', 'rotate(359deg)'); }
+}
+
+@import 'base/reset';
+@import 'base/page';
+@import 'base/typography';
+@import 'components/button';
+@import 'components/form';
+@import 'components/icon';
+@import 'components/list';
+@import 'components/actions';
+@import 'components/icons';
+@import 'components/table';
+@import 'components/panel';
+@import 'components/poptrox-popup';
+@import 'layout/wrapper';
+@import 'layout/header';
+@import 'layout/main';
+@import 'layout/footer';
+@import 'custom';

index.html

@@ -10,6 +10,7 @@ layout: default
         <h1><a href="index.html"><strong>{{ site.header.title }}</strong> {{ site.header.subtitle }}</a></h1>
         <nav>
             <ul>
+                <li><a href="#" id="theme-toggle" title="Theme wechseln"><i class="fa fa-sun"></i></a></li>
                 <li><a href="#galerie" id="galerie-link">Galerie</a></li>
                 <li><a href="#login-panel" id="login-nav">Login&nbsp;&nbsp;<i class="fa fa-user"></i></a></li>
                 <li><a href="#footer">About&nbsp;&nbsp;<i class="fa fa-info-circle text-fg"></i></a></li>