How to change the background color by using HEX code in input

Using JavaScript with Hype Function Library
6

This version shows you the advantage of using the vars.

Since we are using a class name with the background, we just have to give that class to other elements. i.e other scene backgrounds.

They will pick up automatically the same colour.

This one also shows you your font change using the same idea and the additional HTML attributes for the font option buttons.

	<style>
	:root {
  --hexcolor: #E8EBED;
  --wishTextFont: Inter;
}


.sceneBackground{
background-color: var(--hexcolor)!important;
}

.wishText{
font-family: var(--wishTextFont)!important;
}
</style>

and

var wishText_ = document.getElementById("wishText")
var rootEl = document.querySelector(':root');
rootEl.style.setProperty('--wishTextFont', element.dataset.font);

Update:
I forgot to add the wish text class name 'wishText' to both text boxes on each scene

Change Color and Font.hype 2.zip (126.3 KB)

3 Likes