Skip to content

Feat/expand customization #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Feat/expand customization #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
92e04bd
expand customization for the colour picker. e.g. setting the backgrou…
Nov 6, 2025
8dee75c
Enable user to adjust width and heigth
Nov 6, 2025
725e9d3
reset demo page
Nov 6, 2025
b0cddad
Adjust README to new changes
Nov 6, 2025
74a180b
remove wrong prop from table
Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,17 @@ Svelte Color Picker currently has one type of colorpicker.

#### \</HsvPicker>
| Props | Value Type | Use |
| ------ | ------ | ------ |
| on:colorChange | function | Given function gets called every time color changes |
| startColor | string | Initializes color picker with the value (hexadecimal without alpha). |
| ----- | ---------- | --- |
| on:colorChange | function | Called whenever the color changes (event.detail contains { r, g, b, a }). |
| startColor | string | Initializes color picker with the value (hexadecimal without alpha), e.g. "#FF0000". |
| background | string | Background color of the picker container (CSS color). Default: "#f2f2f2". |
| opacity | number | Initial alpha value between 0 and 1. Default: 1. |
| alphaSelector | boolean | Show or hide the alpha (opacity) slider. Default: true. |
| colorInfoBox | boolean | Show or hide the color info box (hex and RGB). Default: true. |
| hexCodeInfo | boolean | Show or hide the hex code inside the info box. Default: true. |
| rgbInfo | boolean | Show or hide the RGB values inside the info box. Default: true. |
| width | number (px) | Overall picker width in pixels. Default: 240. |
| height | number (px) | Overall picker height in pixels. Default: 265. |

License
----
Expand Down
118 changes: 66 additions & 52 deletions demo_page/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,74 @@
<script>
// TODO change back to package hue selector import {HsvPicker} from 'svelte-color-picker';
import HsvPicker from "../../src/HsvPicker.svelte";

// alpha value (0-1) captured separately so we don't modify the original callback
let a = 1;

function colorCallback(rgb) {
let r = rgb.detail.r;
let g = rgb.detail.g;
let b = rgb.detail.b;
let a = rgb.detail.a;
let bw = 255 - (r + g + b) / 4;

let main = document.querySelector(".main");
main.style.background = `rgb(${r},${g},${b}, ${a})`;
let header = document.querySelector("h3");
header.style.color = `rgb(${bw},${bw},${bw})`;
let p = document.querySelector("p");
p.style.color = `rgb(${bw},${bw},${bw})`;
let body = document.querySelector("body");
body.style.background = `rgb(${bw},${bw},${bw})`;
}

// separate handler to capture alpha for reactive display without changing colorCallback
function captureAlpha(event) {
a = event.detail.a;
}
</script>

<head>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>

<script>
import {HsvPicker} from 'svelte-color-picker';


function colorCallback(rgb) {
let r = rgb.detail.r;
let g = rgb.detail.g;
let b = rgb.detail.b;
let bw = 255 - ((r + g + b) / 4);

let main = document.querySelector(".main");
main.style.background = `rgb(${r},${g},${b})`;
let header = document.querySelector("h3");
header.style.color = `rgb(${bw},${bw},${bw})`;
let p = document.querySelector("p");
p.style.color = `rgb(${bw},${bw},${bw})`;
let body = document.querySelector("body");
body.style.background = `rgb(${bw},${bw},${bw})`;
}
</script>
<div class="main">
<div class="container">
<h3>Svelte Color Picker</h3>
<p>A color picker component for svelte.</p>
<a
class="github-button"
href="https://github.com/qintarp/svelte-color-picker"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star qintarp/svelte-color-picker on GitHub">Star</a
>
</div>
<div class="container">
<HsvPicker on:colorChange={colorCallback} on:colorChange={captureAlpha} startColor={"#82EAEA"} />
</div>
</div>

<style>
h3 {
padding: 0;
margin: 0;
font-family: sans-serif;
}

h3 {
padding:0;
margin:0;
font-family: sans-serif;
}

p {
margin:10px 5px;
}

.main {
border-radius:20px;
width:600px;
padding:20px;
margin:0 auto;
}
.container{
display:inline-block;
vertical-align: top;
}
p {
margin: 10px 5px;
}

.main {
border-radius: 20px;
width: 600px;
padding: 20px;
margin: 0 auto;
}
.container {
display: inline-block;
vertical-align: top;
}
</style>

<div class="main">
<div class="container">
<h3>Svelte Color Picker</h3>
<p>A color picker component for svelte.</p>
<a class="github-button" href="https://github.com/qintarp/svelte-color-picker" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star qintarp/svelte-color-picker on GitHub">Star</a>
</div>
<div class="container">
<HsvPicker on:colorChange={colorCallback} startColor={"#82EAEA"}/>
</div>
</div>
Loading