color selectors now work

This commit is contained in:
bhomie 2020-06-16 20:59:36 -07:00
parent 4e3674bc94
commit 61fad848c8
2 changed files with 14 additions and 9 deletions

View file

@ -429,19 +429,19 @@
<div class="tabContainer">
<div tabContent="custom" class="tabContent section customTheme">
<label class="text">background</label>
<input class="input colorPicker" type="color" value="#ff0000">
<input class="input colorPicker" type="color" value="#ff0000" colorVar="--bg-color">
<label class="text">main</label>
<input class="input colorPicker" type="color" value="#00ff00">
<input class="input colorPicker" type="color" value="#00ff00" colorVar="--main-color">
<label class="text">caret</label>
<input class="input colorPicker" type="color" value="#ff00ff">
<input class="input colorPicker" type="color" value="#ff00ff" colorVar="--caret-color">
<label class="text">sub</label>
<input class="input colorPicker" type="color" value="#0000ff">
<input class="input colorPicker" type="color" value="#0000ff" colorVar="--sub-color">
<label class="text">text</label>
<input class="input colorPicker" type="color" value="#f0f000">
<input class="input colorPicker" type="color" value="#f0f000" colorVar="--text-color">
<label class="text">error</label>
<input class="input colorPicker" type="color" value="#f000f0">
<input class="input colorPicker" type="color" value="#f000f0" colorVar="--error-color">
<label class="text">extra error</label>
<input class="input colorPicker" type="color" value="#00f0f0">
<input class="input colorPicker" type="color" value="#00f0f0" colorVar="--error-extra-color">
</div>
<div tabContent="preset" class="tabContent buttons">
</div>

View file

@ -458,6 +458,11 @@ $(".tab").click(e => {
$('[tabContent="custom"]').addClass("reveal")
}, 250);
}
console.log($target.attr('tab'))
})
$('.colorPicker').change(e => {
var $colorVar = $(event.currentTarget).attr('colorVar')
var $pickedColor = $(event.currentTarget).val();
document.documentElement.style.setProperty($colorVar, $pickedColor)
})