Skip to content

Commit ec0f49c

Browse files
mauricerenckmauricerenck
committed
fix: dark mode in panel view
1 parent a8e1692 commit ec0f49c

File tree

8 files changed

+62
-38
lines changed

8 files changed

+62
-38
lines changed

‎index.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/DetailsByMonth.vue‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,30 @@
1616
>
1717
<template #header="{ columnIndex, label}">
1818
<div class="center-icon">
19-
<k-icon v-if="columnIndex === 'likes'" type="heart-filled" style="color: var(--color-red-700);" />
20-
<k-icon v-else-if="columnIndex === 'replies'" type="chat" style="color: var(--color-yellow-700);" />
19+
<k-icon
20+
v-if="columnIndex === 'likes'"
21+
type="heart-filled"
22+
style="color: light-dark(var(--color-red-700), var(--color-red-300));"
23+
/>
24+
<k-icon
25+
v-else-if="columnIndex === 'replies'"
26+
type="chat"
27+
style="color: light-dark(var(--color-yellow-700), var(--color-yellow-300));"
28+
/>
2129
<k-icon
2230
v-else-if="columnIndex === 'reposts'"
2331
type="indie-repost"
24-
style="color: var(--color-green-700);"
32+
style="color: light-dark(var(--color-green-700), var(--color-green-300));"
2533
/>
2634
<k-icon
2735
v-else-if="columnIndex === 'mentions'"
2836
type="indie-mention"
29-
style="color: var(--color-blue-700);"
37+
style="color: light-dark(var(--color-blue-700), var(--color-blue-300));"
3038
/>
3139
<k-icon
3240
v-else-if="columnIndex === 'bookmarks'"
3341
type="bookmark"
34-
style="color: var(--color-purple-700);"
42+
style="color: light-dark(var(--color-purple-700), var(--color-purple-300));"
3543
/>
3644
<span v-else>{{ label }}</span>
3745
</div>

