@fortawesome/free-solid-svg-icons#faMoon JavaScript Examples

render() {
    return (
      <div className="custom-switch">
        <Switch
          onChange={this.handleToggle}
          checked={this.state.checked}
          offColor="#bbb"
          onColor="#4a4a4a"
          uncheckedIcon={
            <FontAwesomeIcon className="icon-moon" icon={faMoon} />
          }
          checkedIcon={<SunIcon className="icon-sun" />}
          handleDiameter={21}
          height={23}
          width={40}
          onHandleColor="#333"
        />
      </div>
    )
  }

render() {
    let { toggle, theme } = this.props;
    return (
      <button
        data-testid="theme-toggler"
        type="button"
        className="btn"
        onClick={toggle}
        aria-label="Toggle theme"
      >
        {theme === "light" ? (
          <FontAwesomeIcon
            icon={faMoon}
            size="2x"
            title="Switch to dark mode"
          />
        ) : (
          <FontAwesomeIcon icon={faSun} size="2x" title="Back to light mode" />
        )}
      </button>
    );
  }

ICONS = {
  bars: faBars,
  'check-circle': faCheckCircle,
  'chevron-down': faChevronDown,
  'chevron-right': faChevronRight,
  'exchange-alt': faExchangeAlt,
  exclamation: faExclamation,
  'exclamation-triangle': faExclamationTriangle,
  info: faInfo,
  moon: faMoon,
  question: faQuestion,
  rss: faRss,
  'sign-in-alt': faSignInAlt,
  sun: faSun,
  snowflake: faSnowflake,
  star: faStar,
  'times-circle': faTimesCircle,
  user: faUser,
}

Theme = ({
  darkMode,
  toggle,
}) => (
  <ButtonIcon
    ariaLabel={`switch to ${darkMode ? 'light' : 'dark'} mode`}
    icon={darkMode ? faMoon : faSun}
    kind="primary"
    onClick={toggle}
    type="button"
  />
)

export default function Header({
  addedAccount, onSubmit, refreshAllFunc, syncMessage,
}) {
  let currentTheme = localStorage.getItem('theme');
  if (currentTheme === null) currentTheme = 'light';
  const [theme, setTheme] = useState(currentTheme);

  const body = document.getElementsByTagName('body')[0];

  if (theme === 'dark') {
    body.classList.add('dark-theme');
  }

  const toggleTheme = () => {
    if (theme === 'dark') {
      body.classList.remove('dark-theme');
      setTheme('light');
      localStorage.setItem('theme', 'light');
    } else {
      body.classList.add('dark-theme');
      setTheme('dark');
      localStorage.setItem('theme', 'dark');
    }
  };

  return (
    <div className="header-container">
      <img className="logo" src={theme === 'light' ? icon : iconWhite} alt="UniDrive icon" />
      {addedAccount && (
        <span className="search-container">
          <SearchBar
            onSubmit={onSubmit}
          />
        </span>
      )}
      {addedAccount && (
      <div className="header-button-container">
        <button type="button" className="header-button toggle-theme" onClick={() => toggleTheme()}>
          <FontAwesomeIcon icon={theme === 'light' ? faMoon : faSun} size="lg" title="Toggle theme" />
        </button>
        <button type="button" className="header-button refresh" id="signin-btn" onClick={() => refreshAllFunc()}>
          <FontAwesomeIcon icon={faSyncAlt} size="lg" title="Sync all accounts" />
        </button>
        <button type="button" disabled className="sync-message">
          Last synced:
          {' '}
          {syncMessage}
        </button>
      </div>
      )}
    </div>
  );
}

// https://fontawesome.com/v5/docs/web/use-with/react

