0
# Color Utilities
1

2
Comprehensive color styling for all scrollbar components using Tailwind's color system.
3

4
## Capabilities
5

6
### Track Color Utilities
7

8
Sets the background color of the scrollbar track (the groove in which the thumb slides).
9

10
```css { .api }
11
/**
12
 * Sets scrollbar track background color using Tailwind color values
13
 * Available for all colors in Tailwind theme plus arbitrary values
14
 */
15
.scrollbar-track-{color} {
16
  --scrollbar-track: {color-value};
17
}
18

19
/* Examples */
20
.scrollbar-track-gray-100 { --scrollbar-track: #f3f4f6; }
21
.scrollbar-track-blue-500 { --scrollbar-track: #3b82f6; }
22
.scrollbar-track-red-200 { --scrollbar-track: #fecaca; }
23
.scrollbar-track-[#ff0000] { --scrollbar-track: #ff0000; }
24
```
25

26
**Usage Examples:**
27
```html
28
<!-- Light gray track -->
29
<div class="scrollbar scrollbar-track-gray-100 overflow-auto h-64">
30
  <div class="h-96">Content</div>
31
</div>
32

33
<!-- Blue track -->
34
<div class="scrollbar scrollbar-track-blue-200 overflow-auto h-64">
35
  <div class="h-96">Content</div>
36
</div>
37

38
<!-- Arbitrary color track -->
39
<div class="scrollbar scrollbar-track-[#f0f9ff] overflow-auto h-64">
40
  <div class="h-96">Content</div>
41
</div>
42

43
<!-- With opacity modifier -->
44
<div class="scrollbar scrollbar-track-gray-500/20 overflow-auto h-64">
45
  <div class="h-96">Content</div>
46
</div>
47
```
48

49
### Thumb Color Utilities
50

51
Sets the background color of the scrollbar thumb (the draggable handle).
52

53
```css { .api }
54
/**
55
 * Sets scrollbar thumb background color using Tailwind color values
56
 * Available for all colors in Tailwind theme plus arbitrary values
57
 */
58
.scrollbar-thumb-{color} {
59
  --scrollbar-thumb: {color-value};
60
}
61

62
/* Examples */
63
.scrollbar-thumb-gray-400 { --scrollbar-thumb: #9ca3af; }
64
.scrollbar-thumb-blue-600 { --scrollbar-thumb: #2563eb; }
65
.scrollbar-thumb-green-500 { --scrollbar-thumb: #10b981; }
66
.scrollbar-thumb-[#333333] { --scrollbar-thumb: #333333; }
67
```
68

69
**Usage Examples:**
70
```html
71
<!-- Gray thumb -->
72
<div class="scrollbar scrollbar-thumb-gray-400 overflow-auto h-64">
73
  <div class="h-96">Content</div>
74
</div>
75

76
<!-- Blue thumb -->
77
<div class="scrollbar scrollbar-thumb-blue-600 overflow-auto h-64">
78
  <div class="h-96">Content</div>
79
</div>
80

81
<!-- Arbitrary color thumb -->
82
<div class="scrollbar scrollbar-thumb-[#8b5cf6] overflow-auto h-64">
83
  <div class="h-96">Content</div>
84
</div>
85

86
<!-- With opacity modifier -->
87
<div class="scrollbar scrollbar-thumb-black/30 overflow-auto h-64">
88
  <div class="h-96">Content</div>
89
</div>
90
```
91

92
### Corner Color Utilities
93

94
Sets the background color of the scrollbar corner (where horizontal and vertical scrollbars meet).
95

96
```css { .api }
97
/**
98
 * Sets scrollbar corner background color using Tailwind color values
99
 * Available for all colors in Tailwind theme plus arbitrary values
100
 */
101
.scrollbar-corner-{color} {
102
  --scrollbar-corner: {color-value};
103
}
104

105
/* Examples */
106
.scrollbar-corner-gray-200 { --scrollbar-corner: #e5e7eb; }
107
.scrollbar-corner-white { --scrollbar-corner: #ffffff; }
108
.scrollbar-corner-transparent { --scrollbar-corner: transparent; }
109
.scrollbar-corner-[#f8fafc] { --scrollbar-corner: #f8fafc; }
110
```
111

112
**Usage Examples:**
113
```html
114
<!-- White corner (matches background) -->
115
<div class="scrollbar scrollbar-corner-white overflow-auto h-64 w-64">
116
  <div class="h-96 w-96">Content that overflows both ways</div>
117
</div>
118

119
<!-- Gray corner -->
120
<div class="scrollbar scrollbar-corner-gray-300 overflow-auto h-64 w-64">
121
  <div class="h-96 w-96">Content</div>
122
</div>
123

124
<!-- Transparent corner -->
125
<div class="scrollbar scrollbar-corner-transparent overflow-auto h-64 w-64">
126
  <div class="h-96 w-96">Content</div>
127
</div>
128
```
129

130
### Color System Integration
131

132
All color utilities integrate with Tailwind's complete color system:
133

