Skip to content

Commit 61ee5f7

Browse files
linx4200linx4200
authored
Merge pull request #302 from linx4200/dev/v3.1
v3.1.0
2 parents b5aad8e + 5cea45b commit 61ee5f7

22 files changed

+1268
-1560
lines changed

‎.github/dependabot.yml

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@ updates:
44
- package-ecosystem: "npm"
55
# Look for `package.json` and `lock` files in the `root` directory
66
directory: "/"
7-
# Check the npm registry for updates every day (weekdays)
87
schedule:
98
interval: "weekly"
109
labels:
1110
- "dependencies"
12-
assignees:
13-
- "linx4200"
14-
reviewers:
15-
- "linx4200"
11+
groups:
12+
all-updates:
13+
patterns:
14+
- "*"

‎README.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ Explore the components in action: 👉 [Open Live Demo](https://linx4200.github.
2525

2626
- **SSR-Friendly** – Compatible with Nuxt and other SSR frameworks
2727

28-
- **Optimized for Accessibility** – Built with keyboard navigation and screen readers in mind.
28+
- **Optimized for Accessibility** – Built with keyboard navigation and screen readers in mind
29+
30+
- **Dark Mode Support** – Built-in dark theme
2931

3032
## 📦 Installation
3133

@@ -168,6 +170,16 @@ import {ChromePicker } from 'vue-color';
168170
</script>
169171
```
170172

173+
### Dark Mode Support
174+
175+
By default, `vue-color` uses CSS variables defined under the :root scope. To enable dark mode, simply add a `.dark` class to your HTML element:
176+
177+
```html
178+
<html class="dark">
179+
<!-- your app -->
180+
</html>
181+
```
182+
171183
## 🧩 FAQ / Issue Guide
172184

173185
| Error / Symptom | Related Issue |

‎demo/App.vue

Lines changed: 78 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ const pickers = ['chrome', 'sketch', 'photoshop', 'compact', 'grayscale', 'mater
44
const searchParams = parseSearchParams(location.search);
55
const manualEnabledPickers = searchParams.picker?.split(',');
66
7+
const DEFAULT_COLOR = 'F5F7FA';
8+
const DEFAULT_COLOR_DARK = '#004035';
9+
710
function invertColor({ r, g, b, a}: { r: number; g: number; b: number, a: number }): string {
811
const invert = (val: number, alpha: number) => alpha === 0 ? 0 : 255 - val;
912
const inverted = {
@@ -16,7 +19,7 @@ function invertColor({ r, g, b, a}: { r: number; g: number; b: number, a: number
1619
}
1720
1821
const hasInitialColor = !!searchParams.hex;
19-
const initialColor = `#${searchParams.hex ?? 'F5F7FA'}`;
22+
const initialColor = `#${searchParams.hex ?? DEFAULT_COLOR}`;
2023
</script>
2124

2225
<script setup lang="ts">
@@ -36,8 +39,8 @@ import {
3639
tinycolor
3740
// } from '../dist/vue-color.js';
3841
} from '../src';
39-
40-
// import '../dist/vue-color.css'
42+
import ThemeToggle from './components/ThemeToggle.vue';
43+
// import '../dist/vue-color.css';
4144
4245
const showStatus: Record<(typeof pickers)[number], boolean> = {} as Record<(typeof pickers)[number], boolean>;
4346
pickers.forEach((picker) => {
@@ -76,7 +79,7 @@ const hsva = computed(() => {
7679
const hsva = tinycolor(tinyColor.value).toHsv();
7780
const res: Record<string, number> = {};
7881
for (const [key, value] of Object.entries(hsva)) {
79-
res[key] = value.toFixed(2);
82+
res[key] = Number(value.toFixed(2));
8083
}
8184
return res;
8285
});
@@ -89,23 +92,32 @@ const updateHue = (newHue: number) => {
8992
tinyColor.value = tinycolor(tinyColor.value).spin(newHue - hsva.value.h).clone();
9093
}
9194
95+
const onModeChange = (isDark: boolean) => {
96+
if (isDark) {
97+
tinyColor.value = tinycolor(DEFAULT_COLOR_DARK);
98+
} else {
99+
tinyColor.value = tinycolor(initialColor);
100+
}
101+
}
102+
92103
</script>
93104

94105
<template>
95106
<div class="color-background" :style="[background]"></div>
96107
<div class="wrapper">
97-
<div>
108+
<div class="fixed-side">
98109
<div class="title text">
99-
<h1>Vue-color</h1><span class="tag">v3.0</span>
110+
<h1>Vue-color<span class="tag">v3.0</span></h1>
100111
</div>
101112

102113
<main class="intro text">
103114
A collection of efficient color pickers designed for modern web development.
104-
<ul class="feature-list text" :style="{color: textColor, opacity: 0.75}">
115+
<ul class="feature-list text">
105116
<li>✅ Modular & Tree-Shakable</li>
106117
<li>✅ TypeScript Ready</li>
107118
<li>✅ SSR-Friendly</li>
108119
<li>✅ Optimized for Accessibility</li>
120+
<li class="dark-mode"><span>✅ Supports Dark Theme</span><ThemeToggle style="margin-left: 10px;" :color="textColor" @change="onModeChange" /></li>
109121
</ul>
110122
</main>
111123
<a
@@ -118,65 +130,65 @@ const updateHue = (newHue: number) => {
118130
Get Started &nbsp; 🚀
119131
</a>
120132
</div>
121-
<div :style="{flex: 0.8}">
133+
<div class="picker-containers">
122134
<div class="row">
123135
<div class="col">
124136
<div class="text current-color">
125137
{{ hex }}<br />
126-
{{ color }}<br />
127-
{{ hsva }}
138+
{{ tinyColor.toRgbString() }}<br />
139+
{{ tinyColor.toHsvString() }}
128140
</div>
129-
<div class="picker-container" v-if="showStatus.chrome">
141+
<div v-if="showStatus.chrome">
130142
<ChromePicker v-model:tinyColor="tinyColor" v-model="color" />
131143
<div class="picker-title text">&lt;ChromePicker /&gt;</div>
132144
</div>
133145
</div>
134146

135-
<div class="picker-container" v-if="showStatus.sketch">
147+
<div class="col" v-if="showStatus.sketch">
136148
<div><SketchPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
137149
<div class="picker-title text">&lt;SketchPicker /&gt;</div>
138150
</div>
139151

140-
<div class="picker-container" v-if="showStatus.photoshop">
152+
<div class="col" v-if="showStatus.photoshop">
141153
<div><PhotoshopPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
142154
<div class="picker-title text">&lt;PhotoshopPicker /&gt;</div>
143155
</div>
144156
</div>
145-
<div class="row" :style="{marginTop: '5%'}">
157+
<div class="row">
146158
<div class="col">
147-
<div class="picker-container" v-if="showStatus.compact">
159+
<div v-if="showStatus.compact">
148160
<div><CompactPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
149161
<div class="picker-title text">&lt;CompactPicker /&gt;</div>
150162
</div>
151-
<div class="picker-container" v-if="showStatus.grayscale">
163+
<div v-if="showStatus.grayscale">
152164
<div><GrayscalePicker v-model:tinyColor="tinyColor" v-model="color" /></div>
153165
<div class="picker-title text">&lt;GrayscalePicker /&gt;</div>
154166
</div>
155-
<div class="picker-container" v-if="showStatus.material">
167+
<div v-if="showStatus.material">
156168
<div><MaterialPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
157169
<div class="picker-title text">&lt;MaterialPicker /&gt;</div>
158170
</div>
159171
</div>
160172

161173
<div class="col">
162-
<div class="picker-container" v-if="showStatus.hue">
174+
<div v-if="showStatus.hue">
163175
<div :style="{width: '410px'}"><HueSlider :modelValue="hsva.h" @update:modelValue="updateHue" /></div>
164176
<div class="picker-title text">&lt;HueSlider /&gt;</div>
165177
</div>
166178

167-
<div class="picker-container" v-if="showStatus.slider">
179+
<div v-if="showStatus.slider">
168180
<div><SliderPicker v-model:tinyColor="tinyColor" v-model="color" :alpha="true" /></div>
169181
<div class="picker-title text">&lt;SliderPicker /&gt;</div>
170182
</div>
171183

172-
<div class="picker-container" v-if="showStatus.twitter">
184+
<div v-if="showStatus.twitter">
173185
<div><TwitterPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
174186
<div class="picker-title text">&lt;TwitterPicker /&gt;</div>
175187
</div>
176188
</div>
177189

178190
<div class="col">
179-
<div class="picker-container" v-if="showStatus.swatches">
191+
<div v-if="showStatus.swatches">
180192
<div><SwatchesPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
181193
<div class="picker-title text">&lt;SwatchesPicker /&gt;</div>
182194
</div>
@@ -199,68 +211,82 @@ const updateHue = (newHue: number) => {
199211
display: block;
200212
}
201213
214+
.color-background {
215+
position: absolute;
216+
top: 0;
217+
left: 0;
218+
width: 100%;
219+
height: 100%;
220+
z-index: -1;
221+
}
222+
202223
.wrapper {
203224
display: flex;
204-
justify-content: space-evenly;
205-
padding: 50px 0;
225+
padding: 50px 0 0 50px;
206226
}
207227
208-
.row {
209-
display: flex;
210-
align-items: center;
211-
justify-content: space-between;
228+
.fixed-side {
229+
width: 300px;
212230
}
213231
214-
.col {
215-
display: flex;
216-
flex-direction: column;
217-
gap: 20px;
232+
.picker-containers {
233+
flex: 1;
218234
}
219235
220-
.color-background {
221-
width: 100vw;
222-
height: 100vh;
223-
position: absolute;
224-
top: 0;
225-
left: 0;
226-
z-index: -1;
236+
.row {
237+
width: 100%;
238+
display: flex;
239+
flex-wrap: wrap;
240+
justify-content: center;
241+
align-items: center;
242+
gap: 50px;
243+
margin-bottom: 50px;
227244
}
228245
229246
.title {
230247
display: flex;
248+
margin-bottom: 18px;
231249
}
232250
233251
.title h1 {
252+
position: relative;
234253
display: inline-block;
235254
font-size: 60px;
236255
font-weight: bold;
237256
margin: 0;
238257
}
239258
240259
.tag {
260+
position: absolute;
261+
top: 0;
262+
right: -20%;
241263
display: block;
242-
font-size: 16px;
243-
width: 30px;
244-
height: 20px;
245-
border-radius: 6px;
246-
text-align: center;
247-
background-color: #42B883;
248264
padding: 2px 4px;
249-
margin-left: 10px;
265+
border-radius: 6px;
250266
color: #fff;
267+
background-color: #42B883;
268+
font-size: 16px;
269+
font-weight:lighter;
270+
text-align: center;
251271
}
252272
253273
.intro {
254274
font-size: 20px;
255-
line-height: 1.5;
275+
line-height: 1.8;
256276
width: 300px;
257277
}
258278
259279
.feature-list {
260-
line-height: 1.6;
280+
line-height: 1.8;
261281
padding-left: 0px;
262282
list-style: none;
263283
font-size: 18px;
284+
opacity: 0.75;
285+
}
286+
287+
.dark-mode {
288+
display: flex;
289+
align-items: center;
264290
}
265291
266292
.get-started {
@@ -280,20 +306,16 @@ const updateHue = (newHue: number) => {
280306
opacity: 0.8;
281307
}
282308
283-
.picker-container {
284-
margin-left: 5%;
285-
}
286-
287309
.picker-title {
288310
margin-top: 10px;
311+
margin-bottom: 20px;
289312
font-size: 14px;
290-
opacity: 0.5;
313+
opacity: 0.75;
291314
}
292315
293316
.current-color {
294-
padding: 10px;
295-
width: 240px;
296-
height: 100px;
297-
line-height: 1.5;
317+
margin-bottom: 10px;
318+
line-height: 1.7;
319+
opacity: 0.75;
298320
}
299321
</style>

0 commit comments

Comments
 (0)