Ability to change color to the UI

[Goz-exe]

Ability to change color to the UI

[LukeWasTakenn]

All of the styling for the context menu is written with Chakra's built in styling system here:

ox_lib/web/src/features/menu/ContextMenu.tsx

Lines 83 to 130 in 4fc6366

	<Flex
	position="absolute"
	w="75%"
	h="80%"
	justifyContent="flex-end"
	alignItems="center"
	>
	<ScaleFade in={visible} unmountOnExit>
	<Box w="xs" h={580}>
	<Flex justifyContent="center" alignItems="center" mb={3}>
	{contextMenu.menu && (
	<Flex
	borderRadius="md"
	bg="gray.800"
	flex="1 15%"
	alignSelf="stretch"
	textAlign="center"
	justifyContent="center"
	alignItems="center"
	marginRight={2}
	p={2}
	_hover={{ bg: "gray.700" }}
	transition="300ms"
	onClick={() => openMenu(contextMenu.menu)}
	>
	<FontAwesomeIcon icon="chevron-left" />
	</Flex>
	)}
	<Box borderRadius="md" bg="gray.800" flex="1 85%">
	<Text
	fontFamily="Poppins"
	fontSize="md"
	p={2}
	textAlign="center"
	fontWeight="light"
	>
	{contextMenu.title}
	</Text>
	</Box>
	</Flex>
	<Box maxH={560} overflowY="scroll">
	{Object.entries(contextMenu.options).map((option, index) => (
	<Item option={option} key={`context-item-${index}`} />
	))}
	</Box>
	</Box>
	</ScaleFade>
	</Flex>

ox_lib/web/src/features/menu/Item.tsx

Lines 30 to 143 in 4fc6366

	<>
	<Popover
	placement="right-start"
	trigger="hover"
	eventListeners={{ scroll: true }}
	isLazy
	>
	<PopoverTrigger>
	<Box
	bg="gray.800"
	borderRadius="md"
	h="fit-content"
	w="100%"
	p={2}
	mb={1}
	fontFamily="Poppins"
	fontSize="md"
	transition="300ms"
	_hover={{ bg: "gray.700" }}
	>
	<Flex
	w="100%"
	alignItems="center"
	onClick={() =>
	option[1].menu
	? openMenu(option[1].menu)
	: clickContext(option[0])
	}
	>
	{option[1]?.icon && (
	<FontAwesomeIcon
	fixedWidth
	icon={option[1].icon}
	fontSize={20}
	style={{
	marginRight: 10,
	justifySelf: "center",
	color: option[1].iconColor,
	}}
	/>
	)}
	<Box>
	<Box paddingBottom={option[1].description ? 1 : 0}>
	<Text w="100%" fontWeight="medium">
	{option[1].title ? option[1].title : option[0]}
	</Text>
	</Box>
	{option[1].description && (
	<Box paddingBottom={1}>
	<Text>{option[1].description}</Text>
	</Box>
	)}
	</Box>
	{(option[1].menu || option[1].arrow) && (
	<>
	<Spacer />
	<Box
	alignSelf="center"
	justifySelf="center"
	mr={4}
	fontSize="xl"
	>
	<FontAwesomeIcon icon="chevron-right" />
	</Box>
	</>
	)}
	</Flex>
	<Portal>
	{(option[1].metadata || option[1].image) && (
	<PopoverContent
	fontFamily="Poppins"
	bg="gray.800"
	outline="none"
	border="none"
	w="fit-content"
	maxW="2xs"
	>
	<PopoverBody>
	<>
	{option[1].image && <Image src={option[1].image} />}
	{Array.isArray(option[1].metadata) ? (
	option[1].metadata.map(
	(
	metadata: string | { label: string; value: any },
	index: number
	) => (
	<Text key={`context-metadata-${index}`}>
	{typeof metadata === "string"
	? `${metadata}`
	: `${metadata.label}: ${metadata.value}`}
	</Text>
	)
	)
	) : (
	<>
	{typeof option[1].metadata === "object" &&
	Object.entries(option[1].metadata).map(
	(metadata: { [key: string]: any }, index) => (
	<Text key={`context-metadata-${index}`}>
	{metadata[0]}: {metadata[1]}
	</Text>
	)
	)}
	</>
	)}
	</>
	</PopoverBody>
	</PopoverContent>
	)}
	</Portal>
	</Box>
	</PopoverTrigger>
	</Popover>
	</>

[Goz-exe]

Yes but I am using the latest version 2.6.0 which does not have src

[Goz-exe]

@LukeWasTakenn

[LukeWasTakenn]

If you want to edit the styling you have to download the source code, edit what you want and then compile the source code yourself.

[Goz-exe]

@LukeWasTakenn
Thank you very much, could you tell me the documentation to do the build once it's finished?

[LukeWasTakenn]

All the info you need is on this page:

https://overextended.github.io/docs/ox_lib

[Goz-exe]

@LukeWasTakenn Last question how do I change these colors?