Initializing Pichai UX

Documentation about initializing Pichai UX and common settings for initializing.

Basic initialization

The init function of Pichai takes an Object as input. In the below table you can see each option and what they do.

let pichai = new PichaiUX(options).initialize();

Key	Value	Description
source	String	This can both be a #RRGGBB value or a background image, generates a pallete to fit with the given source.
darkMode	Boolean	Whether dark mode or light mode should be used.
overrideColorsOnScroll	Boolean	Whether the AI should keep checking if the elements colors still work at the position on the current scroll position.
themedFavIcon	Boolean	Updates the favIcon to match the selected theme.
extractionPosition	Number (1 - 10)	Sets the position from where Pichai-UX extracts its colors.
homeLink	url	The link to where the user will be navigated when he presses the logo or title in the template header. To disable it you can set it to an empty string.

Basic usage

After initializing Pichai. You'll notice that newCSS files have been added to the project aswell as the below CSS variables.

CSS variables

Pichai-UX uses the 3 most dominant colors in the image and assigns a CSS variable to them.

Name	Description
--primary	The primary color.
--primaryTextColor	The primary text color.
--primaryContainer	The primary container color.
--primaryContainerTextColor	The primary container text color.
--secondairy	The secondairy color.
--secondairyTextColor	The secondairy text color.
--secondairyContainer	The secondairy container color.
--secondairyContainerTextColor	The secondairy container text color.
--tertiaryTextColor	The tertiary color.
--tertiaryTextColor	The tertiary text color.
--tertiaryContainer	The tertiary container color.
--tertiaryContainerTextColor	The tertiary container text color.

Functions

Function	input	Output	Description
optimizeTextColor	HTML Element		Make any unreadable text color readable.
generateDynamicIcon	Image	Base64	Generates an new version of an icon completely themed to fit together with the theme.
getListOfElements		Object	Returns a JS object with all the custom elements,their attributes and attribute input types defined by Pichai-UX.