react-icons/fi#FiMoon JavaScript Examples

export default function ThemeSwitcher({ themeName, setThemeName }) {
  if (typeof themeName === 'undefined') return null
  const checked = themeName === "light"

  function flipTheme() {
    if (themeName === "light") {
      setThemeName("dark")
    } else {
      setThemeName("light")
    }
  }

  return <div>
    <Switch onChange={flipTheme}
            checked={checked}
            offColor={"#222"}
            onColor={"#fff"}
            onHandleColor={"#0288d1"}
            offHandleColor={"#0288d1"}
            uncheckedIcon={
              <FiMoon css={iconCommonCss} />
            }
            checkedIcon={
              <FiSun css={iconCommonCss} color={"#222"} />
            }
            role="switch"
            aria-checked={String(checked)}
            aria-label={checked ? "Toggle dark theme" : "Toggle light theme"}
    />
  </div>
}

ThemeToggle = () => {
  const [darkMode, setDarkMode] = useContext(ThemeContext);

  const toggleTheme = () => {
    storage.set('theme', !darkMode);
    setDarkMode(!darkMode);
  };

  return (
    <span className={styles.toggleIcon}>
      {darkMode === true ? (
        <FiSun className={styles.FiSun} onClick={toggleTheme} />
      ) : (
        <FiMoon className={styles.FiMoon} onClick={toggleTheme} />
      )}
    </span>
  );
}

function Nav() {
  const router = useRouter();
  const [ddShown, setDDShown] = useState(false);
  const navRef = useRef(null);

  let handleClickOut = (e) => {
    if (navRef.current && !navRef.current.contains(e.target)) {
      setDDShown(false);
      navRef.current.classList.remove("shown");
    }

    if (navRef.current && navRef.current.contains(e.target)) {
      setDDShown(false);
      setTimeout(() => {
        navRef.current.classList.remove("shown");
      }, 200);
    }
  };

  useEffect(() => {
    window.addEventListener("mousedown", handleClickOut);

    // cleanup this component
    return () => {
      window.removeEventListener("mousedown", handleClickOut);
    };
  }, []);

  let switchTheme = () => {
    let body = document.querySelector("body");

    if (body.classList.contains("light")) {
      localStorage.setItem("wiTheme", "dark");
      body.classList.replace("light", "dark");
    } else {
      localStorage.setItem("wiTheme", "light");
      body.classList.replace("dark", "light");
    }
  };

  const toggleDD = () => {
    if (ddShown) {
      navRef.current.classList.remove("shown");
    } else {
      navRef.current.classList.add("shown");
    }

    setDDShown(!ddShown);
  };

  return (
    <header>
      <div className={styles.brand}>
        <Link href="/">
          <a>winstall</a>
        </Link>
        {/* <span className="preview">&nbsp;(preview)</span> */}
      </div>

      <div className={styles.nav} ref={navRef}>
        <Link href="/apps">
          <a>
            <FiPackage />
            <p>Apps</p>
          </a>
        </Link>
        <Link href="/packs">
          <a>
            <FiGrid />
            <p>Packs</p>
          </a>
        </Link>
        <a
          href="https://ko-fi.com/mehedi"
          target="_blank"
          rel="noopener noreferrer"
          className={styles.justIcon}
        >
          <FiHeart />
          <p className={styles.ddOnly}>Support winstall</p>
        </a>
        <span onClick={switchTheme} className={styles.justIcon}>
          <FiMoon className="moon" />
          <FiSun className="sun" />
          <p className={styles.ddOnly}>Switch theme</p>
        </span>
        <User />
      </div>

      <span className={`mobileDD ${styles.dropdown}`} onClick={toggleDD}>
        {ddShown ? <FiX /> : <FiChevronDown />}
      </span>
    </header>
  );
}

Header = () => {
  const {theme, colorMode, setColorMode} = useThemeUI()

  return (
    <Headroom disableInlineStyles upTolerance={10} downTolerance={10}>
      <header style={{background: `${theme.colors.muted}`}} className='header'>
        <div className='header-content'>
          <div>
            <Styled.h1 style={{margin: '0'}}>
              <NextLink href='/' passHref>
                <Styled.a
                  style={{
                    textDecoration: 'none',
                    fontFamily: 'Damion',
                    letterSpacing: '0.15rem',
                  }}
                  onClick={() =>
                    trackGAEvent('logo', `clicked on site logo`, 'link click')
                  }
                  rel='noreferrer noopener'>
                  Blog
                </Styled.a>
              </NextLink>
            </Styled.h1>
          </div>
          <div className='header-links'>
            {/* <Styled.h2 style={{ margin: "0 1rem" }}>
              <Styled.a as={Link} to="/">
                Tags
              </Styled.a>
            </Styled.h2> */}
            {/* <p>
              <GoSearch
                title="Search"
                style={{
                  fontSize: "1.2rem",
                  verticalAlign: "middle",
                  marginTop: "0.2rem",
                }}
              />
            </p> */}
            <p>
              {colorMode === 'light' ? (
                <span
                  title='Switch to Dark Mode'
                  aria-label='Switch to Dark Mode'>
                  <FiSun
                    className='theme-icon'
                    onClick={() => {
                      setColorMode('dark')
                      trackGAEvent(
                        'toggle theme',
                        `enabled dark theme`,
                        'icon click'
                      )
                    }}
                  />
                </span>
              ) : (
                <span
                  title='Switch to Light Mode'
                  aria-label='Switch to Light Mode'>
                  <FiMoon
                    className='theme-icon'
                    onClick={() => {
                      setColorMode('light')
                      trackGAEvent(
                        'toggle theme',
                        `enabled light theme`,
                        'icon click'
                      )
                    }}
                  />
                </span>
              )}
            </p>
          </div>
        </div>
      </header>
    </Headroom>
  )
}