HyTheme - Themes Selector For Site

How to Use

Class	Description
.hy-bg-secondary	Background Color Secondary
.hy-bg-primary	Background Color Primary
.hy-button-secondary	Button Color Secondary
.hy-button-primary	Button Color Primary
.hy-text-secondary	Text Color Secondary
.hy-text-primary	Text Color Primary
.hy-accent	Color Accent

Example

<body class="hy-bg-secondary">
	<!-- Use Background Color Secondary -->
</body>

<section class="hy-bg-primary">
	<!-- Use Background Color Primary -->
</section>

<button class="hy-button-secondary">
	<!-- Use Button Color Secondary -->
</button>

<a class="hy-button-primary">
	<!-- Use Button Color Primary -->
</a>

<h1 class="hy-text-secondary">
	<!-- Use Text Color Secondary -->
</h1>

<p class="hy-text-Primary">
	<!-- Use Text Color Primary -->
</p>

<div class="hy-accent">
	<!-- Use Color Accent -->
</div>

Theme Components

Use our components to easily adjust the colors on your site pages.

Notes !! This ready-to-use component uses Tailwind CSS.

<div class="fixed bottom-12 z-50 right-4 flex gap-2 items-center animate-bounce">
	<span class="bg-blue-600 py-1 px-4 rounded-full text-white">Select Themes</span>
    <button id="togleFloat" class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center focus:outline-none shadow-lg">
		<svg class="h-5 w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
			<path d="M162.4 6c-1.5-3.6-5-6-8.9-6h-19c-3.9 0-7.5 2.4-8.9 6L104.9 57.7c-3.2 8-14.6 8-17.8 0L66.4 6c-1.5-3.6-5-6-8.9-6H48C21.5 0 0 21.5 0 48V224v22.4V256H9.6 374.4 384v-9.6V224 48c0-26.5-21.5-48-48-48H230.5c-3.9 0-7.5 2.4-8.9 6L200.9 57.7c-3.2 8-14.6 8-17.8 0L162.4 6zM0 288v32c0 35.3 28.7 64 64 64h64v64c0 35.3 28.7 64 64 64s64-28.7 64-64V384h64c35.3 0 64-28.7 64-64V288H0zM192 432a16 16 0 1 1 0 32 16 16 0 1 1 0-32z"/>
		</svg>
	</button>