function VideoEditor() {

	//Boolean state handling whether upload has occured or not
	const [isUpload, setIsUpload] = useState(true)

	//State handling storing of the video
	const [videoUrl, setVideoUrl] = useState('')
	const [videoBlob, setVideoBlob] = useState('')

	//Boolean state handling whether light or dark mode has been chosen
	const [isDarkMode, setIsDarkMode] = useState(false)

	//Stateful array handling storage of the start and end times of videos
	const [timings, setTimings] = useState([])


	//Lifecycle handling light and dark themes
	useEffect(() => {
		toggleThemes()
		document.addEventListener('drop', function(e) {
			e.preventDefault()
			e.stopPropagation()
		})
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [])

	//Function handling file input as well as file drop library and rendering of those elements
	const renderUploader = () => {
		return (
			<div className={'wrapper'}>
				<input
					onChange={(e) => uploadFile(e.target.files)}
					type='file'
					className='hidden'
					id='up_file'
				/>
				<FileDrop
					onDrop={(e) => uploadFile(e)}
					onTargetClick={() => document.getElementById('up_file').click()}
				>
                    Click or drop your video here to edit!
				</FileDrop>
			</div>
		)
	}

	//Function handling rendering the Editor component and passing props to that child component
	const renderEditor = () => {
		return (
		// videoUrl --> URL of uploaded video
			<Editor
				videoUrl={videoUrl}
				videoBlob={videoBlob}
				setVideoUrl={setVideoUrl}
				timings={timings}
				setTimings={setTimings}
			/>
		)
	}

	//Function handling the light and dark themes logic
	const toggleThemes = () => {
		if(isDarkMode) {
			document.body.style.backgroundColor = '#1f242a'
			document.body.style.color = '#fff'
		}
		if(!isDarkMode){
			document.body.style.backgroundColor = '#fff'
			document.body.style.color = '#1f242a'
		}
		setIsDarkMode(!isDarkMode)
	}

	//Function handling the file upload file logic
	const uploadFile = async (fileInput) => {
		console.log(fileInput[0])
		let fileUrl = URL.createObjectURL(fileInput[0])
		setIsUpload(false)
		setVideoUrl(fileUrl)
		setVideoBlob(fileInput[0])
	}

	return (
		<div>
			{/* Boolean to handle whether to render the file uploader or the video editor */}
			{isUpload ? renderUploader() : renderEditor()}
			<div className={'theme_toggler'} onClick={toggleThemes}>
				{isDarkMode ?
					(<i className='toggle' aria-hidden='true'>
						<FontAwesomeIcon icon={faLightbulb} /></i>)
					:
					<i className='toggle'><FontAwesomeIcon icon={faMoon} /></i>}
			</div>
		</div>
	)
}

render() {
    const { openMenu, visibilityClass } = this.state
    return (
      <StaticQuery
        query={graphql`
          query headerLandingTitleQuery {
            site {
              siteMetadata {
                title
              }
            }
          }
        `}
        render={data => (
          <>
            <nav
              id="header"
              className={`navbar navbar-expand-lg ${visibilityClass}`}
            >
              <div className="container">
                <Link className="navbar-brand" to="/">
                  {data.site.siteMetadata.title}.
                </Link>
                <button
                  onClick={_ => this.toggleMenu(!openMenu)}
                  className={`navbar-toggler navbar-toggler-right ${
                    openMenu ? "" : "collapsed"
                  }`}
                  type="button"
                  aria-controls="navbarResponsive"
                  aria-expanded={openMenu}
                  aria-label="Toggle navigation"
                >
                  Ξ
                </button>

                <div
                  className={`collapse navbar-collapse ${
                    openMenu ? "show" : ""
                  }`}
                  id="navbarResponsive"
                >
                  <ul className="navbar-nav ml-auto">
                    <li className="nav-item my-auto ml-2">
                      <Link className="nav-link" to="/">
                        Home
                      </Link>
                    </li>
                    <li className="nav-item my-auto ml-2">
                      <Link
                        className="nav-link"
                        to="https://blog.yezz.me/"
                      >
                        blog
                      </Link>
                    </li>
                    <li className="nav-item my-auto ml-2">
                      <Link className="nav-link" to="/contact">
                        Contact
                      </Link>
                    </li>
                    <li className="nav-item my-auto ml-2">
                      <ThemeToggler>
                        {({ theme, toggleTheme }) => (
                          <label className="theme-toggler nav-link">
                            <input
                              type="checkbox"
                              onChange={e =>
                                toggleTheme(e.target.checked ? "dark" : "light")
                              }
                              checked={theme === "dark"}
                            />
                            {theme === "dark" ? (
                              <div>
                                <FontAwesomeIcon
                                  icon={faSun}
                                  className="mr-2"
                                />{" "}
                              </div>
                            ) : (
                              <div>
                                <div className="icon">
                                  <FontAwesomeIcon
                                    icon={faMoon}
                                    className="mr-2"
                                  />{" "}
                                </div>
                              </div>
                            )}
                          </label>
                        )}
                      </ThemeToggler>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
          </>
        )}
      />
    )
  }