☀️ <color-scheme-button>

Simple button to handle the color-scheme auto / light / dark / dim . This custom elment it's a button with 4 SVG icons each for schema (auto, light, dark, dim). Dim schema it about orchestrating lightness and saturation, need to have enough saturation to still have a hue visible, but also just barely pass contrast scores. Check the very well done Adam Argyle intro about the shema / theme.

Little animation when button:hover and button:focus

https://web.dev/building-a-color-scheme/

🕹️ Examples

<style>
  color-scheme-button {
      width: 128px;
      height: 128px;

      --icon-color: purple;
    }
</style>

<color-scheme-button
  id="btn"
  title="Color Scheme"
  aria-label="Color Scheme">
</color-scheme-button>

🚀 Usage

1. Install package

npm install --save @cicciosgamino/color-scheme-button

2. Import

<!-- Import Js Module -->
<script type="module">
  // Importing this module registers <progress-ring> as an element that you
  // can use in this page.
  //
  // Note this import is a bare module specifier, so it must be converted
  // to a path using a server such as @web/dev-server.
  import '@cicciosgamino/color-scheme-button'
</script>

3. Place in your HTML

<color-scheme-button
  id="btn"
  title="Color Scheme"
  aria-label="Color Scheme">
</color-scheme-button>

🐝 API

📒 Properties/Attributes

| Name | Type | Default | Description | ----------- | ------- | -------- | -------------- | title | String | '' | Button title | ariaLabel | String | '' | Button aria-label

Methods

None

Events

None events dispatched by default but you can uncomment the code to dispatch the schema-event. This event is dispateched with both, bubble and composed. In the detail.schema field you can retrieve the value of the schema.

| Event Name | Target | Detail | Description | ------------ | -------------- | ------------ | -------------- | schema-event | color-schema-button | { schema: 'auto | light | dark | dim' } | Fired when button clicked

🧁 CSS Custom Properties

| Name | Default | Description | --------------- | ------- | -------------------- | --icon-color | #000 | SVG fill attribute

💪 Accessibility

Acessibility is guaranted with the use of a button with the title and aria-label set on it.SVG icons inside the inner button are set role=img,aria-hidden="true",focusable="false" .

🔧 TODO

• [ ] Better Documentation
• [ ] More Examples

🧑‍💻 Author

| | |:------------------------------------------------------------------------------------------: | | @cicciosgamino |

Support

Reach out to me at one of the following places:

• Github
• Twitter

Donate

Donate help and contibutions!

License

GNU General Public License v3.0

Made 🧑‍💻 by @cicciosgamino