react-icons/fa#FaMoon JavaScript Examples

The following examples show how to use react-icons/fa#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: ThemeToggler.js    From ReactJS-Projects with MIT License 6 votes vote down vote up
ThemeToggler = () => {
    const [themeMode, setThemeMode] = useContext(ThemeContext);

    return (
        <div style={{ cursor: 'pointer' }}
            onClick={() => {
                setThemeMode(themeMode === "light" ? "dark" : "light");
            }}>
            <p>{themeMode === "light" ? <FaMoon /> : <FaSun />}</p>
        </div>

    )
}
Example #2
Source File: ColorModeSwitcher.js    From react-sample-projects with MIT License 6 votes vote down vote up
ColorModeSwitcher = props => {
  const { toggleColorMode } = useColorMode();
  const text = useColorModeValue('dark', 'light');
  const SwitchIcon = useColorModeValue(FaMoon, FaSun);

  return (
    <IconButton
      size="md"
      fontSize="lg"
      aria-label={`Switch to ${text} mode`}
      variant="ghost"
      color="current"
      marginLeft="2"
      onClick={toggleColorMode}
      icon={<SwitchIcon />}
      {...props}
    />
  );
}
Example #3
Source File: ColorModeSwitcher.jsx    From realtime-chat-supabase-react with Apache License 2.0 6 votes vote down vote up
ColorModeSwitcher = (props) => {
  const { toggleColorMode } = useColorMode();
  const text = useColorModeValue("dark", "light");
  const SwitchIcon = useColorModeValue(FaMoon, FaSun);

  return (
    <IconButton
      size="md"
      fontSize="lg"
      aria-label={`Switch to ${text} mode`}
      variant="ghost"
      color="current"
      marginLeft="2"
      onClick={toggleColorMode}
      icon={<SwitchIcon />}
      {...props}
    />
  );
}
Example #4
Source File: Toggle.js    From gitpedia with MIT License 5 votes vote down vote up
Toggle = ({ isDark, onToggle }) => {
    return (
        <ToggleSpan>
            <Button onClick={onToggle}>{isDark ? <FaMoon /> : <FaSun />}</Button>
        </ToggleSpan>
    )
}
Example #5
Source File: Container.jsx    From bottle-radio with MIT License 4 votes vote down vote up
Container = () => {
  const { colorMode, toggleColorMode } = useColorMode();
  const color = { light: "black", dark: "white" };
  const [logoSpinning, setLogoSpinning] = useState(false);
  const [modal, setModal] = useState();
  const [showVisualiser, setShowVisualiser] = useState(false);
  const [player, setPlayer] = useState();

  const EmbedCode = () => {
    const [show, setShow] = React.useState(false);
    const handleToggle = () => setShow(!show);

    return (
      <Box mt="auto" pt={2} mb={3} mx={2}>
        <Collapse in={show}>
          <Code my={2} p={2} overflow="auto">
            {`<iframe src = '${window.location.protocol}//${window.location.host}/embed' frameborder = '0' allowtransparency = 'true' style = 'width: 100%; min-height: 150px; border: 0;'></iframe>`}
          </Code>
        </Collapse>
        <Button colorScheme="blue" variant="link" onClick={handleToggle}>
          Embed player
        </Button>
      </Box>
    );
  };

  return (
    <Fragment>
      <VisualiserProvider value={{ player, setPlayer }}>
        <Box
          width="100%"
          minHeight="100vh"
          bg={colorMode === "light" ? "#99c0ff" : "#1a202c"}
          color={colorMode === "light" ? "black" : "white"}
        >
          {player && (
            <Box pos="absolute" bottom={0} left={0} pointerEvents="none">
              <Collapse in={showVisualiser}>
                <Visualisation audio={player.current} />
              </Collapse>
            </Box>
          )}
          <Flex
            direction="column"
            justify="flex-start"
            align="center"
            width="100%"
            maxWidth="960px"
            minHeight="100vh"
            mx="auto"
            pt={5}
            pos="relative"
            zindex={1}
          >
            <Box
              as={colorMode === "light" ? FaMoon : FaSun}
              w="30px"
              h="30px"
              onClick={toggleColorMode}
              color={color[colorMode]}
            />
            <Box px={5}>
              <Image
                src="/logo512.png"
                maxWidth="230px"
                mx="auto"
                mt={3}
                className={logoSpinning ? "icon-spin" : ""}
                onClick={() =>
                  logoSpinning ? setLogoSpinning(false) : setLogoSpinning(true)
                }
              />
              <ModalProvider value={{ modal, setModal }}>
                <Player />
              </ModalProvider>
              <Links />
              <Button
                mt={2}
                variant="link"
                onClick={() => setShowVisualiser(!showVisualiser)}
              >
                Visualiser
              </Button>
            </Box>
            <EmbedCode />
            <Text mb={3}>
              Powered by{" "}
              <Link
                href="https://github.com/MrLemur/bottle-radio"
                color="teal.500"
                isExternal
              >
                Bottle Radio
              </Link>
            </Text>
          </Flex>
        </Box>
      </VisualiserProvider>
    </Fragment>
  );
}
Example #6
Source File: NavBar.js    From MeowForm with MIT License 4 votes vote down vote up
function Navbar(props) {
    const {colorMode , toggleColorMode }= useColorMode();
    const isDark = colorMode === 'dark';
    const { isOpen, onOpen, onClose } = useDisclosure()
    const [size, setSize] = React.useState("md")
    const [check] = useMediaQuery("(min-width: 1025px)")
    const [meow ,setMeow] = React.useState(false);
    const [signIn,setSignIn] = React.useState(false);
    const  formBackground = useColorModeValue("white.100","gray.900");
    const { loginWithRedirect , logout  , isAuthenticated , user} = useAuth0();


    let flag = false;
    var setFlag  = () =>{
      setMeow(!meow);
      onClose();
    }
  
    return (
        <>

        <Box position="fixed" width="100%" backgroundColor="#fff" background={formBackground} zIndex="1000" >

       <VStack p={5} >
           <Flex w="100%">
            <Link to="/">
            <Text ml="8"  bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" bgClip="text"
              fontSize={check ?"3xl":"xl"}
              fontWeight="extrabold"
              z-index={5}
              >
                  MeowForm
            </Text>
            </Link>
           <Spacer>

           </Spacer>

         
           <Tooltip label="Menu">
            <IconButton onClick={onOpen} ml={2} mr={1} icon={<FaList  />} isRound="true"></IconButton>
           </Tooltip>
           {check &&
           <Tooltip label="Star! on github" >
            <a href='https://github.com/tewarig/' target='_blank'><IconButton ml={2} mr={1} icon={<FaGithub />}  isRound="true"></IconButton></a>           
           </Tooltip>
           }
           { check &&
           <Tooltip label={isDark ? "Light mode":"Dark Mode"} >
           <IconButton ml={2} mr={1} icon={ isDark ? <FaSun /> : <FaMoon /> } isRound="true" onClick={toggleColorMode}>
           </IconButton>
           </Tooltip>
             }
             <Tooltip  label="Manage Profile">
               <Box ml={5} mr={1}>
             
               </Box>
             </Tooltip>
             { user &&
              <Menu>
              {({ isOpen }) => (
                <>
                  <MenuButton isActive={isOpen} >
                  <Avatar name={user.name} src={user.picture} />
                  </MenuButton>
                  <MenuList>
                    <MenuItem>Hi , {user.name}</MenuItem>
                    <Link to="/dashboard">
                    <MenuItem> Dashboard </MenuItem>
                    </Link>

                    <MenuItem onClick={() => logout()}>Logout</MenuItem>
                  </MenuList>
                </>
              )}
            </Menu>
             }
             { !isAuthenticated && 
                 <Tooltip label="Sign in / SignUp "> 
                  <Menu>
              {({ isOpen }) => (
                <>
                  <MenuButton isActive={isOpen} >
                  <Avatar   />

                  </MenuButton>
                  <MenuList>
                    <MenuItem  onClick={()=>(loginWithRedirect()) }>Sign In/Sign Up </MenuItem>
                  </MenuList>
                </>
              )}
            </Menu>
                   {/* <IconButton icon={<FaUser />} isRound="true"  onClick={()=>(loginWithRedirect())}>
                   </IconButton> */}
                 </Tooltip>
              } 
             

  
             </Flex>
         </VStack>
         <Divider  bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" height={1} />
         <Drawer onClose={meow ? setFlag : onClose } isOpen={isOpen} size={"xs"}>
                       <DrawerOverlay />
                       <DrawerContent>
                         <DrawerHeader align="center"> 
                          
                         <Text   bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" bgClip="text"
                          fontSize={useDisclosure ? "5xl" : "3xl"}
                          fontWeight="extrabold"
                          >
                           MeowForm
                        </Text>
                             </DrawerHeader>
                         <DrawerBody>
                        
                                      <Box>
                                      {!check &&
                                      <Button ml="1%" mt="5%" width="100%" onClick={toggleColorMode} >
                                      {isDark ? <FaSun color="yellow"/> : <FaMoon color="#59e5f7"/> }  
                                      
                                      <Text fontSize="xl" ml="4%">
                                      {isDark ?  "Light Mode" : "Dark Mode"}
                                      </Text>
                                      </Button>
                                     }
                                                                 
                                        
            
            
           
            
                                   <MenuItems onClose={onClose}></MenuItems>
                          <Text>
                          </Text>
                           </Box>
                      
                         
                            
                            

                       
                       </DrawerBody>
                     </DrawerContent>
                   </Drawer>


              </Box>
              <Box height="15vh">
                          </Box>
       </>
    );
}