</div>
<div id="menuFloat" class="z-50 bg-white fixed bottom-36 right-4 hidden px-6 py-4 rounded-lg border shadow-lg">
	<h2 class="text-gray-800 font-extrabold text-xl">
		Choose a Theme
	</h2>
	<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
		<div class="bg-blue-400 flex flex-col rounded-md items-center gap-1 p-4">
			<input id="bg-primary" type="color" name="bg-primary" value="#ffffff" data-coloris />
			<label class="text-white text-sm text-center" for="bg-primary">Bg Primary</label>
		</div>
		<div class="bg-blue-400 flex flex-col rounded-md items-center gap-1 p-4">
			<input id="bg-secondary" type="color" name="bg-secondary" value="#f1f5f9" data-coloris />
			<label class="text-white text-sm text-center" for="bg-secondary">Bg Secondary</label>
		</div>
		<div class="bg-blue-400 flex flex-col rounded-md items-center gap-1 p-4">
			<input id="text-primary" type="color" name="text-primary" value="#111827" data-coloris />
			<label class="text-white text-sm text-center" for="text-primary">Text Primary</label>
		</div>
		<div class="bg-blue-400 flex flex-col rounded-md items-center gap-1 p-4">
			<input id="text-secondary" type="color" name="text-secondary" value="#ffffff" data-coloris />
			<label class="text-white text-sm text-center" for="text-secondary">Text Secondary</label>
		</div>
		<div class="bg-blue-400 flex flex-col rounded-md items-center gap-1 p-4">
			<input id="btn-primary" type="color" name="btn-primary" value="#4f46e5" data-coloris />
			<label class="text-white text-sm text-center" for="btn-primary">Btn Primary</label>
		</div>
		<div class="bg-blue-400 flex flex-col rounded-md items-center gap-1 p-4">
			<input id="btn-secondary" type="color" name="btn-secondary" value="#c7d2fe" data-coloris />
			<label class="text-white text-sm text-center" for="btn-secondary">Btn Secondary</label>
		</div>
		<div class="bg-blue-400 flex flex-col rounded-md items-center gap-1 p-4">
			<input id="accent" type="color" name="accent" value="#c026d3" data-coloris />
			<label class="text-white text-sm text-center" for="accent">Accent</label>
		</div>
		<button id="toggleDarkMode" class="bg-blue-400 flex flex-col rounded-md items-center gap-1 p-4 flex justify-center">
			<svg class="text-white h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
			<path d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/>
			</svg>
			<span class="text-white text-sm text-center">Light/Dark Mode</span>
		</button>
	</div>
	<div class="mt-4">
        <label for="fontSelector" class="text-gray-800 font-bold">Select a Font:</label>
        <select id="fontSelector" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
            <option value="Arial">Arial</option>
			<option value="Verdana">Verdana</option>
			<option value="Helvetica">Helvetica</option>
			<option value="Times New Roman">Times New Roman</option>
			<option value="Georgia">Georgia</option>
			<option value="Tahoma">Tahoma</option>
			<option value="Calibri">Calibri</option>
			<option value="Palatino">Palatino</option>
			<option value="Cambria">Cambria</option>
			<option value="Garamond">Garamond</option>
			<option value="Trebuchet MS">Trebuchet MS</option>
		</select>
    </div>
	<div class="mt-4">
		<label for="colorSetSelector" class="text-gray-800 font-bold">Select a Color Set:</label>
		<select id="colorSetSelector" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
			<option value="set1">Default</option>
			<option value="set2">Themes 2</option>
			<option value="set3">Themes 3</option>
			<option value="set4">Themes 4</option>
			<option value="set5">Themes 5</option>
			<option value="set6">Themes 6</option>
			<option value="set7">Themes 7</option>
			<option value="set8">Themes 8</option>
			<option value="set9">Themes 9</option>
			<option value="set10">Themes 10</option>
			<option value="set11">Themes 11</option>
			<option value="set12">Themes 12</option>
			<option value="set13">Themes 13</option>
			<option value="set14">Themes 14</option>
			<option value="set15">Themes 15</option>
			<option value="set16">Themes 16</option>
			<option value="set17">Themes 17</option>
			<option value="set18">Themes 18</option>
			<option value="set19">Themes 19</option>
			<option value="set20">Themes 20</option>
		</select>
    </div>
	<button id="resetDefaults" class="mt-4 w-full bg-rose-500 flex rounded-md items-center gap-2 p-4 flex justify-center">
			<svg class="text-white h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
			<path d="M566.6 9.4c12.5 12.5 12.5 32.8 0 45.3l-192 192 34.7 34.7c4.2 4.2 6.6 10 6.6 16c0 12.5-10.1 22.6-22.6 22.6H364.3L256 211.7V182.6c0-12.5 10.1-22.6 22.6-22.6c6 0 11.8 2.4 16 6.6l34.7 34.7 192-192c12.5-12.5 32.8-12.5 45.3 0zm-344 225.5L341.1 353.4c3.7 42.7-11.7 85.2-42.3 115.8C271.4 496.6 234.2 512 195.5 512L22.1 512C9.9 512 0 502.1 0 489.9c0-6.3 2.7-12.3 7.3-16.5L133.7 359.7c4.2-3.7-.4-10.4-5.4-7.9L77.2 377.4c-6.1 3-13.2-1.4-13.2-8.2c0-31.5 12.5-61.7 34.8-84l8-8c30.6-30.6 73.1-45.9 115.8-42.3zM464 352a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"/>
			</svg>
			<span class="text-white text-sm text-center" for="accent">Reset</span>
	</button>
</div>

<script>
	const togleFloat = document.getElementById('togleFloat');
	const menuFloat = document.getElementById('menuFloat');
	togleFloat.addEventListener('click', () => {
		menuFloat.classList.toggle('hidden');
	});
</script>