@cicciosgamino/color-scheme-button
Version:
Simple button to handle the color-scheme auto / light / dark / dim
104 lines (83 loc) • 2.34 kB
HTML
<!-- twitter / ig @cicciosgamino
_______ _ _
/ ____(_)_________(_)___ _________ _____ _____ ___ (_)___ ____
/ / / / ___/ ___/ / __ \/ ___/ __ `/ __ `/ __ `__ \/ / __ \/ __ \
/ /___/ / /__/ /__/ / /_/ (__ ) /_/ / /_/ / / / / / / / / / / /_/ /
\____/_/\___/\___/_/\____/____/\__, /\__,_/_/ /_/ /_/_/_/ /_/\____/
/____/
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="@cicciosgamino">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☀️ Color Scheme Button</title>
<style>
:root {
--surface1: whitesmoke;
--text1: hsl(200, 65%, 15%);
}
* {
/* reset browser defaults */
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/* base rem unit (10px) */
font-size: 62.5%;
block-size: 100%;
background-color: var(--surface1);
color: var(--text1);
}
body {
padding: 5rem;
font-family: system-ui, sans-serif;
font-size: 2rem;
display: grid;
grid-template-rows: auto auto;
justify-items: center;
gap: 3rem;
}
header {
margin: 1rem;
padding: 1rem;
}
color-scheme-button {
width: 128px;
height: 128px;
--icon-color: purple;
}
</style>
</head>
<body>
<header>
<input id="dimension" name="dimension" type="range" min="16" max="256" step="16" />
</header>
<main>
<color-scheme-button
id="btn"
title="Color Scheme"
aria-label="Color Scheme">
</color-scheme-button>
</main>
<noscript>
Please enable JavaScript to view this website.
</noscript>
<!-- Import Js Module -->
<script type="module" src="../color-scheme-button.js"></script>
<script>
window.addEventListener('DOMContentLoaded', _ => {
const input = document.querySelector('#dimension')
const schemeButton = document.querySelector('#btn')
input.addEventListener('change', event => {
// set the width and height
console.log(event.target.value)
schemeButton.style.width = `${event.target.value}px`
schemeButton.style.height = `${event.target.value}px`
})
})
</script>
</body>
</html>