134
#### Standard Tailwind Colors
135
```html
136
<!-- All standard colors available -->
137
<div class="scrollbar-thumb-red-500">Red thumb</div>
138
<div class="scrollbar-thumb-orange-400">Orange thumb</div>
139
<div class="scrollbar-thumb-yellow-300">Yellow thumb</div>
140
<div class="scrollbar-thumb-green-600">Green thumb</div>
141
<div class="scrollbar-thumb-blue-500">Blue thumb</div>
142
<div class="scrollbar-thumb-indigo-400">Indigo thumb</div>
143
<div class="scrollbar-thumb-purple-600">Purple thumb</div>
144
<div class="scrollbar-thumb-pink-500">Pink thumb</div>
145
```
146

147
#### Arbitrary Color Values
148
```html
149
<!-- Custom hex colors -->
150
<div class="scrollbar-track-[#ff6b6b]">Custom hex track</div>
151
<div class="scrollbar-thumb-[rgb(34,197,94)]">RGB thumb</div>
152
<div class="scrollbar-corner-[hsl(220,91%,96%)]">HSL corner</div>
153
```
154

155
#### Opacity Modifiers
156
```html
157
<!-- Color with opacity -->
158
<div class="scrollbar-track-blue-500/10">10% opacity blue track</div>
159
<div class="scrollbar-thumb-gray-900/50">50% opacity dark thumb</div>
160
<div class="scrollbar-corner-red-200/25">25% opacity red corner</div>
161
```
162

163
#### CSS Color Functions
164
```html
165
<!-- Using modern CSS color functions -->
166
<div class="scrollbar-thumb-[color-mix(in_srgb,blue_50%,red)]">Color mix thumb</div>
167
```
168

169
### Complete Color Coordination
170

171
Combine all color utilities for fully coordinated scrollbar styling:
172

173
```html
174
<!-- Coordinated blue theme -->
175
<div class="scrollbar 
176
            scrollbar-track-blue-100 
177
            scrollbar-thumb-blue-500 
178
            scrollbar-corner-blue-50 
179
            overflow-auto h-64">
180
  <div class="h-96">Content with blue scrollbar theme</div>
181
</div>
182

183
<!-- Dark theme -->
184
<div class="scrollbar 
185
            scrollbar-track-gray-800 
186
            scrollbar-thumb-gray-600 
187
            scrollbar-corner-gray-900 
188
            overflow-auto h-64 bg-gray-900">
189
  <div class="h-96 text-white">Dark themed content</div>
190
</div>
191

192
<!-- High contrast -->
193
<div class="scrollbar 
194
            scrollbar-track-white 
195
            scrollbar-thumb-black 
196
            scrollbar-corner-gray-500 
197
            overflow-auto h-64 border">
198
  <div class="h-96">High contrast scrollbar</div>
199
</div>
200
```
201

202
### Responsive Color Utilities
203

204
Color utilities work with Tailwind's responsive system:
205

206
```html
207
<!-- Responsive scrollbar colors -->
208
<div class="scrollbar 
209
            scrollbar-thumb-blue-400 
210
            md:scrollbar-thumb-green-400 
211
            lg:scrollbar-thumb-purple-400 
212
            overflow-auto h-64">
213
  <div class="h-96">Responsive scrollbar colors</div>
214
</div>
215
```
216

217
### Dark Mode Support
218

219
Color utilities integrate with Tailwind's dark mode:
220

221
```html
222
<!-- Dark mode scrollbar colors -->
223
<div class="scrollbar 
224
            scrollbar-track-gray-100 
225
            scrollbar-thumb-gray-400 
226
            dark:scrollbar-track-gray-800 
227
            dark:scrollbar-thumb-gray-600 
228
            overflow-auto h-64">
229
  <div class="h-96">Content with dark mode scrollbar</div>
230
</div>
231
```
232

233
### Color Function Support
234

235
The plugin supports both static color values and color functions from Tailwind themes:
236

237
```javascript
238
// In tailwind.config.js
239
module.exports = {
240
  theme: {
241
    colors: {
242
      primary: ({ opacityValue }) => {
243
        if (opacityValue !== undefined) {
244
          return `rgba(59, 130, 246, ${opacityValue})`;
245
        }
246
        return 'rgb(59, 130, 246)';
247
      }
248
    }
249
  }
250
};
251
```
252

253
```html
254
<!-- Using color functions -->
255
<div class="scrollbar-thumb-primary">Dynamic color thumb</div>
256
```
257

258
### Browser-Specific Behavior
259

260
Color utilities handle browser differences automatically:
261

262
#### Standards-Based Browsers (Firefox, modern Chrome)
263
- Uses `scrollbar-color` property with thumb and track colors
264
- Limited to basic color styling
265

266
#### WebKit Browsers (Safari, older Chrome)
267
- Uses `::-webkit-scrollbar-*` pseudoelements
268
- Supports all three components (track, thumb, corner)
269
- Full color customization including opacity
270

271
The plugin ensures consistent color appearance across all supported browsers while leveraging each browser's capabilities.