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

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';