Style Customizer Prototype
A while back I saw Jason Pamental show off a style customizer or accessibility panel during one of his presentations. I really liked the idea and today I gave it shot. It's not nearly complete or in its ideal form, but I'm glad I was able to get it working to some extent.
This is a header
This is a paragraph of text containing some words that I need to make it look like this paragraph has content. I can't fill this in with Lorem Ipsum at the moment because my computer is not connected to the internet.
Best Pringles Available in Japan
- Karaage
- Fish and Chips
- Thai Chili
View the code:
HTML and JS
<section class="code-block">
<h1>This is a header</h1>
<p>This is a paragraph of text containing some words that I need to make it look like this paragraph has content. I can't fill this in with Lorem Ipsum at the moment because my computer is not connected to the internet.</p>
<h2>Best Pringles Available in Japan</h2>
<ol>
<li>Karaage</li>
<li>Fish and Chips</li>
<li>Thai Chili</li>
</ol>
<aside class="style-customizer">
<h5>Customize the look of this page:</h5>
<h6>Text Size:</h6>
<div>
<ul class="text-size-scale-labels">
<li><label for="radioTextSizeSmallest" title="Smallest">aA</label></li><li><label for="radioTextSizeSmaller" title="Smaller">aA</label></li><li><label for="radioTextSizeDefault" title="Default">aA</label></li><li><label for="radioTextSizeLarger" title="Larger">aA</label></li><li><label for="radioTextSizeLargest" title="Largest">aA</label></li>
</ul>
<ul class="text-size-scale">
<li><input type="radio" name="textSizes" id="radioTextSizeSmallest" title="Smallest"></li><li><input type="radio" name="textSizes" id="radioTextSizeSmaller" title="Smaller"></li><li><input type="radio" name="textSizes" id="radioTextSizeDefault" title="Default"></li><li><input type="radio" name="textSizes" id="radioTextSizeLarger" title="Larger"></li><li><input type="radio" name="textSizes" id="radioTextSizeLargest" title="Largest"></li>
</ul>
</div>
<h6>Color Mode:</h6>
<input type="radio" name="radioColorMode" value="light" id="radioLightMode"><label for="radioLightMode">Light</label>
<input type="radio" name="radioColorMode" id="radioDarkMode"><label for="radioDarkMode">Dark</label>
</aside>
</section>
<script>
// Define variables
const rdoTextSmallest = document.querySelector('#radioTextSizeSmallest');
const rdoTextSmaller = document.querySelector('#radioTextSizeSmaller');
const rdoTextDefault = document.querySelector('#radioTextSizeDefault');
const rdoTextLarger = document.querySelector('#radioTextSizeLarger');
const rdoTextLargest = document.querySelector('#radioTextSizeLargest');
const rdoLightMode = document.querySelector('#radioLightMode');
const rdoDarkMode = document.querySelector('#radioDarkMode');
let root = document.documentElement; //Thanks Chris Coyier! - https://css-tricks.com/updating-a-css-variable-with-javascript/
// Functions
// Events
rdoTextSmallest.addEventListener('click', () => {
console.log('Text set to smallest size.');
root.style.setProperty('--base-text-size', '12pt');
});
rdoTextSmaller.addEventListener('click', () => {
console.log('Text set to smaller size.');
root.style.setProperty('--base-text-size', '14pt');
});
rdoTextDefault.addEventListener('click', () => {
console.log('Text set to default size.');
root.style.setProperty('--base-text-size', '16pt');
});
rdoTextLarger.addEventListener('click', () => {
console.log('Text set to larger size.');
root.style.setProperty('--base-text-size', '18pt');
});
rdoTextLargest.addEventListener('click', () => {
console.log('Text set to largest size.');
root.style.setProperty('--base-text-size', '20pt');
});
rdoLightMode.addEventListener('click', () => {
console.log('Switched to Light Mode');
root.style.setProperty('--bg-color', 'rgba(0,0,0,0.1)');
root.style.setProperty('--text-color', '#222');
root.style.setProperty('--accent-color', 'rgb(201, 64, 0)');
});
rdoDarkMode.addEventListener('click', () => {
console.log('Switched to Dark Mode');
root.style.setProperty('--bg-color', 'rgba(0,0,0,0.9)');
root.style.setProperty('--text-color', '#dedede');
root.style.setProperty('--accent-color', 'rgb(120, 217, 100)');
});
</script>CSS
/* Variables */
:root {
--base-text-size: 16pt;
--bg-color: rgba(0,0,0,0.1);
--text-color: #222;
--accent-color: rgb(201, 64, 0);
}
section.code-block {
width: clamp(16em, 90vw, 60em);
margin: 3rem auto;
background-color: var(--bg-color, rgba(0,0,0,0.1));
padding: 1rem;
color: var(--text-color, #222);
font-size: var(--base-text-size, 18pt);
}
section.code-block ol {
color: var(--accent-color, rgb(255,217,0));
}
section.code-block * {
font-size: inherit;
}
aside.style-customizer {
padding: 1rem;
border: solid 1px rgb(250, 250, 250);
background-color: white;
margin: auto;
max-width: 14em;
border: double #afafaf 3px;
color: black;
}
aside.style-customizer input[type=radio]:hover {
background-color: blue;
}
aside.style-customizer h5 {
font-size: 1rem;
margin: 0 0 1rem 0;
}
aside.style-customizer h6 {
font-size: 1rem;
margin: 1rem 0 1rem 0;
}
/* Text Size Scale */
.text-size-scale, .text-size-scale-labels {
margin: 0;
padding: 0;
list-style-type: none;
}
.text-size-scale-labels li {
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
width: 20%;
vertical-align: bottom;
}
.text-size-scale-labels li {
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
width: 20%;
vertical-align: bottom;
}
.text-size-scale-labels li label {
display: inline;
}
.text-size-scale li {
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
width: 20%;
vertical-align: bottom;
}
.text-size-scale-labels li:first-of-type {font-size: .75rem;}
.text-size-scale-labels li:nth-of-type(2) {font-size: .9rem;}
.text-size-scale-labels li:nth-of-type(3) {font-size: 1rem;}
.text-size-scale-labels li:nth-of-type(4) {font-size: 1.25rem;}
.text-size-scale-labels li:last-of-type {font-size: 1.5rem;}