nightmodeSwitch.js

// This file has been truncated for brevity

import React, { Fragment, Component } from 'react';
import { Meteor } from 'meteor/meteor';
import PropTypes from 'prop-types';
import i18n from 'meteor/universe:i18n';
import { ThemeContext } from '../../containers/AppWrapper';

const T = i18n.createComponent();

class UserInfo extends Component {

  render() {
    const user = Meteor.user();
    return (
      <ThemeContext.Consumer>
        {({ state }) => (
          <div>
            <MainModal
              show={isOpen}
              onClose={this.close}
              subFunc={this.handleSubmit}
              title={title}
              confirm={confirm}
              reject={reject}
            />
            <ul
              id="slide-out"
              className="sidenav"
              style={{
                backgroundColor: state.isDark ? state.mainDark : '#ffffff', // an implementation of the theme from the context
              }}
            >
            {/* The switch that toggles day/night mode */}
              <div className="switch">
                <label>
                  Day Mode
                  <input
                    type="checkbox"
                    onChange={this.props.handleNightMode}
                    checked={this.props.checked}
                  />
                  <span className="lever" />
                  Night Mode
                </label>
              </div>
            </ul>
          </div>
        )}
      </ThemeContext.Consumer>
    );
  }
}
UserInfo.propTypes = {
  handleNightMode: PropTypes.func.isRequired,
  checked: PropTypes.bool.isRequired,
};

export default UserInfo;