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

The following examples show how to use @fortawesome/free-solid-svg-icons#faMoon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From gatsby-blog-mdx with MIT License 6 votes vote down vote up
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>
    )
  }
Example #2
Source File: index.js    From Official-Website with MIT License 6 votes vote down vote up
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>
    );
  }
Example #3
Source File: Icon.js    From mailmask with GNU Affero General Public License v3.0 6 votes vote down vote up
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,
}
Example #4
Source File: theme.js    From gatsby-starter-scientist with MIT License 6 votes vote down vote up
Theme = ({
  darkMode,
  toggle,
}) => (
  <ButtonIcon
    ariaLabel={`switch to ${darkMode ? 'light' : 'dark'} mode`}
    icon={darkMode ? faMoon : faSun}
    kind="primary"
    onClick={toggle}
    type="button"
  />
)
Example #5
Source File: Header.jsx    From UniDrive with GNU General Public License v2.0 5 votes vote down vote up
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>
  );
}
Example #6
Source File: VideoEditor.js    From Reactive with MIT License 4 votes vote down vote up
// 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>
	)
}
Example #7
Source File: header.js    From yezz.me with MIT License 4 votes vote down vote up
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>
          </>
        )}
      />
    )
  }