Preliminary light theme

mopidy_iris/static/app.css

@@ -2486,6 +2486,9 @@ html {
   letter-spacing: -0.01rem;
   touch-action: manipulation;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
+  body .light-theme,
+  html .light-theme {
+    background: #FFFFFF; }
 
 *::-webkit-scrollbar {
   width: 8px;
@@ -4579,6 +4582,9 @@ aside {
   border-right: 1px solid #1d1d1d;
   color: #FFFFFF;
   box-sizing: border-box; }
+  .light-theme aside {
+    background: #f4f2f0;
+    border-right: 1px solid #eeeae7; }
   aside .liner {
     overflow-y: auto;
     position: absolute;
@@ -4634,6 +4640,9 @@ aside {
         background: -moz-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
         background: -o-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
         background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black); }
+      .light-theme aside nav a {
+        color: #181818;
+        font-weight: 600; }
       aside nav a .icon {
         padding-right: 8px;
         vertical-align: top;

mopidy_iris/static/app.js

@@ -52557,6 +52557,7 @@ var initialState = {
 		http_streaming_url: "http://" + window.location.hostname + ":8000/mopidy"
 	},
 	ui: {
+		theme: 'dark',
 		shortkeys_enabled: true,
 		allow_reporting: true,
 		slim_mode: false,
@@ -62242,7 +62243,7 @@ var App = function (_React$Component) {
 	}, {
 		key: 'render',
 		value: function render() {
-			var className = '';
+			var className = this.props.theme + '-theme';
 			if (this.props.dragger && this.props.dragger.active) {
 				className += ' dragging';
 			}
@@ -62300,6 +62301,7 @@ var App = function (_React$Component) {
 
 var mapStateToProps = function mapStateToProps(state, ownProps) {
 	return {
+		theme: state.ui.theme,
 		shortkeys_enabled: state.ui.shortkeys_enabled,
 		allow_reporting: state.ui.allow_reporting,
 		touch_dragging: state.ui.touch_dragging,
@@ -70555,6 +70557,53 @@ var Settings = function (_React$Component) {
 						{ className: 'underline' },
 						'Advanced'
 					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'field radio' },
+						_react2.default.createElement(
+							'div',
+							{ className: 'name' },
+							'Theme'
+						),
+						_react2.default.createElement(
+							'div',
+							{ className: 'input' },
+							_react2.default.createElement(
+								'label',
+								null,
+								_react2.default.createElement('input', {
+									type: 'radio',
+									name: 'theme',
+									value: 'dark',
+									checked: this.props.ui.theme == 'dark',
+									onChange: function onChange(e) {
+										return _this2.props.uiActions.set({ theme: e.target.value });
+									} }),
+								_react2.default.createElement(
+									'span',
+									{ className: 'label' },
+									'Dark'
+								)
+							),
+							_react2.default.createElement(
+								'label',
+								null,
+								_react2.default.createElement('input', {
+									type: 'radio',
+									name: 'theme',
+									value: 'light',
+									checked: this.props.ui.theme == 'light',
+									onChange: function onChange(e) {
+										return _this2.props.uiActions.set({ theme: e.target.value });
+									} }),
+								_react2.default.createElement(
+									'span',
+									{ className: 'label' },
+									'Light'
+								)
+							)
+						)
+					),
 					_react2.default.createElement(
 						'div',
 						{ className: 'field checkbox' },

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1535070753";
+	var build = "1535083216";
 	var version = "3.24.0";
 
 	// Construct the script tag

src/js/App.js

@@ -280,7 +280,7 @@ class App extends React.Component{
 	}
 
 	render(){
-		var className = '';
+		var className = this.props.theme+'-theme';
 		if (this.props.dragger && this.props.dragger.active){
 			className += ' dragging';
 		}
@@ -335,6 +335,7 @@ class App extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		theme: state.ui.theme,
 		shortkeys_enabled: state.ui.shortkeys_enabled,
 		allow_reporting: state.ui.allow_reporting,
 		touch_dragging: state.ui.touch_dragging,

src/js/bootstrap.js

@@ -49,6 +49,7 @@ var initialState = {
 		http_streaming_url: "http://"+window.location.hostname+":8000/mopidy"
 	},
 	ui: {
+		theme: 'dark',
 		shortkeys_enabled: true,
 		allow_reporting: true,
 		slim_mode: false,

src/js/views/Settings.js

@@ -277,6 +277,32 @@ class Settings extends React.Component {
 
 					<h4 className="underline">Advanced</h4>
 
+					<div className="field radio">
+						<div className="name">
+							Theme
+						</div>
+						<div className="input">
+							<label>
+								<input 
+									type="radio"
+									name="theme"
+									value="dark"
+									checked={this.props.ui.theme == 'dark'}
+									onChange={ e => this.props.uiActions.set({theme: e.target.value})} />
+								<span className="label">Dark</span>
+							</label>
+							<label>
+								<input 
+									type="radio"
+									name="theme"
+									value="light"
+									checked={this.props.ui.theme == 'light'}
+									onChange={e => this.props.uiActions.set({theme: e.target.value})} />
+								<span className="label">Light</span>
+							</label>
+						</div>
+					</div>
+
 					<div className="field checkbox">
 						<div className="name">UI behavior</div>
 						<div className="input">

src/scss/components/_sidebar.scss

@@ -12,6 +12,11 @@ aside{
 	color: $white;
 	box-sizing: border-box;
 
+	.light-theme & {
+		background: $faint_grey;
+		border-right: 1px solid darken($faint_grey, 3%);
+	}
+
 	.liner {
 		overflow-y: auto;
 		position: absolute;
@@ -54,6 +59,11 @@ aside{
 			padding: 10px 10px 8px;
 			margin: 0 16px;
 			border-radius: 3px;
+	
+			.light-theme & {
+				color: $dark_grey;
+				font-weight: 600;
+			}
 
 			.icon {
 				padding-right: 8px;

src/scss/global/_core.scss

@@ -40,6 +40,10 @@ html {
 	letter-spacing: -0.01rem;
 	touch-action: manipulation;
 	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+
+	.light-theme {
+		background: $white;
+	}
 }
 
 *::-webkit-scrollbar{