Change Form Theme Color By Color Picker

Written by @kerixa 6 March 2021

Forms have always been an important part of sites and are a place to receive information from users. Therefore, the use of special styles that enhance the beauty of these forms is very important. One of the effects utilized is applying different colors to the themes and their forms. In the following code example, by selecting the desired color, the form or panel will obtain a new color.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
html {
    background-color: gray;
}

html body #form {
 
	top: 5;
	left: 5;
	width: max-content;
	border: 1px darkgray solid;
	padding: 5px;
	background: #fff;
	border-radius: 5px;
}

	html body #form label, html body #form input {
		display: block;
		margin: 20px;
		width: 120px;
	}

html body #output {
	width: 200px;
	padding: 25px;
	background: #fff;
	border-radius: 5px;
	border: 2px solid var(--theme-color);
	margin: 10px auto;
	color: var(--theme-color);
}

html body #output div {
	height: 100px;
	width: 100px;
	display: block;
	background: var(--theme-color);
}

html body #output input {
	display: block;
	border: 1px solid var(--theme-color);
	margin-bottom: 10px;
	outline: none;
}

html body #output button {
	padding: 5px 25px;
	border-radius: 25px;
	background-color: var(--theme-color);
	font-weight: bold;
	border: 0.5px solid var(--theme-color);
	color: #fff;
}
</style>
<div id="form">
	<label for="color">Choose a Color</label>
	<input name="color" id="color" type="color" value="#666" onChange="updateColor()">
</div>
<div id="output">
	<h2>Template</h2>
	<p>Watch Me Change</p>
	<input placeholder="Text Box"></input>
	<button>Submit</button>
</div>
<script>
let colorInput = document.getElementById('color');
let outputx = document.getElementById('box');

function updateColor() {
    console.log(colorInput.value)
    output.style = "--theme-color:" + colorInput.value + ";";
}
updateColor()
</script>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300