‎src/components/Queue.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default {
4040
}
4141
4242
.muted {
43-
color: var(--color-gray-600);
43+
color: light-dark(var(--color-gray-600), var(--color-gray-300));
4444
}
4545
4646
h2 {
@@ -54,29 +54,29 @@ export default {
5454
5555
.status {
5656
border: 1px solid var(--color-gray-400);
57-
background-color: var(--color-gray-200);
57+
background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
5858
5959
border-radius: var(--rounded-md);
6060
padding: var(--spacing-1) var(--spacing-2);
6161
6262
&.error {
6363
border: 1px solid var(--color-red-400);
64-
background-color: var(--color-red-200);
64+
background-color: light-dark(var(--color-red-600), var(--color-red-300));
6565
}
6666
6767
&.running {
6868
border: 1px solid var(--color-blue-400);
69-
background-color: var(--color-blue-200);
69+
background-color: light-dark(var(--color-blue-600), var(--color-blue-300));
7070
}
7171
7272
&.failed {
7373
border: 1px solid var(--color-red-600);
74-
background-color: var(--color-red-400);
74+
background-color: light-dark(var(--color-red-600), var(--color-red-300));
7575
}
7676
7777
&.success {
7878
border: 1px solid var(--color-green-400);
79-
background-color: var(--color-green-200);
79+
background-color: light-dark(var(--color-green-600), var(--color-green-300));
8080
}
8181
}
8282
}

‎src/components/Sent.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,15 @@
2020
>
2121
<template #header="{ columnIndex, label}">
2222
<span :title="label">
23-
<k-icon v-if="columnIndex === 'status'" type="live" style="color: var(--color-purple-700);" />
23+
<k-icon
24+
v-if="columnIndex === 'status'"
25+
type="live"
26+
style="color: light-dark(var(--color-purple-700),var(--color-purple-300));"
27+
/>
2428
<k-icon
2529
v-else-if="columnIndex === 'updates'"
2630
type="refresh"
27-
style="color: var(--color-purple-700);"
31+
style="color: light-dark(var(--color-purple-700),var(--color-purple-300));"
2832
/>
2933
<span v-else>{{ label }}</span>
3034
</span>
@@ -77,8 +81,8 @@ export default {
7781
url: entry.url,
7882
status:
7983
entry.status === 'success'
80-
? '<svg aria-hidden="true" data-type="check" class="k-icon" style="color: var(--color-green-700);"><use xlink:href="#icon-check"></use></svg>'
81-
: '<svg aria-hidden="true" data-type="cancel" class="k-icon" style="color: var(--color-red-700);"><use xlink:href="#icon-cancel"></use></svg>',
84+
? '<svg aria-hidden="true" data-type="check" class="k-icon" style="color: light-dark(var(--color-green-700),var(--color-green-400));"><use xlink:href="#icon-check"></use></svg>'
85+
: '<svg aria-hidden="true" data-type="cancel" class="k-icon" style="color: light-dark(var(--color-red-700),var(--color-red-300));"><use xlink:href="#icon-cancel"></use></svg>',
8286
updates: entry.updates,
8387
}
8488
data.push(newEntry)
@@ -95,7 +99,7 @@ export default {
9599
.k-webmentions-view {
96100
.target {
97101
margin-left: 20px;
98-
color: var(--color-gray-700);
102+
color: light-dark(var(--color-gray-700), var(--color-white));
99103
}
100104
.source {
101105
font-weight: bold;

‎src/components/Sources.vue‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -29,27 +29,27 @@
2929
<k-icon
3030
v-if="columnIndex === 'likes'"
3131
type="heart-filled"
32-
style="color: var(--color-red-700);"
32+
style="color: light-dark(var(--color-red-700),var(--color-red-300));"
3333
/>
3434
<k-icon
3535
v-else-if="columnIndex === 'replies'"
3636
type="chat"
37-
style="color: var(--color-yellow-700);"
37+
style="color: light-dark(var(--color-yellow-700),var(--color-yellow-300));"
3838
/>
3939
<k-icon
4040
v-else-if="columnIndex === 'reposts'"
4141
type="indie-repost"
42-
style="color: var(--color-green-700);"
42+
style="color: light-dark(var(--color-green-700),var(--color-green-300));"
4343
/>
4444
<k-icon
4545
v-else-if="columnIndex === 'mentions'"
4646
type="indie-mention"
47-
style="color: var(--color-blue-700);"
47+
style="color: light-dark(var(--color-blue-700),var(--color-blue-300));"
4848
/>
4949
<k-icon
5050
v-else-if="columnIndex === 'bookmarks'"
5151
type="bookmark"
52-
style="color: var(--color-purple-700);"
52+
style="color: light-dark(var(--color-purple-700),var(--color-purple-300));"
5353
/>
5454
<span v-else>{{ label }}</span>
5555
</span>
@@ -71,31 +71,35 @@
7171
>
7272
<template #header="{ columnIndex, label}">
7373
<span>
74-
<k-icon v-if="columnIndex === 'sum'" type="plus" style="color: var(--color-black);" />
74+
<k-icon
75+
v-if="columnIndex === 'sum'"
76+
type="plus"
77+
style="color: light-dark(var(--color-black),var(--color-white));"
78+
/>
7579
<k-icon
7680
v-else-if="columnIndex === 'likes'"
7781
type="heart-filled"
78-
style="color: var(--color-red-700);"
82+
style="color: light-dark(var(--color-red-700),var(--color-red-300));"
7983
/>
8084
<k-icon
8185
v-else-if="columnIndex === 'replies'"
8286
type="chat"
83-
style="color: var(--color-yellow-700);"
87+
style="color: light-dark(var(--color-yellow-700),var(--color-yellow-300));"
8488
/>
8589
<k-icon
8690
v-else-if="columnIndex === 'reposts'"
8791
type="indie-repost"
88-
style="color: var(--color-green-700);"
92+
style="color: light-dark(var(--color-green-700),var(--color-green-300));"
8993
/>
9094
<k-icon
9195
v-else-if="columnIndex === 'mentions'"
9296
type="indie-mention"
93-
style="color: var(--color-blue-700);"
97+
style="color: light-dark(var(--color-blue-700),var(--color-blue-300));"
9498
/>
9599
<k-icon
96100
v-else-if="columnIndex === 'bookmarks'"
97101
type="bookmark"
98-
style="color: var(--color-purple-700);"
102+
style="color: light-dark(var(--color-purple-700),var(--color-purple-300));"
99103
/>
100104
<span v-else>{{ label }}</span>
101105
</span>
@@ -172,14 +176,14 @@ export default {
172176
display: flex;
173177
gap: 10px;
174178
align-items: center;
175-
color: var(--color-black);
179+
color: light-dark(var(--color-black), var(--color-white));
176180
text-decoration: none;
177181
}
178182
179183
.source-type-icon {
180184
width: 25px;
181185
height: 25px;
182-
color: var(--color-gray-500);
186+
color: light-dark(var(--color-gray-500), var(--color-gray-250));
183187
}
184188
}
185189
</style>

‎src/components/Targets.vue‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,30 @@
2323
>
2424
<template #header="{ columnIndex, label}">
2525
<span>
26-
<k-icon v-if="columnIndex === 'likes'" type="heart-filled" style="color: var(--color-red-700);" />
27-
<k-icon v-else-if="columnIndex === 'replies'" type="chat" style="color: var(--color-yellow-700);" />
26+
<k-icon
27+
v-if="columnIndex === 'likes'"
28+
type="heart-filled"
29+
style="color: light-dark(var(--color-red-700),var(--color-red-300));"
30+
/>
31+
<k-icon
32+
v-else-if="columnIndex === 'replies'"
33+
type="chat"
34+
style="color: light-dark(var(--color-yellow-700),var(--color-yellow-300));"
35+
/>
2836
<k-icon
2937
v-else-if="columnIndex === 'reposts'"
3038
type="indie-repost"
31-
style="color: var(--color-green-700);"
39+
style="color: light-dark(var(--color-green-700),var(--color-green-300));"
3240
/>
3341
<k-icon
3442
v-else-if="columnIndex === 'mentions'"
3543
type="indie-mention"
36-
style="color: var(--color-blue-700);"
44+
style="color: light-dark(var(--color-blue-700),var(--color-blue-300));"
3745
/>
3846
<k-icon
3947
v-else-if="columnIndex === 'bookmarks'"
4048
type="bookmark"
41-
style="color: var(--color-purple-700);"
49+
style="color: light-dark(var(--color-purple-700),var(--color-purple-300));"
4250
/>
4351
<span v-else>{{ label }}</span>
4452
</span>

‎src/components/View.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default {
6868
}
6969
7070
.muted {
71-
color: var(--color-gray-600);
71+
color: light-dark(var(--color-gray-600), var(--color-gray-700));
7272
}
7373
7474
.shortened-text {
@@ -94,7 +94,7 @@ export default {
9494
}
9595
9696
.group-label {
97-
background-color: var(--color-blue-800);
97+
background-color: light-dark(var(--color-blue-700), var(--color-blue-800));
9898
color: var(--color-white);
9999
padding: 2px 5px;
100100
border-radius: var(--rounded-md);

0 commit comments

Comments
 (0)