Skip to content

Commit 3b757e6

Browse files
dafidafi
committed
docs: improve custom color scheme documentation
1 parent 84d8f68 commit 3b757e6

4 files changed

Lines changed: 154 additions & 3 deletions

File tree

‎css/input.css‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,55 @@ td.copy-cmd.copied::after {
159159
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
160160
}
161161

162+
#main .code-block {
163+
position: relative;
164+
margin: 1.7142857em 0;
165+
}
166+
167+
#main .code-block pre {
168+
margin: 0;
169+
padding-right: 3rem;
170+
}
171+
172+
.copy-code-button {
173+
position: absolute;
174+
top: 0.625rem;
175+
right: 0.625rem;
176+
width: 20px;
177+
height: 20px;
178+
padding: 0;
179+
border: 0;
180+
background-color: transparent;
181+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
182+
background-position: center;
183+
background-repeat: no-repeat;
184+
background-size: contain;
185+
cursor: pointer;
186+
opacity: 0;
187+
transition: opacity 0.15s;
188+
}
189+
190+
.code-block:hover .copy-code-button,
191+
.copy-code-button:focus-visible {
192+
opacity: 1;
193+
}
194+
195+
.copy-code-button:focus-visible {
196+
outline: 2px solid #e2e8f0;
197+
outline-offset: 2px;
198+
}
199+
200+
.copy-code-button.copied {
201+
opacity: 1;
202+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
203+
}
204+
205+
@media (hover: none) {
206+
.copy-code-button {
207+
opacity: 1;
208+
}
209+
}
210+
162211
img.wiki-img {
163212
max-width: 100%;
164213
border: 1px solid #94a3b8;
@@ -270,4 +319,4 @@ table.file-legend tr td {
270319
.finder-callout a:hover {
271320
color: var(--color-brand-800);
272321
}
273-
}
322+
}

‎css/theme.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1583,6 +1583,47 @@ td.copy-cmd.copied::after {
15831583
opacity: 1;
15841584
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
15851585
}
1586+
#main .code-block {
1587+
position: relative;
1588+
margin: 1.7142857em 0;
1589+
}
1590+
#main .code-block pre {
1591+
margin: 0;
1592+
padding-right: 3rem;
1593+
}
1594+
.copy-code-button {
1595+
position: absolute;
1596+
top: 0.625rem;
1597+
right: 0.625rem;
1598+
width: 20px;
1599+
height: 20px;
1600+
padding: 0;
1601+
border: 0;
1602+
background-color: transparent;
1603+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
1604+
background-position: center;
1605+
background-repeat: no-repeat;
1606+
background-size: contain;
1607+
cursor: pointer;
1608+
opacity: 0;
1609+
transition: opacity 0.15s;
1610+
}
1611+
.code-block:hover .copy-code-button, .copy-code-button:focus-visible {
1612+
opacity: 1;
1613+
}
1614+
.copy-code-button:focus-visible {
1615+
outline: 2px solid #e2e8f0;
1616+
outline-offset: 2px;
1617+
}
1618+
.copy-code-button.copied {
1619+
opacity: 1;
1620+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
1621+
}
1622+
@media (hover: none) {
1623+
.copy-code-button {
1624+
opacity: 1;
1625+
}
1626+
}
15861627
img.wiki-img {
15871628
max-width: 100%;
15881629
border: 1px solid #94a3b8;

‎hiddenSettings.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,15 +121,24 @@ Click any row in the **Example** column to copy the full command to the clipboar
121121

122122
Use the [Color Scheme Editor](https://visualdiffer.com/colors.html) to create a custom color scheme, then download the JSON file. For example, save the file as `~/Downloads/my-scheme.json`.
123123

124-
Open Terminal and run the following commands. The first command copies the file to a directory that the VisualDiffer sandbox can access.
124+
Open Terminal and run the following commands.
125+
126+
Copy the file to a directory that the VisualDiffer sandbox can access.
125127

126128
```sh
127129
cp ~/Downloads/my-scheme.json ~/Library/Application\ Scripts/com.visualdiffer
130+
```
131+
132+
Set the `colorsConfigPath` property to the full path of the copied file.
133+
134+
```sh
128135
defaults write com.visualdiffer colorsConfigPath ~/Library/Application\ Scripts/com.visualdiffer/my-scheme.json
129136
```
130137

131138
Changes to the color scheme take effect only after you restart VisualDiffer.
132139

140+
Custom color schemes do not respond to changes between Light and Dark appearances. If you switch the appearance, the custom color scheme remains active.
141+
133142
**Restore the Default Setting**
134143

135144
To stop using the custom color scheme, run the following command:

‎js/copy-cmd.js‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,62 @@
11
document.addEventListener('DOMContentLoaded', function () {
2+
function copyText(text) {
3+
if (navigator.clipboard && window.isSecureContext) {
4+
return navigator.clipboard.writeText(text);
5+
}
6+
7+
return new Promise(function (resolve, reject) {
8+
var textArea = document.createElement('textarea');
9+
textArea.value = text;
10+
textArea.setAttribute('readonly', '');
11+
textArea.style.position = 'fixed';
12+
textArea.style.opacity = '0';
13+
document.body.appendChild(textArea);
14+
textArea.select();
15+
16+
try {
17+
if (!document.execCommand('copy')) {
18+
throw new Error('Copy command failed');
19+
}
20+
resolve();
21+
} catch (error) {
22+
reject(error);
23+
} finally {
24+
textArea.remove();
25+
}
26+
});
27+
}
28+
229
document.querySelectorAll('.copy-cmd').forEach(function (cell) {
330
cell.addEventListener('click', function () {
4-
navigator.clipboard.writeText(cell.dataset.cmd).then(function () {
31+
copyText(cell.dataset.cmd).then(function () {
532
cell.classList.add('copied');
633
setTimeout(function () { cell.classList.remove('copied'); }, 1500);
734
});
835
});
936
});
37+
38+
document.querySelectorAll('#main pre').forEach(function (codeBlock) {
39+
var wrapper = document.createElement('div');
40+
var button = document.createElement('button');
41+
42+
wrapper.className = 'code-block';
43+
codeBlock.parentNode.insertBefore(wrapper, codeBlock);
44+
wrapper.appendChild(codeBlock);
45+
46+
button.className = 'copy-code-button';
47+
button.type = 'button';
48+
button.setAttribute('aria-label', 'Copy code to clipboard');
49+
wrapper.appendChild(button);
50+
51+
button.addEventListener('click', function () {
52+
copyText(codeBlock.textContent).then(function () {
53+
button.setAttribute('aria-label', 'Code copied');
54+
button.classList.add('copied');
55+
setTimeout(function () {
56+
button.setAttribute('aria-label', 'Copy code to clipboard');
57+
button.classList.remove('copied');
58+
}, 1500);
59+
});
60+
});
61+
});
1062
});

0 commit comments

Comments
 (0)