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

The following examples show how to use @fortawesome/free-solid-svg-icons#faSun. 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 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 #2
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 #3
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 #4
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 #5
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>
          </>
        )}
      />
    )
  }