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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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>
</>
);
}
