Thread viewer for Bluesky
Fix dark mode
merges #6
authored by
Heika
and committed by
+10
-6
src/components/AccountMenu.svelte
+10
-6
src/components/AccountMenu.svelte
···
100
100
<AccountMenuButton onclick={logOut} label="Log out" />
101
101
{/if}
102
102
103
-
<li class="link"><a href="{getBaseLocation()}">Home</a></li>
103
+
<li class="link"><a href={getBaseLocation()}>Home</a></li>
104
104
<li class="link"><a href="?page=posting_stats">Posting stats</a></li>
105
105
<li class="link"><a href="?page=like_stats">Like stats</a></li>
106
106
<li class="link"><a href="?page=search">Timeline search</a></li>
···
172
172
}
173
173
174
174
@media (prefers-color-scheme: dark) {
175
-
#account.active {
176
-
color: #333;
175
+
#account_menu {
176
+
background: hsl(210, 11.81%, 24.9%);
177
+
border-color: hsl(210, 19.61%, 40%);
177
178
}
178
179
179
-
#account_menu {
180
-
background: hsl(210, 33.33%, 94.0%);
181
-
border-color: #ccc;
180
+
li.link a {
181
+
color: #ccc;
182
+
}
183
+
184
+
#account_menu :global(li:not(.link) + li.link) {
185
+
border-top-color: hsl(210, 19.61%, 40%);
182
186
}
183
187
}
184
188
</style>
+12
-4
src/components/AccountMenuButton.svelte
+12
-4
src/components/AccountMenuButton.svelte
···
32
32
33
33
@media (prefers-color-scheme: dark) {
34
34
li .button {
35
-
color: #333;
36
-
border-color: #bbb;
37
-
background-color: hsla(210, 100%, 4%, 0.12);
35
+
color: #ccc;
36
+
border-color: hsl(210, 19.61%, 40%);
37
+
background-color: hsla(210, 100%, 80%, 0.08);
38
38
}
39
39
40
40
li .button:hover {
41
-
background-color: hsla(210, 100%, 4%, 0.2);
41
+
color: #fff;
42
+
border-color: hsl(210, 22.13%, 52.16%);
43
+
background-color: hsla(210, 100%, 80%, 0.15);
44
+
}
45
+
46
+
li .button:active {
47
+
color: #fff;
48
+
border-color: hsl(210, 28.4%, 31.76%);
49
+
background-color: hsla(210, 100%, 80%, 0.05);
42
50
}
43
51
}
44
52
</style>
+9
-4
src/components/DialogPanel.svelte
+9
-4
src/components/DialogPanel.svelte
···
137
137
}
138
138
139
139
input[type="submit"] {
140
-
border-color: hsl(210, 15%, 40%);
141
-
background-color: hsl(210, 12%, 35%);
140
+
background-color: hsl(210, 53.33%, 35.29%);
141
+
border-color: hsl(210, 45.28%, 41.57%);
142
+
}
143
+
144
+
input[type="submit"]:hover {
145
+
background-color: hsl(210, 45.28%, 41.57%);
146
+
border-color: hsl(210, 39.34%, 47.84%);
142
147
}
143
148
144
149
input[type="submit"]:active {
145
-
border-color: hsl(210, 15%, 35%);
146
-
background-color: hsl(210, 12%, 30%);
150
+
border-color: hsl(210, 64.86%, 29.02%);
151
+
background-color: hsl(210, 53.33%, 35.29%);
147
152
}
148
153
}
149
154
}