ionutilie
(Ionut)
December 31, 2021, 2:07pm
#1
Hello.
I need to change the color of an element when entering the HEX code in an input field.
I saw this post (Change the background of the input field based on user input ), but I need it for any color / code, not for specific color list.
Thank you for your support!
Change Color.zip (42.5 KB)
h_classen
(Hans-Gerd Claßen)
December 31, 2021, 4:53pm
#2
very basic:
hex.addEventListener("change", myFunction);
function myFunction(e) {
let hexColor = (e.target.value).trim();
if(hexColor.indexOf('#') != -1) textToChange.style.setProperty('color', hexColor)
}
but would any user know the hexcolors?
4 Likes
ionutilie
(Ionut)
December 31, 2021, 5:33pm
#3
Thank you @h_classen Hans!
There is a scenario in my project where the user might have this need.
MarkHunte
(Mark Hunte)
December 31, 2021, 5:40pm
#4
Since I was working on it.
You can use css variables.
<style>
:root {
--hexcolor: #E8EBED;
--smallsampleFont: darkgrey;
}
.sceneBackground{
background-color: var(--hexcolor)!important;
}
</style>
and
var hexInput = document.getElementById("hex")
var rootEl = document.querySelector(':root');
hexInput.onchange = function(event){
rootEl.style.setProperty('--hexcolor', event.target.value);
}
Change Color.hype.zip (64.0 KB)
4 Likes
ionutilie
(Ionut)
December 31, 2021, 5:55pm
#5
Thank you so much @MarkHunte !
Thank you for your effort and I wish you all the best!
MarkHunte
(Mark Hunte)
December 31, 2021, 6:00pm
#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
ionutilie
(Ionut)
December 31, 2021, 6:05pm
#7
Waa, thank yooou @MarkHunte !
1 Like
MarkHunte
(Mark Hunte)
December 31, 2021, 7:46pm
#8
Note also since we are not forcing only hex colours, you can also use named colours.
i.e , red, pink, purple and so on, which gets around people not know hex colours.. (@h_classen very good point )
2 Likes
ionutilie
(Ionut)
December 31, 2021, 9:26pm
#9
Amazing detail! I was not aware about it!
Thank you!
1 Like