Added Dark Mode

src/client/components/footer.js

@@ -27,10 +27,10 @@ import React from 'react';
 const {Col, Container, Row} = bootstrap;
 
 function Footer(props) {
-	const {repositoryUrl, siteRevision} = props;
+	const {darkMode, repositoryUrl, siteRevision} = props;
 
 	return (
-		<footer className="footer">
+		<footer className={`footer ${darkMode ? 'dark-mode' : ''}`}>
 			<Container fluid>
 				<Row>
 					<Col xs={4}>
@@ -91,6 +91,7 @@ function Footer(props) {
 
 Footer.displayName = 'Footer';
 Footer.propTypes = {
+	darkMode: PropTypes.bool.isRequired,
 	repositoryUrl: PropTypes.string.isRequired,
 	siteRevision: PropTypes.string.isRequired
 };

src/client/components/pages/index.js

@@ -66,7 +66,7 @@ class IndexPage extends React.Component {
 										<input
 											required
 											autoFocus="autofocus"
-											className="form-control"
+											className={`form-control ${this.props.darkMode ? 'dark-mode' : ''}`}
 											name="q"
 											placeholder="Search for..."
 											type="text"
@@ -264,7 +264,7 @@ class IndexPage extends React.Component {
 
 	render() {
 		return (
-			<div>
+			<div className={this.props.darkMode ? 'dark-mode' : ''}>
 				{this.renderHeader()}
 				{this.renderContent()}
 			</div>
@@ -274,6 +274,7 @@ class IndexPage extends React.Component {
 
 IndexPage.displayName = 'IndexPage';
 IndexPage.propTypes = {
+	darkMode: PropTypes.bool.isRequired,
 	disableSignUp: PropTypes.bool,
 	isLoggedIn: PropTypes.bool.isRequired,
 	recent: PropTypes.array.isRequired,

src/client/containers/layout.js

@@ -27,8 +27,8 @@ import {IdentifierTypeEditorIcon, RelationshipTypeEditorIcon} from '../helpers/u
 import {PrivilegeType, checkPrivilege} from '../../common/helpers/privileges-utils';
 import {
 	faBarcode,
-	faChartLine, faClipboardQuestion, faFileLines, faGripVertical, faLink, faListUl, faNewspaper, faPlus, faQuestionCircle,
-	faSearch, faShieldHalved, faSignInAlt, faSignOutAlt, faTrophy, faUserCircle, faUserGear
+	faChartLine, faClipboardQuestion, faFileLines, faGripVertical, faLink, faListUl, faMoon, faNewspaper, faPlus, faQuestionCircle,
+	faSearch, faShieldHalved, faSignInAlt, faSignOutAlt, faSun, faTrophy, faUserCircle, faUserGear
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import Footer from './../components/footer';
@@ -44,15 +44,20 @@ const {Alert, Button, Form, FormControl, InputGroup, Nav, Navbar, NavDropdown} =
 class Layout extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = {keepMenuOpen: false, menuOpen: false};
+		this.state = {darkMode: false, keepMenuOpen: false, menuOpen: false};
 		this.renderNavContent = this.renderNavContent.bind(this);
 		this.renderNavHeader = this.renderNavHeader.bind(this);
 		this.renderDocsDropdown = this.renderDocsDropdown.bind(this);
 		this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+		this.handleDarkMode = this.handleDarkMode.bind(this);
 		this.handleDropdownClick = this.handleDropdownClick.bind(this);
 		this.handleMouseDown = this.handleMouseDown.bind(this);
 	}
 
+	handleDarkMode = () => {
+		this.setState(prevState => ({darkMode: !prevState.darkMode}));
+	};
+
 	handleMouseDown(event) {
 		event.preventDefault();
 	}
@@ -340,6 +345,13 @@ class Layout extends React.Component {
 		return (
 			<Navbar.Collapse id="bs-example-navbar-collapse-1">
 				{!(homepage || hideSearch) && this.renderSearchForm()}
+				<Nav>
+					<Nav.Item onClick={this.handleDarkMode}>
+						<Nav.Link>
+							<FontAwesomeIcon icon={this.state.darkMode ? faSun : faMoon}/>
+						</Nav.Link>
+					</Nav.Item>
+				</Nav>
 				<Nav className={revisionsClassName}>
 					<Nav.Item>
 						<Nav.Link href="/revisions">
@@ -384,8 +396,10 @@ class Layout extends React.Component {
 		} = this.props;
 
 		// Shallow merges parents props into child components
+		const {darkMode} = this.state;
+		const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, {darkMode}));
 		const childNode = homepage ?
-			children :
+			childrenWithProps :
 			(
 				<div className="container" id="content">
 					{requiresJS && (
@@ -399,7 +413,7 @@ class Layout extends React.Component {
 							</noscript>
 						</div>
 					)}
-					{children}
+					{childrenWithProps}
 					{mergeQueue ?
 						<MergeQueue
 							mergeQueue={mergeQueue}
@@ -420,14 +434,15 @@ class Layout extends React.Component {
 				<a className="sr-only sr-only-focusable" href="#content">
 					Skip to main content
 				</a>
-				<Navbar className="BookBrainz" expand="lg" fixed="top" role="navigation">
+				<Navbar className={`BookBrainz ${this.state.darkMode ? 'dark-mode' : ''}`} expand="lg" fixed="top" role="navigation">
 					{this.renderNavHeader()}
 					<Navbar.Toggle/>
 					{this.renderNavContent()}
 				</Navbar>
 				{alerts}
 				{childNode}
 				<Footer
+					darkMode={this.state.darkMode}
 					repositoryUrl={repositoryUrl}
 					siteRevision={siteRevision}
 				/>

src/client/stylesheets/style.scss

@@ -888,3 +888,8 @@ div[class~=collapsing]+div[class=card-header] .accordion-arrow {
     bottom: 0.3em;
 	left: -0.5em;
 }
+
+.dark-mode{
+	background-color: rgb(13,17,23) !important;
+	// color: rgb(235,117,59) !important;
+}